uni-app 微信小程序生成小程序码二维码带参数

uni-app 微信小程序生成二维码带参数

今天分享一下如何在uni-app 中生成带有参数的二维码,主要用于分享和推广使用。首先分享一下思路和流程,最后总结一下需要注意的事项。

首先看一下效果图吧。【请忽略图上的二维码。】

需求:

  • 1、点击生成专属二维码
  • 2、弹出框展示生成的二维码,附带当前用户的个人信息
  • 3、点击保存可以保存到手机相册

代码如下:

<view class="my_list_item" @click="createQrCode">
     <view>生成专属二维码</view>
</view>

弹出框:

<!-- 二维码弹出层 -->
<view class="qrcode" v-if="showQrcode">
    <view class="code_content">
        <image :src="src2" style="width: 400rpx;height: 400rpx; margin: 10px auto; display: block;" mode="widthFix"></image>
        <button class="savePoster" @click="savePoster" type="primary">保存到相册</button>
    </view>
    <image src="../../../static/icon_close.png" class="close_code" @click="closeCode"></image>
</view>

 

微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.createQRCode.html 

⚠️注意: 需要注意的是小程序分享二维码有三种方法,分别对应不同的需求,具体详情请看微信官方文档。

第一步: 获取 access_token

getToken() {
    uni.showLoading({
        title: '加载中',
        mask: true
    })
    let APPID = '从后台获取'
    let APPSECRET = '从后台获取'
    uni.request({
        url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`,
        method: "GET",
    }).then((res) => {
        if (res[1].data.expires_in != 7200) {
            uni.showToast({
                title: "分享失败,请重新尝试。",
                icon: "none",
                duration: 2000
            })
            uni.hideLoading();
            return
       }
       console.log(res)
       this.shareToken = res[1].data.access_token
       uni.hideLoading();
    }).catch(err => {
        console.log(err)
        uni.hideLoading();
    })
},

这里需要注意的是,现在我们是在前端写的,测试的时候设置成为不校验域名,真是线上版本的时候,是不能这么写的,因为涉及到机密的数据:APPID 和 APPSECRET,微信是强制不让在前端做这个。

报错: https://api.weixin.qq.com 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

所以必须在服务器上获取token 然后再通过后台的服务器返回 token给前端。(没有服务器的也不要担心,云开发可以解决这个难题,写一个云函数来代替服务器返回token)

第二步:将要转换的页面和参数转换为小程序码

⚠️: 请求微信的接口的时候请求方式为post,要注意设置相应的数据格式为arraybuffer,请求完毕后将数值转换为base64。

getWxCode() {
    let that = this
    let userId = uni.getStorageSync('userId') //这里是我要传递的参数
    let scene='t/qrcode01*id/'+ userId; // 这里设置了渠道和分享人的信息
    //let scene= 'id=123&name=jack' 也可以是这样子的格式
    console.log(scene)
    uni.showLoading({
        title: '加载中',
        mask: true
    })
    uni.request({
        url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${this.shareToken}`,
        method: "POST",
        data: {
             scene: scene,
             page: 'pages/index/index'
        },
        responseType: 'arraybuffer',
        success: function(res) {
            uni.hideLoading();
            let src = wx.arrayBufferToBase64(res.data);
            that.src2 = 'data:image/png;base64,' + src;
            that.showQrcode = true //控制弹出框,展示二维码
      }
})
},

注意⚠️⚠️⚠️:通过微信开发文档将页面转换为带参数的小程序码(一定要保证当前小程序有线上版本)

最后连贯起来就是:

createQrCode() {
    console.log("生成专属二维码")
    if(this.src2){
        this.showQrcode = true
    } else {
        this.showQrcode = false
        this.getToken()
    } 
},

页面中如果获取传递的参数呢?

onLoad: function (options) {
    let scene = decodeURIComponent(options.scene)
    console.log(scene)
},

如何解处理所接收到的 scene ?所生成的图片我们如何保存到手机相册? 下一篇文章一起分享。

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