分享传参
事先说明#
首先要说的就是
微信仗着自己的生态圈日益完善,随随便便就可以废弃或者改动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的形式
- 获取参数:
- 在Page的onLoad生命周期的参数
option.参数名
获取参数值 - 还可以在APP的onLaunch生命周期的参数
options.query.参数名
获取
- 在Page的onLoad生命周期的参数
注意点#
- 关于参数的问题,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:
App.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, }); },
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); } }); },
效果展示#
剪切板传参#
方法简述#
利用剪切板监听的方式,获取页面和参数
功能类似于淘宝、支付宝的分享
方法内容#
- 利用wx.setClipboardData设置剪切板内容
- 利用wx.getClipboardData获取剪切内容
- 监听到剪切板时当前小程序的分享字符串时,进行解析、跳转
注意点#
注意传参的话最好进行加密混淆、否则明码容易被用户手动替换
最好就是对整体进行签名,签名认证不一致(用户修改过)就不进行解析
效果展示:#
初始进入:
复制指令后进入:
分享的注意点#
由于7月5日微信更新API,减少“强制分享至不同群”等滥用分享能力,将不再支持onShareAppMessage()中获取分享状态(即那三个回调函数),所以也无法在分享后立刻获得群id,而改为用户打开后利用shareTicket换取群id
具体参考微信公众平台公告:10月10日起新提交发布的版本,不再支持分享回调参数 success 、fail 、complete
微信公共平台 - 分享功能调整及小程序组件更新[时间不准确]
微信公共平台 - 分享功能调整[时间不准确]
微信开放社区 - “分享监听”能力调整[时间准确]