Today simply WeChat under small forward capability, why want to say the simple, because main is forwarded to friends or groups, and there’s a share to friends, this is more complicated, first a little bit revealed, share to the circle of friends are mainly two kinds of methods, one is the background to produce posters figure, One is that the front end generates posters through canvas. We’ll talk more about it later when we have a chance. Okay, let’s get back to our forwarding friends.

OnShareAppMessage (Options)

Define the onShareAppMessage function in the Page to set the forwarding information for that Page.

  • Only if this event handler is defined will the forward button appear in the upper-right menu
  • Called when the user clicks the forward button
  • This event requires a return Object, which is used to customize the forwarding content

Options Parameter Description

parameter type instructions Minimum version
from String Source of forwarding events. Button: forwarding button within the page; Menu: indicates the forward menu in the upper right corner 1.
target Object If the from value is button, target is the button that triggered the forwarding event; otherwise, undefined 1.

User-defined forwarding fields

field instructions The default value Minimum version
title Forward the title Name of the current applets
path Forwarding path The current page path must be the full path starting with /
imageUrl Custom image path, can be the local file path, code package file path or network image path, support PNG and JPG, if the imageUrl is not passed, use the default screenshot. The display image has a 5:4 aspect ratio 1.5.0
success A callback function that was successfully forwarded 1.1.0
fail Forwarding failed callback function 1.1.0
complete The forwarding end callback function is executed both on success and failure 1.1.0

There is also a value called shareTickets, which is returned by successful forwarding and is an array, where each item is a shareTicket corresponding to a forwarding object

So much for the API, then the implementation of forwarding

Look at the picture first:

The first step is to configure wx.showShareMenu in onLoad

  onLoad: function(e) {wx.showShareMenu({// request applet to return withShareTicket:true
    }); 
  },Copy the code

Then configure onShareAppMessage

/* forward */ onShareAppMessage:function (ops) {
    if (ops.from === 'button') {// From the page forward button console.log(ops.target)}return {
      title: 'forward dom',
      path: `pages/index/index`,
      success: function(res) {// Successful forwarding console.log("Forwarded successfully :" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false; Wx. getShareInfo({// shareTicket: shareTickets[0], // success:function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function(res) {// Forwarding failed console.log("Forwarding failed :"+ JSON.stringify(res)); }}},Copy the code

Let me explain that wx.getShareInfo is available to get forward details

The complete JS code is

// createtimingFunction () const app = getApp() Page({data: {motto:'Hello World',
  },
  onLoad: function(e) {wx.showShareMenu({// request applet to return withShareTicket:true}); }, /* forward */ onShareAppMessage:function (ops) {
    if (ops.from === 'button') {// From the page forward button console.log(ops.target)}return {
      title: 'forward dom',
      path: `pages/index/index`,
      success: function(res) {// Successful forwarding console.log("Forwarded successfully :" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        // if (shareTickets.length == 0) {
        //   return false; Wx. getShareInfo({// shareTicket: shareTickets[0], // success:function (res) {
        //     console.log(res)
        //   }
        // })
      },
      fail: function(res) {// Forwarding failed console.log("Forwarding failed :"+ JSON.stringify(res)); }}}})Copy the code

Those of you who are smart should know that the WXML code is next

<view class="container">
  <view class="userinfo">
   <button open-type="share"</button> </view> <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>Copy the code

As a reminder, button must set open-type=”share” otherwise it will not work.

If you think the article is good and helpful to you, please share it with your friends and give a thumbs-up. If you don’t know anything, you can leave a comment below.
If you want to see the source code, you can go to my Github download, welcome to star, github: github.com/Mr-MengBo/w…