Recently wechat official finally gave the small program to share to the circle of friends API, so the company to increase the need to share to the circle of friends function 😷…

Start, according to official document, the document address: developers.weixin.qq.com/miniprogram… (As of the time of Posting, this feature is currently only available on Android).

WeChat developer tools to test if need to update the latest version, the download link: developers.weixin.qq.com/miniprogram…

Wx. showShareMenu API supports the function of sharing circle of friends parameter “Menus” requires a base library version 2.11 or above, so you need to set the base library version 2.11 or above in wechat small program development tool

1. Write the following code in onLoad or onShow:

    // Forward to moments
    wx.showShareMenu({
      withShareTicket:true.menus: ['shareAppMessage'.'shareTimeline']})Copy the code

2. Then define it on the pageonShareTimelineEvent, note: you need to make sure the page is definedonShareAppMessageMethods.3. Parameters: AndonShareAppMessageThe parameter definitions in the method are similar,queryIn, the parameter adopts the method of string splicing,Available in options for onLoad on the share page.

Note: When users open the page of the shared applets in moments, they will not actually open the applets, but enter a page in single-page mode. The “single-page mode” has some restrictions, such as no login state, the interface related to wx.login is not available, and it is not allowed to jump to other pages. For details, please refer to the official document: Developers.weixin.qq.com/miniprogram… Therefore, you can use the default token interface that does not require WX login after checking options.

⭐⭐⭐ Because I use mpvue to develop small programs, mpVue has not been updated synchronously when developing, it will cause the sharing page can not get parameters! To manually modify the mpvue package, go to node_modules and find mpvue index.js:

// Users click on the upper right corner to share
onShareAppMessage: rootVueVM.$options.onShareAppMessage
  ? function (options) { return callHook$1(rootVueVM, 'onShareAppMessage', options); } : null, add the onShareTimeline function, same as onShareAppMessage// Share your moments
onShareTimeline: rootVueVM.$options.onShareTimeline
  ? function (options) { return callHook$1(rootVueVM, 'onShareTimeline', options); } : nullAdd onShareTimeline to the LIFECYCLE_HOOKS arrayvar 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']; If the project introduces a plugin like mpvue-Factory because of page problems, it needs to be dealt with. Use the following file to deal with both problems. To make it more advanced, you can write a fix command, copy my following, put it in the build folder, check that your relative path is correct, if not, change your file directory pointing, then go to the package and run the command to execute the filevar chalk = require('chalk')
var path = require('path')
var fs = require('fs')
var data = ' '
var dataFactory = ' '

const hookConfig = '\'onShareAppMessage\','
const hookFn = '// The user clicks on the upper right to share \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)
}

// The onShareTimeline method is not handled in the MPvue framework
function replaceHook(str) {
  let res = str.replace(hookConfig, '\'onShareAppMessage\',\n' +
    ' \'onShareTimeline\',')
  res = res.replace(hookFn, '// The user clicks on the upper right to share \n' +
    ' onShareAppMessage: rootVueVM.$options.onShareAppMessage\n' +
    '? function (options) { return callHook$1(rootVueVM, \'onShareAppMessage\', options); } : null,\n' +
    '\n' +
    '// Share moments \n' +
    ' onShareTimeline: rootVueVM.$options.onShareTimeline\n' +
    '? function (options) { return callHook$1(rootVueVM, \'onShareTimeline\', options); } : null,')

  return res
}

// Fix the problem that the onShareTimeline method is not handled in the mpvue-Factory plug-in
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' +
    '// The user clicks on the upper right to share \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!'
))
Copy the code

Ios update quickly, the test is not good test 👊