uniapp生成二维码,扫描二维码,跳转小程序指定页面,获取参数;

1,666 阅读1分钟

需求: 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…