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

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

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

 实现思路：

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
      })
    }
},