最近微信官方终于给小程序增加了分享到朋友圈的API，于是公司增加分享到朋友圈功能的需求就来了😷...
根据官方文档走起，文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html（至发博时间止，该功能目前只支持Android版本）。
微信开发者工具要测试的话需更新最新版本，下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
wx.showShareMenu api支持分享朋友圈的功能参数“menus”需要基础库2.11版本以上，因此需要在微信小程序开发工具里设置基础库为2.11版本以上
1.首先在onLoad或onShow中写入以下代码：
// 转发到朋友圈
wx.showShareMenu({
withShareTicket:true,
menus:['shareAppMessage','shareTimeline']
})
2.然后在页面中定义onShareTimeline事件，注意：需要确保页面中定义了onShareAppMessage方法。
3.参数：与onShareAppMessage方法中参数定义类似，query中参数采用字符串拼接的方法，在分享页面的onLoad的options中可获取到。
注意：用户在朋友圈打开分享的小程序页面，并不会真正打开小程序，而是进入一个单页模式的页面，“单页模式”有一些限制，比如无登录态，与wx.login有关的接口不可用，不允许跳转到其它页面等，具体可参照官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html#%E5%8D%95%E9%A1%B5%E6%A8%A1%E5%BC%8F%E4%B8%8B%E7%9A%84%E9%99%90%E5%88%B6
所以页面中需要token的接口可经过options判断后，触发不需要wx登录态的默认token接口进行使用。
⭐⭐⭐由于我是用的mpvue开发的小程序，开发时mpvue还未同步更新，会造成分享页获取不到参数的情况！需手动修改mpvue这个包，在node_modules里面找到mpvue的index.js中：
// 用户点击右上角分享
onShareAppMessage: rootVueVM.$options.onShareAppMessage
? function (options) { return callHook$1(rootVueVM, 'onShareAppMessage', options); } : null,
添加onShareTimeline函数，和onShareAppMessage相同
// 分享朋友圈
onShareTimeline: rootVueVM.$options.onShareTimeline
? function (options) { return callHook$1(rootVueVM, 'onShareTimeline', options); } : null,
在LIFECYCLE_HOOKS这个数组中把onShareTimeline添加进去
var LIFECYCLE_HOOKS = [
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
'activated',
'deactivated', 'onLaunch',
'onLoad',
'onShow',
'onReady',
'onHide',
'onUnload',
'onPullDownRefresh',
'onReachBottom',
'onShareAppMessage',
'onShareTimeline',
'onPageScroll',
'onTabItemTap',
'attached',
'ready',
'moved',
'detached'
];
然后打包，完美解决
如果项目中因为页面问题引入了例如mpvue-factory这种插件的还需要处理一下，用下面这个文件去处理吧，两个问题一起处理。
再高级一点的话，可以写一个fix命令，复制我下面的，放到build文件夹，检查下你们的相对路径是不是对的，不对的话改一下你们的文件目录指向，然后自己去package里面加命令执行这个文件，直接命令跑一下就可以
var chalk = require('chalk')
var path = require('path')
var fs = require('fs')
var data = ''
var dataFactory = ''
const hookConfig = '\'onShareAppMessage\','
const hookFn = '// 用户点击右上角分享\n' +
' onShareAppMessage: rootVueVM.$options.onShareAppMessage\n' +
' ? function (options) { return callHook$1(rootVueVM, \'onShareAppMessage\', options); } : null,'
const mpVueSrc = '../node_modules/mpvue/index.js'
const mpVueFactorySrc = '../node_modules/mpvue-page-factory/index.js'
const factoryHook = 'onShareAppMessage: App.onShareAppMessage ?\n' +
' function (options) {\n' +
' var rootVueVM = getRootVueVm(this);\n' +
' return callHook$1(rootVueVM, \'onShareAppMessage\', options);\n' +
' } : null,'
try {
data = fs.readFileSync(path.join(__dirname, mpVueSrc), 'utf-8')
if (data.indexOf('onShareTimeline') === -1) {
data = replaceHook(data)
}
fs.writeFileSync(path.join(__dirname, mpVueSrc), data)
} catch (e) {
console.error(e)
}
try {
dataFactory = fs.readFileSync(path.join(__dirname, mpVueFactorySrc), 'utf-8')
if (dataFactory.indexOf('onShareTimeline') === -1) {
dataFactory = replaceFactoryHook(dataFactory)
}
fs.writeFileSync(path.join(__dirname, mpVueFactorySrc), dataFactory)
} catch (e) {
console.error(e)
}
// 处理mpvue框架中没有处理onShareTimeline方法的问题
function replaceHook(str) {
let res = str.replace(hookConfig, '\'onShareAppMessage\',\n' +
' \'onShareTimeline\',')
res = res.replace(hookFn, '// 用户点击右上角分享\n' +
' onShareAppMessage: rootVueVM.$options.onShareAppMessage\n' +
' ? function (options) { return callHook$1(rootVueVM, \'onShareAppMessage\', options); } : null,\n' +
'\n' +
' // 分享朋友圈\n' +
' onShareTimeline: rootVueVM.$options.onShareTimeline\n' +
' ? function (options) { return callHook$1(rootVueVM, \'onShareTimeline\', options); } : null,')
return res
}
// 处理mpvue-factory插件中没有处理onShareTimeline方法的问题
function replaceFactoryHook(str) {
let res = str.replace(factoryHook, 'onShareAppMessage: App.onShareAppMessage ?\n' +
' function (options) {\n' +
' var rootVueVM = getRootVueVm(this);\n' +
' return callHook$1(rootVueVM, \'onShareAppMessage\', options);\n' +
' } : null,\n' +
'\n' +
' // 用户点击右上角分享\n' +
' onShareTimeline: App.onShareTimeline ?\n' +
' function (options) {\n' +
' var rootVueVM = getRootVueVm(this);\n' +
' return callHook$1(rootVueVM, \'onShareTimeline\', options);\n' +
' } : null,')
return res
}
console.log(chalk.green(
' Tip: fix mpvue_share Success!'
))
ios快点更新，测都不好测👊
