小程序的分享与传参

本页目录：
事先说明
 分享方法概括

分享传参

利用URL参数
二维码传参
shareTicket
剪切板传参

分享的注意点

事先说明#

首先要说的就是
微信仗着自己的生态圈日益完善，随随便便就可以废弃或者改动API(比如这次的分享回调函数)
所以本文只能做到说，对于目前2018年09月30日这个时间结点，我所做的总结是没有问题的

再说一下做本次总结的初衷，或者是出发点

最近要负责一个信用卡的小程序项目
我主要负责的就是项目的前端开发
那么一系列关于分享的问题就来了

什么这个页面能不能生成链接放群里啊
小程序能不能分享到朋友圈啊
分享对接到个人，进而引入任务机制啊
能不能查看每个人发展了几个新用户啊
朋友圈分享加入参数怎么实现啊
巴拉巴拉

呼~

索性做一次比较系统的总结吧
看你们谁敢再提一些xx的需求

分享方法概括#

利用page生命周期onShareAppMessage()
基于二维码图片进行分享
通过剪切板分享

1. 利用page生命周期onShareAppMessage()#

只有设置了onShareAppMessage()函数
点击小程序右上角才会有分享选项
button方式的分享才会成功

具体API使用参考官网-页面事件处理函数

优点：
这个方法好的地方就是可以直接分享给用户和群
用户点击链接直接跳转小程序
非常方便，转化率也高

缺点：
不支持以链接形式分享到朋友圈

2. 基于二维码图片进行分享#

生成小程序二维码需要获取access_token
然后利用官方的接口去获取二维码
接口返回数据为二维码的二进制数据

需要注意的是：
官方的接口有3个
但是1、3的接口生成个数总和不得超过100000，但参数长度够长
2接口不限制总个数，生成频率也很大，但是2号接口的参数整体不得多于32个可见字符
这需要开发的取舍，或者进行适当的转换了

优点：
方法各种场景通用，可以对用户、对朋友圈、甚至支持以其他媒体介质传播

缺点：
方法操作复杂，转换率比较低
对于老年用户。可能不是很智能
参数可能还需要压缩

3. 通过剪切板分享#

这个方法适用的场景很单一
主要是各方都在用小程序的情况下
不是用来推广小程序的
而是用来分享具体内容的（前提是都已经在用小程序了）

目前淘宝、支付宝这种方式的分享很多

需要注意的是： 由于是明文分享，需要做好防修改操作
最好就是以签名的方式进行判断

优点：
分享途径不受限制
分享方法也很简单

缺点：
不适用小程序的推广，单纯的内部分享
打开小程序后才能被监听

利用URL参数#

方法简述#

就是前段最朴素的传参，在url后添加?name=value的形式，然后利用路由或者小程序自带的方法读取参数

方法步骤#

在页面onShareAppMessage()配置返回的url，以path?name=value的形式
获取参数：
1. 在Page的onLoad生命周期的参数 option.参数名 获取参数值
2. 还可以在APP的onLaunch生命周期的参数 options.query.参数名 获取

注意点#

关于参数的问题，onShareAppMessage()没有指明是否可以在tab页面的url带参数，但是wx路由API指明只能在跳转非tab页时带参数。
必须触发Page的onLoad或者APP的onLaunch才获取的到参数
测试结果：#
直接打开：从分享链接打开：

二维码传参#

方法简述#

利用小程序生成二维码的API生成二维码，让用户直接分享二维码

方法步骤#

利用appID和appSECRET获取access_token
利用access_token作为参数请求二维码API
接口返回二维码的二进制数据，处理成url
利用wx接口下载url并保存

注意点#

官方二维码生成接口有3种方法，具体参考官方API
三种方式的参数和url，data格式都不一样，具体可以参考博客链接

注意1、3一共只能生成10000个二维码，2的参数长度不能那个超过32个字符
接口返回的图片二进制，最好是在服务端储存然后返回链接给前端。

shareTicket#

方法简述#

shareTicket的作用是用来换取群的openID

方法步骤#

在showSHareMenu()或者updateShareMenu()中设置shareTicket为true
将小程序分享到群中
有用户打开此链接后,即可在App.onLaunch 或 App.onShow 获取到一个 shareTicket
利用wx.getShareInfo将shareTicket转化成加密数据
加密数据解密后获得群openID

注意点#

18年10月10号，微信关闭分享回调函数，所以无法再用户分享会后立刻获得shareTicket

使用App.onLaunch获取要注意，App.onLaunch只在小程序初始化时触发，即当已经打开小程序，再去群里点击链接，是不会触发App.onLaunch的。推荐使用App.onShow

代码演示#

demo7.js:

onShareAppMessage: function (res) {
 return {
     title: 'Yrobot test share',
     path: 'pages/demo7/index?shareID=Yrobot7'
 }
},
onShow: function () {
 // setTimeout(() => {
 //     wx.redirectTo({
 //         url: '../demo5/index'
 //     }) 
 // }, 6000);
 wx.showShareMenu({
     withShareTicket: true,
 });
},

App.js:

onShow: options => {
 console.log('App.onShow');
 console.log('shareID: ' + options.query.shareID);
 wx.getShareInfo({
   shareTicket: options.shareTicket,
   success: res => {
     console.log('wx.getShareInfo:success:');
     console.log(res);
   },
   fail: res => {
     console.log('wx.getShareInfo:fail');
     console.log(res);
   }
 });
  },