专栏名称: 蚂蚁金服ProtoTeam
数据前端团队
目录
相关文章推荐
前端早读课  ·  【第3522期】扩展 React 服务端渲染的能力 ·  20 小时前  
前端早读课  ·  【招聘】抖音生活服务商品团队招前端实习生 ·  20 小时前  
前端早读课  ·  【第3521期】如何在 React 中构建一个库 ·  昨天  
前端早读课  ·  【第3520期】Slack、Notion ... ·  2 天前  
前端早读课  ·  【图书】MCP原理与实战:高效AI ... ·  2 天前  
51好读  ›  专栏  ›  蚂蚁金服ProtoTeam

微信小程序分享到朋友圈之曲线救国

蚂蚁金服ProtoTeam  · 掘金  · 前端  · 2017-12-08 03:02

正文

请到「今天看啥」查看全文



这里我使用的是不限次的二维码接口即B方案
代码示例:

wx.request({
  method: 'POST',
  url: app.apiUrl + '/miniprogram/qrcode',
  data: {
    appid: app.appid,
    page: 'pages/activityInfo/activityInfo',
    scene: 'id:' + this.data.activity.id
  },
  header: {
    'content-type': 'application/x-www-form-urlencoded',
    'X-TOKEN': app.jwt
  },
  success(res) {
    res = res.data // 这里我是从服务器直接返回保存好的图片url
    ... // 后文介绍保存过程
  },
  fail() {
    wx.hideLoading()
    app.$alert('分享失败', 'wrong', _this)
  }
})

发送请求前我们需要准备好页面的page(开头不能带有“/”)路径及scene(页面参数) 文档中对scene字段只有简单的描述并没有给到实际示例,这里其实很容易误导新人,不知道这个scene具体应该如何使用。

最大32个可见字符,只支持数字,大小写英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~,其它字符请自行编码为合法字符(因不支持%,中文无法使用 urlencode 处理,请使用其他编码方式)

以上是官方对scene的介绍

其实这里就是一个单纯的字符串,至于参数如何传递我们完全可以自行设计,自己喜欢就好。一定要注意官方有限制使用的特殊字符(!#$&'()*+,/:;=?@-._~) 这里我使用的是key:value;key:value形式,当用户扫码后通过onLoad(options)来获取scene

onLoad (options) {
    // 因为这里要跟正常url传参做区分,所以要先判断scene是否存在
    if (options.scene) {
      let scene = decodeURIComponent(options.scene) // 官方要求一定要先decodeURIComponent才能正常使用scene
      scene = scene.split(';')
      let obj = {}
      for (let i = 0; i < scene.length; i++) {
        let item = scene[i].split(':')
        obj[item[0]] = item[1]
      }
      // 将options.id 替换为scene中提取的id 以保证后续业务不受影响
      options.id = obj.id
    }
} 

服务端实现

服务端我用的是golang 没有什么原因,就因为该项目的后端是golang搭建的,自己也在练习golang,所以服务端代码写的没有任何水平,还请路过的大神指点一二,这里主要介绍实现思路







请到「今天看啥」查看全文