需求: A用户可以通过小程序扫描B用户的二维码(该二维码携带参数)跳转到指定页面,并且可以获得该页面的数据进行使用;
步骤
1. 在微信开发者平台配置二维码;
在选择 开发管理 – 开发设置 – 扫普通链接二维码打开小程序中进行添加;
( 参考:【微信小程序二维码配置】微信公众平台配置二维码,小程序测试二维码,小程序动态二维码,然后扫码打开对应页面进行操作_配置普通链接二维码规则-CSDN博客)
2. 生成二维码
a.安装 npm install uqrcodejs
b.引入import UQRCode from 'uqrcodejs';
c.使用
// A页面
<view class="qrcode-container">
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
</view>
// CSS
.qrcode-container {
margin-top: 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
<script>
export default {
data() {
authticationId:0,
// 二维码
qrcode: false,
imgCode: '', // 后续保存到手机相册所需要用到的字段
showCanvas: false,
clientId: 0,
},
onLoad(options){
// B页面扫码获取的值
this.authticationId = options.authticationId
this.getMemberInfo(); // 认证数据
},
methods:{
// 获取数据后,生成二维码
getMemberInfo(){
this.generate(`https:/xxxx/xxx?authticationId=${this.authticationId}`) // 微信平台申请的地址
},
// 生成二维码事件
generate(e) {
uqrCode.make({
canvasId: 'qrcode',
componentInstance: this,
text: e, // 想生成二维码到内容
size: 200,
margin: 0,
backgroundColor: '#ffffff',
foregroundColor: '#000000',
fileType: 'jpg',
errorCorrectLevel: uqrCode.errorCorrectLevel.H,
success: res => {
this.imgCode = res // base64的图片格式
}
})
},
}
}
</script>
3. 扫描二维码
// B页面
<uni-icons type="scan" size="25" @click="scanCode" color="white"></uni-icons>
<script>
export default {
methods: {
// 扫描
scanCode(){
let that = this;
uni.scanCode({
onlyFromCamera: true, //只能通过相机扫码
success: function(res) {
console.log('扫码', res.result)
let obj = {authticationId:that.getQueryString(res.result,'id'),
}
console.log("obj",obj);
uni.showLoading({
mask: true,
title: '核销中...'
})
setTimeout(() => {
uni.hideLoading();
uni.navigateTo({
// 需要跳转的页面,并把扫码获得的值传到该页面
url: `/subpkg/XXX/XXX?authticationId=${obj.authticationId}`
});
}, 1500);
}
});
},
getQueryString (url, name) {
let reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
let r = url.substr(1).match(reg)
if (r != null) {
return r[2]
}
return null;
},
}
}
</script>
参考:快速上手 | uQRCode 中文文档
参考:uniapp使用uQRCode绘制二维码,下载到本地,调起微信扫一扫二维码核销_uni-qrcode-CSDN博客
4. 通过场景值判断进入小程序的方式
// App.vue
onLaunch: function(options) {
// 获取启动时的场景值
const launchOptions = uni.getLaunchOptionsSync().scene;
// 1011-扫描二维码
if (launchOptions === 1011) {
// 根据需求写代码
}
},
参考:uni.getLaunchOptionsSync() | uni-app官网 (dcloud.net.cn)
参考:developers.weixin.qq.com/miniprogram…