Wechat (web development) custom share content

preface

Document capability value: can only help wechat webpage development custom share to friends, friends circle and QQ share to QQ friends, QQ space development needs.

The purpose of the document: to serve the people who have not taken over the development task of wechat custom sharing, to complete rapid development and understanding.

Why use JS-SDK?

The original wechat share above figure left, using the JS-SDK configuration is the figure right, so you know why to use this JS-SDK, because the original can not meet the business needs;

So when the product says wechat sharing needs, we need to know that they are talking about customized wechat sharing and wechat content, because wechat originally has wechat sharing function, what we do is to customize his title, description, picture, to make it meet our business.

Document structure:

Access Step supplement (purposely placed at the bottom of the article so that you can quickly complete this requirement)

You can directly read the access steps to achieve wechat custom sharing, I suggest you read the understanding section, in order to understand and better use it!

Access to the steps

Plug-ins to download

Access to the link

Procedure: Bind domain name – > import JS-SDK – > Configure on the customized sharing page – > Customize sharing content on the customized sharing page ready.

Binding domain

First, log in the wechat public platform, enter the “function setting” of the “public Account Setting”, and fill in the “JS interface security domain name”.

JS interface security domain name setting (Baidu experience)

Introduce the SDK on the index.html page

  // It is not recommended to introduce lower versions of the SDK, such as: < script SRC = "http://res.wx.qq.com/open/js/jweixin-1.3.2.js" > < / script >, Because his wx.onMenuShareTimeline, wx.onMenuShareAppMessage, wx.onMenuShareQQ, wx.onMenuShareQZone interfaces are about to be abandoned
 <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
Copy the code

Create the vxmixin. js file in the standard place and paste the following code:

import axios from "axios"
export default {
  methods: {
    async wxConfig() {
      const res = await axios.post(
 "xxx/xxx/xxx". { currentUrl: window.location.href },  {  // TODO:Set this parameter based on the actual interface  baseURL: "https://xxx.xxx.xxx/xxx/". method: "POST"  }  )  / / interface  const { appId, timestamp, nonceStr, signature } = res.data && res.data.data  await wx.config({  // If debug mode is enabled, the return value of all API calls will be displayed in the client alert. If you want to view the parameters passed in, you can open it in the PC, and the parameter information will be printed in the log.  // debug: true,    // Mandatory, the unique identifier of the public account  appId,   // Mandatory to generate the timestamp of the signature  timestamp,   // Mandatory to generate a random string of signatures  nonceStr,   // Mandatory, signature  signature,   // Mandatory, a list of JS interfaces to be used  jsApiList: ["updateTimelineShareData"."updateAppMessageShareData"]  })   wx.error(function(res) {  If the config information fails to be verified, the error function will be executed. For example, the verification fails due to the expiration of the signature. You can view the specific error information in the debug mode of config or in the returned res parameter.  console.log("Wechat verification failed", res)  })  wx.ready((a)= > {  this.updateAppMessageShareData()  this.updateTimelineShareData()  })   wx.checkJsApi({  jsApiList: ["updateTimelineShareData"."updateAppMessageShareData"].// List of JS interfaces to be tested. See Appendix 2 for a list of all JS interfaces.  success: function(res) {  // Return key-value pairs with API values true when available and false when not available  / / such as: {" checkResult ": {" chooseImage" : true}, "errMsg" : "checkJsApi: ok"}  }  })  },   // Customize the share content of "Share to friends" and "Share to QQ" buttons  updateAppMessageShareData() {  wx.updateAppMessageShareData({  // TODO:Fill in the following information based on actual conditions  title: "xxx". desc: "xxx". link: xxx,  // imgUrl must be an absolute address, otherwise there may be problems  imgUrl: "xxx". success() {  // The callback function executed after the user confirms the share  }  })  },   // Customize the share content of "Share to moments" and "Share to Qzone" buttons  updateTimelineShareData() {  wx.updateTimelineShareData({  // TODO:Fill in the following information based on actual conditions  title: "xxx". link: xxx,  // imgUrl must be an absolute address, otherwise there may be problems  imgUrl: "xxx". success() {  // The callback function executed after the user confirms the share  }  })  }  } } Copy the code

Add the following code to the page you want to share:


import vx from "/ vxmixin.js"
export default {
  mixins: [vx],

 created() {  / / if it is  if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) = ="micromessenger") {  this.wxConfig()  }  } / /... } Copy the code

Supplementary part

The document

Js-sdk documentation

Pit point

Error: invalid URL domain is invalid because the domain name of the current web page is not bound to the appId of the binding public account

2. Wx. UpdateTimelineShareData, wx updateAppMessageShareData, the parameters in the imgUrl, don’t write base64, introduced the require, relative path, take to the CDN absolute address, otherwise you will have the following questions, See if you’ve been fooled, it’s been a bloody lesson:

Scenario: In IOS Hash mode (I only tested this scenario, I do not know what the problem is), I need to manually refresh the custom wechat sharing page when I access the custom wechat sharing page from other pages under this domain name

Not directly enter the refresh, can share the customized content, I do not know what the problem, but with the code to achieve a scene, to solve the bug:

// The guard inside the component
  beforeRouteEnter(to, from, next) {
    // Check whether the source of IOS and page is not from the home page, that is, there is a bug, the code to manually refresh
    if (
!!!!! navigator.userAgent.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/) &&
 from.name === "Home"  ) {  next(vm= > {  // Disable the alert popover. Prevent reload error reminders  window.alert = function() {  return false  }  // The code implements a manual refresh  location.reload()  })  return  }    // If not, do nothing in case of 2  next()  }, Copy the code

Display content that fails to be customized to share is pure native display content:
Android 9 system, sharing details on http://asset.esign.cn/apps/esign-nuxt-website/marketing/sml/index.html#/intro/xx pages, links are Shared out android # automatically cut off at the back of the part, Into the website of http://asset.esign.cn/apps/esign-nuxt-website/marketing/sml/index.html#/ is the home page

Solution: in front of the # to add a question mark, so that it will not be cut off at the back of the content of http://asset.esign.cn/apps/esign-nuxt-website/marketing/sml/index.html?#/

This article is formatted using MDNICE