最近微信官方終于給小程序增加了分享到朋友圈的API，于是公司增加分享到朋友圈功能的需求就來(lái)了??...

根據(jù)官方文檔走起，文檔地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html（至發(fā)博時(shí)間止，該功能目前只支持Android版本）。

微信開(kāi)發(fā)者工具要測(cè)試的話需更新最新版本，下載鏈接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

wx.showShareMenu api支持分享朋友圈的功能參數(shù)“menus”需要基礎(chǔ)庫(kù)2.11版本以上，因此需要在微信小程序開(kāi)發(fā)工具里設(shè)置基礎(chǔ)庫(kù)為2.11版本以上

1.首先在onLoad或onShow中寫(xiě)入以下代碼：

    // 轉(zhuǎn)發(fā)到朋友圈
    wx.showShareMenu({
      withShareTicket:true,
      menus:['shareAppMessage','shareTimeline']
    })

2.然后在頁(yè)面中定義onShareTimeline事件，注意：需要確保頁(yè)面中定義了onShareAppMessage方法。

3.參數(shù)：與onShareAppMessage方法中參數(shù)定義類(lèi)似，query中參數(shù)采用字符串拼接的方法，在分享頁(yè)面的onLoad的options中可獲取到。

注意：用戶在朋友圈打開(kāi)分享的小程序頁(yè)面，并不會(huì)真正打開(kāi)小程序，而是進(jìn)入一個(gè)單頁(yè)模式的頁(yè)面，“單頁(yè)模式”有一些限制，比如無(wú)登錄態(tài)，與wx.login有關(guān)的接口不可用，不允許跳轉(zhuǎn)到其它頁(yè)面等，具體可參照官方文檔：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
所以頁(yè)面中需要token的接口可經(jīng)過(guò)options判斷后，觸發(fā)不需要wx登錄態(tài)的默認(rèn)token接口進(jìn)行使用。

???由于我是用的mpvue開(kāi)發(fā)的小程序，開(kāi)發(fā)時(shí)mpvue還未同步更新，會(huì)造成分享頁(yè)獲取不到參數(shù)的情況！需手動(dòng)修改mpvue這個(gè)包，在node_modules里面找到mpvue的index.js中：

// 用戶點(diǎn)擊右上角分享
onShareAppMessage: rootVueVM.$options.onShareAppMessage
  ? function (options) { return callHook$1(rootVueVM, 'onShareAppMessage', options); } : null,

添加onShareTimeline函數(shù)，和onShareAppMessage相同
// 分享朋友圈
onShareTimeline: rootVueVM.$options.onShareTimeline
  ? function (options) { return callHook$1(rootVueVM, 'onShareTimeline', options); } : null,


在LIFECYCLE_HOOKS這個(gè)數(shù)組中把onShareTimeline添加進(jìn)去
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'
];

然后打包，完美解決

如果項(xiàng)目中因?yàn)轫?yè)面問(wèn)題引入了例如mpvue-factory這種插件的還需要處理一下，用下面這個(gè)文件去處理吧，兩個(gè)問(wèn)題一起處理。

再高級(jí)一點(diǎn)的話，可以寫(xiě)一個(gè)fix命令，復(fù)制我下面的，放到build文件夾，檢查下你們的相對(duì)路徑是不是對(duì)的，不對(duì)的話改一下你們的文件目錄指向，然后自己去package里面加命令執(zhí)行這個(gè)文件，直接命令跑一下就可以

var chalk = require('chalk')
var path = require('path')
var fs = require('fs')
var data = ''
var dataFactory = ''

const hookConfig = '\'onShareAppMessage\','
const hookFn = '// 用戶點(diǎn)擊右上角分享\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框架中沒(méi)有處理onShareTimeline方法的問(wèn)題
function replaceHook(str) {
  let res = str.replace(hookConfig, '\'onShareAppMessage\',\n' +
    '  \'onShareTimeline\',')
  res = res.replace(hookFn, '// 用戶點(diǎn)擊右上角分享\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插件中沒(méi)有處理onShareTimeline方法的問(wèn)題
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' +
    '    // 用戶點(diǎ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快點(diǎn)更新，測(cè)都不好測(cè)??