如何实现分享小程序码

一、生成小程序码

方案一(服务端接口,生成小程序码)

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,
    });
  },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容