微信小程序 camera组件实现自定义界面的扫码功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序 camera组件实现自定义界面的扫码功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用到的功能点：

代码实现：

效果图：

微信小程序 camera组件实现自定义界面的扫码功能

想要实现自定义界面的扫码，这里用到了微信小程序的媒体组件

⚠️：同一页面只能插入一个 camera 组件

使用到的功能点：

1. camera

mode=scanCode // 扫码模式
binderror //用户不允许使用摄像头时触发
bindscancode // 在扫码识别成功时触发，仅在 mode="scanCode" 时生效

2.<cover-image> 也可使用image替代 // 覆盖camera原有的样式

微信小程序 camera组件实现自定义界面的扫码功能

3.跳转URL携带参数字符长度过长，需要encodeURIComponent编码URI

cover-view 与 cover-image

为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。

代码实现：

// scan.vue. 扫码页
<view>
	<camera class="scan-area" @scancode="onScancode" @error="onError" mode="scanCode" device-position="back" flash="off">
		// <cover-image src="/static/image/scan-camera.gif"></cover-image>
        <image src="/static/image/scan-camera.gif"></image>
	</camera>

	<text>将二维码/条码放入框内，即可自动扫描</text>

	<view class="btn">	
		<view class="photo">
			<img @click="onPhoto" src="/static/image/photo.png" alt="" />
			<text>相册</text>
		</view>
	</view>
</view>

<script>
import * as utils from "@/utils/index";
export default({
    data(){
        return{
            hasScan: false， // false 还未跳转，true 已跳转一次
        }

    },
    onHide() { // 生命周期回调—监听页面隐藏
			this.hasScan = false
	},
	onUnload() { //生命周期回调—监听页面卸载
			this.hasScan = false
	},
    methods: {
			/**
			 * 扫码识别成功时触发,跳转至扫描详情页
			 * 防止扫码成功后页面多次跳转这里需要双重校验：
			 * 第一层校验：延迟跳转utils.throttle
			 * 第二层校验：使用变量控制hasScan是否跳转
			 * */
			onScancode: utils.throttle(function (e) {
				let bid = e.detail.result;
				if (!this.hasScan) {
					wx.navigateTo({
						url: `/sub_scan/scan_details/index?bid=` + encodeURIComponent(JSON.stringify(bid)),
						success: function(){
							this.hasScan = true
						}
					});
				}
			}, 1000),
    }
})

</script>

utils.throttle 方法：

// utils.js

/**
 * 防止小程序多次点击跳转
 * @param {*} obj 
 * @returns 
 */
export function throttle(fn, gapTime) {
    if (gapTime == null || gapTime == undefined) {
        gapTime = 1500
    }

    let _lastTime = null

    // 返回新的函数
    return function () {
        let _nowTime = + new Date()
        if (_nowTime - _lastTime > gapTime || !_lastTime) {
            fn.apply(this, arguments)   //将this和参数传给原函数
            _lastTime = _nowTime
        }
    }
}

scan_detail.vue 接收扫码页面的参数

// scan_detail.vue ,扫描详情页

onLoad(option) {
			this.BID = JSON.parse(decodeURIComponent(option.bid)); // 拿到参数bid

			if (!utils.isNullOrEmpty(this.BID) && this.BID.indexOf('did:bid') > -1) {
				// 当有bid的时候，loading先暂时加载着，直到接口内容返回后，才需要将loading设置为false，identifyState设置为true
				this.onGetDidDetails(this.BID) // 调用接口
			} else {
				this.isShowLoading = false // 当识别不到bid则loading消失。显示未识别内容
				this.identifyState = false // 显示未识别
			}
		},

以上实现扫码跳转，携带扫码成功的参数跳转至详情页面！文章来源地址https://www.toymoban.com/news/detail-484548.html

到了这里，关于微信小程序 camera组件实现自定义界面的扫码功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！