如何实现分享小程序码

一、生成小程序码

方案一（服务端接口，生成小程序码）

1.服务端 👉 调用 👉微信服务端 👉 获取接口凭证 auth.getAccessToken

入参	参考值	说明
grant_type	client_credential	填写 client_credential
appid	wx1187xxxxxxxxxe0cb	小程序唯一凭证，即 AppID
secret	a55dbd5xxxxxxxxc96dd8991f59d	小程序唯一凭证密钥，即 AppSecret

2.服务端 👉 调用 👉 微信服务端 👉 获取小程序码 wxacode.getUnlimited

入参	参考值	说明
access_token	步骤1中，返回的接口凭证	接口调用凭证
scene	noteId=123&groupId=456&miniShopId=789	最大32个可见字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符请自行编码为合法字符（因不支持%，中文无法使用 urlencode 处理，请使用其他编码方式）
page	/packageLive/pages/live/live	参考值必须是已经发布的小程序存在的页面（否则报错），例如 pages/index/index, 根路径前不要填加 /,不能携带参数（参数请放在scene字段里），如果不填写这个字段，默认跳主页面
width	入参430	参考值二维码的宽度，单位 px，最小 280px，最大 1280px
auto_color	false	自动配置线条颜色
line_color	{"r":0,"g":0,"b":0}	线条颜色
is_hyaline	false	是否需要透明底色

3.服务端 👉 返回 👉 客户端 👉小程序码URL

特别注意：

• 微信服务器返回的图片是 Buffer，需要服务端处理成 图片url。

4.小程序 👉 用户打开时解析 👉携带参数 👉跳转

特别注意：

• scene参数，由于使用限制最大32个可见字符，只支持数字，大小写英文以及部分特殊字符：!#$&’()*+,/:;=?@-._~，其它字符请自行编码为合法字符（因不支持%，中文无法使用 urlencode 处理，请使用其他编码方式）
• 传参规则调整为： 通过’,’分开（小程序端接收需保持一致）

参考文档：

草料参数小程序码生成器—开发者使用指南
微信官方文档—获取小程序码
微信官方文档—服务端API—生成小程序码—wxacode.getUnlimited
微信官方文档—服务端API—调用凭证—auth.getAccessToken

方案二（草料模板接口，生成小程序码）

1.进入草料小程序参数二维码生成器

2.通过草料后台配置模板

模板配置

3. 通过Chrome抓取接口，获取模板id，跳转固定页面，携带固定参数（模板与页面一一对应）

接口抓取

4. 客户端 👉 调用 👉 草料服务端 👉 生成小程序码接口（非公开API，可能会失效，存在潜在不可控的风险）

5. 草料服务端 👉 返回 👉 客户端 👉 小程序码URL

6.小程序 👉 用户打开时解析 👉携带参数 👉跳转

7. 通过 PostMan 测试 https://cli.im/mina/generate_qrcode 接口可用性：

image.png

二、传递参数

客户端实现：(Weex代码，主要是网络请求，Native可以参考)

// 调用草料模板抓取的接口，通过param_value设置参数，进行传递，注意顺序

 data() {
    return {
      retryCount: 3,   // 请求重试次数
      miniCodeImg: '', // 小程序码图片地址
      noteId: 123,    // 参数1
      groupId: 456,   // 参数2
      shopId: 789,    // 参数3
    };
  },

 // 获取小程序码图片
 getCaoLiaoMiniCode() {
   const self = this;
   const queryData = {
     'tpl_id': '32890',
     'code_type': 'wxcode',
     'param_value[0]': self.noteId,
     'param_value[1]': self.groupId,
     'param_value[2]': self.shopId,
   };
   self.retryCount -= 1;
   stream.fetch({
     url: 'https://cli.im/mina/generate_qrcode',
     body: self.stringifyParams(queryData),
     method: 'POST',
     type: 'json',
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
     },
   }, (res) => {
     if (res.ok) {
       const response = res.data;
       if (response.code === 1) {
         self.miniCodeImg = response.data;
       } else if (self.retryCount <= 0) {
         shopModal.toast({ message: '小程序码生成失败，请重试' });
       } else {
         // 重试机制
         self.getCaoLiaoMiniCode();
       }
     }
   });
 },

三、接收参数

小程序实现：

/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
    const self = this;
    // 普通页面，参数接收
    var noteId = options.noteId;
    var groupId = options.groupId;
    var miniShopId = app.globalData.miniShopId || 0;

    // 小程序码，参数接收
    if (options.scene) {
      let scene = decodeURIComponent(options.scene);
      // 以 ',' 连接参数的方式实现，（注意入参的顺序）
      noteId = scene.split(",")[0] || 0;
      groupId = scene.split(",")[1] || 0;
      miniShopId = scene.split(",")[2] || 0;
    }

    self.setData({
      noteId: noteId,
      groupId: groupId,
      shopId: miniShopId,
    });
  },