获取小程序码（一物一码）实现方式

先放小程序官方文档：获取小程序码

 

要求实现：获取小程序码，且无数量限制。

 

 实现思路：

1、点击按钮后调接口，接口返回小程序码；

2、把小程序码传给Dom模板，模板是自定义的，可在页面上渲染成任意自己想要的样子。

3、注意：用户扫描小程序码进入到的指定页面， 在 onLoad() 生命周期取参时需要区分用户是扫码进入的还是正常通过url跳转进入的，2种进入页面的取参方式不同。

 

具体步骤：

1、js代码

show_post() {//按钮点击事件
    var that = this;
    that.get_qrcodes(function (qrcodes) {
      wx.showLoading({
        title: ''正在生成中...'',
        mask: true
      });
      setTimeout(function () {
        wx.hideLoading();
        wx.showToast({
          title: ''海报已生成'',
          icon: ''success'',
          duration: 1500
        })
        that.setData({
          showPost: true,
          template: new ImageExample().palette(that.data.image1, qrcodes) 
        });
 
        // 说明：
        // ImageExample() --自定义的海报模板
        // that.data.image1 --生成海报需要的图片
        // qrcodes --接口返回的小程序码
      }, 1000)
    });
},
 
get_qrcodes: function (cb) {//调接口取二维码
    var that = this;
    var paramData = {};
    paramData.sign = app.globalData.signture;//这个是自己项目请求接口时必传的参数，跟生成小程序码没关系。
    paramData.big = ''200'';//设置小程序码的宽高
    paramData.page = ''pages/activities/doubleEleven/eleven_index/eleven_index'';//设置扫描小程序码后跳转的页面
 
    /* 用scene来传参，传参时有些地方要注意：
       一般情况下参数的拼接方式是这样的：goodsId=111&sourceUuid=222；
       但是这里的等号要用一个特殊符号代替，因为有多个参数时，用等号拼接，在onload()里取参会取不完整。只能取到goodsId=111，后面的参数取不到。
       具体是什么原因造成的，不知道。反正用特殊符号"*"取代就可以取到完整参数。
       这里建议不要用"/"符号，因为如果参数里有url或者图片链接时,这些参数值里也有"/"，onload()里通过"/"截取参数会有问题。
    */ 
    if(that.data.sourceUuid){
      paramData.scene = ''goodsId*''+that.data.goodsId+''&sourceUuid*''+that.data.sourceUuid;
    }else{
      paramData.scene = ''goodsId*''+that.data.goodsId;
    }
    
    wx.request({
      url: app.globalData.getRequestUrl(''chargeBModeKmjLinkQrimgScene''),
      data: paramData,
      method: ''POST'',
      header: {
        ''content-type'': ''application/json''
      },
      success: function (res) {
        if (res.data.data.code != 0) {
          wx.showToast({
            title: res.data.data.msg,
            icon: ''none'',
            mask: false
          });
        }
        that.setData({
          qrcodes: ''data:image/png;base64,'' + res.data.data.base64
        })
        cb(''data:image/png;base64,'' + res.data.data.base64) //返回小程序码
      },
    });
  },
 
 
class ImageExample {//海报模板
  palette(image1, qrcodes) {
    return ({
      width: ''750rpx'',
      height: ''1040rpx'',
      borderRadius: ''15rpx'',
      views: [
        {
          type: ''image'',
          url: image1.replace(''http'', ''https''),
          css: {
            width: ''750rpx'',
            height: ''690rpx'',
            left: ''0rpx'',
            top: ''0rpx''
          },
        },
        {
          type: ''image'',
          url: qrcodes,
          css: {
            top: ''700rpx'',
            width: ''200rpx'',
            height: ''200rpx'',
            left: ''50rpx'',
          },
        },
        {
          type: ''text'',
          text: ''长按识别二维码参团哦'',
          css: {
            height: ''80rpx'',
            right: ''48rpx'',
            top: ''840rpx'',
            color: ''#999'',
            fontSize: ''30rpx'',
            lineHeight: ''84rpx'',
            textAlign: ''right''
          },
        },
        {
          type: ''image'',
          url: ''https://m.qxdaojia.com/static/html_list_static/img/list/post_bot_img.png'',
          css: {
            top: ''910rpx'',
            width: ''750rpx'',
            height: ''129rpx'',
            left: ''0rpx'',
          },
        },
      ],
    });
  };
}

 

