目录
使用到的功能点：
代码实现：
效果图：
想要实现自定义界面的扫码，这里用到了微信小程序的媒体组件
⚠️：同一页面只能插入一个 camera 组件
使用到的功能点：
1. camera
- mode=scanCode // 扫码模式
- binderror //用户不允许使用摄像头时触发
- bindscancode // 在扫码识别成功时触发，仅在 mode="scanCode" 时生效
2.<cover-image> 也可使用image替代 // 覆盖camera原有的样式
3.跳转URL携带参数字符长度过长，需要encodeURIComponent编码URI
cover-view 与 cover-image
为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。
代码实现：
-
// . 扫码页
-
<view>
-
<camera class="scan-area" @scancode="onScancode" @error="onError" mode="scanCode" device-position="back" flash="off">
-
// <cover-image src="/static/image/"></cover-image>
-
<image src="/static/image/"></image>
-
</camera>
-
-
<text>将二维码/条码放入框内，即可自动扫描</text>
-
-
<view class="btn">
-
<view class="photo">
-
<img @click="onPhoto" src="/static/image/" 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: {
-
/**
-
* 扫码识别成功时触发,跳转至扫描详情页
-
* 防止扫码成功后页面多次跳转这里需要双重校验：
-
* 第一层校验：延迟跳转
-
* 第二层校验：使用变量控制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>
方法：
-
//
-
-
/**
-
* 防止小程序多次点击跳转
-
* @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 // 显示未识别
-
}
-
},
以上实现扫码跳转，携带扫码成功的参数跳转至详情页面！