生成小程序码接口参数解释：

 

2、Dom部分：template就是封装好的模板。

<!-- 海报 -->
<view class="follow_views" wx:if=''{{showPost}}''>
  <view class="flex-column down_load_pop" bindtap="close_post">
    <view class="flex-column down_load_cont" catchtap="postcatch">
    <painter palette="{{template}}" bind:imgOK="onImgOK" style=''border-radius:15rpx;position:fixed;left:-100vw;'' />
      <scroll-view scroll-y style="width:650rpx;height:auto;max-height:76vh;box-shadow: 0 1px 18px rgba(0, 0, 0, .72);border-radius:15rpx;">
        <image src=''{{imagePath}}'' style="width:650rpx; border-radius:15rpx;display:block" mode=''widthFix'' show-menu-by-longpress/>
      </scroll-view>
      <image src=''https://m.qxdaojia.com/static/html_list_static/img/goods_detail/close.png'' class="post_close" bindtap="close_post" />
      <view class=''saveButton'' bind:tap=''saveImage''>保存图片</view>
      <view style="color:#666;font-size:12px;line-height:50rpx">保存图片到手机后,将图片分享好友、朋友圈</view>
    </view>
  </view>
</view>

最后生成的海报样子：

 

3、扫小程序码之后进入指定页，onload()取参方式。

onLoad: function (options) {
    if(options.scene){
      //scene有值说明是扫小程序码进入的当前页面，取参数的方式需要改变
      //options.scene取到的是 "goodsId*111&sourceUuid*222"，要把字符串转换成obj。
    }else{
      //正常方式跳转进来，可以直接从options里取参。
      that.setData({
        goodsId: options.goodsId,
        sourceUuid: options.sourceUuid ? options.sourceUuid : "",//客户经理开团会带有sourceUuid
      })
    }
},

4、最后有一点要注意，scene对参数长度有限制。

解决方案：

前端人员在调获取小程序码接口的时候传参，后端人员在后台对参数进行MD5加密，无论传了多少个参数，加密后会生成一个16位的字符串，这样就不会超过32个字符的限制。

前端在onload()取到加密后的16位scene，再调一个接口对参数进行解密。

 onload() 代码如下：

 
onLoad: function (options) {
    var that = this;
    if(options.scene){
      //scene有值说明是扫小程序码进入的当前页面，取参数的方式需要改变
      //调接口把加密的参数进行解密
      var paramData = {sceneEn:options.scene};
      
      wx.request({
        url: app.globalData.getRequestUrl(''sceneEncrypt''),
        data: paramData,
        method: ''get'',
        header: {
          ''content-type'': ''application/json''
        },
        success: function (res) {
          // console.log(res.data);
          if (res.data.code == 0) {
            var sceneStr = res.data.scene_decrypt;
            var arr = sceneStr.split("&");
            var obj={};
            arr.forEach(function(e){
              var nameStr = e.substring(0,e.indexOf("*"));
              var valueStr = e.substring(e.indexOf("*")+1,e.length);
              obj[nameStr] = valueStr;
            })
            console.log("解密后的参数：");console.log(obj);
 
            that.setData({
              goodsId: obj.goodsId,
              sourceUuid: obj.sourceUuid ? obj.sourceUuid : "",
            })
          }else{
            wx.showToast({
              title: "页面参数解密失败，请重试！",
              icon: ''none'',
              mask: false
            });
          }
        }
      });
    }else{
      //正常方式跳转进来，可以直接从options里取参。
      that.setData({
        goodsId: options.goodsId,
        sourceUuid: options.sourceUuid ? options.sourceUuid : "",//客户经理开团会带有sourceUuid
      })
    }
},