Mobile terminal H5 wants to use wechat JS-SDK to achieve sharing function. (In the early stage, I found a large number of documents to realize the function of clicking buttons to directly trigger wechat sharing. Finally, after all the hardships and hardships of success, only to know that the original click on the upper right corner of wechat browser to share the parameters of the function information… At this time the heart is very broken)

Reminder: JS-SDK sharing related interface can not automatically pop up the sharing box and other operations when clicking the button, but only modify the title, IMG and other information of the sharing function when clicking the three points in the upper right corner.

Get down to business…… To leave the address of the official document: developers.weixin.qq.com/doc/offiacc… The specific use of steps in fact, the official documentation is very clear, the following is their own practice summary.

1. Bind domain name (generally set corresponding domain name for back-end processing)

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”. Note: You can view the interface permissions in Developer Center after login.

Note: mp_verify_ssunLVMd9349DV2o. TXT may need to be saved in assets and packaged

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
   new CopyWebpackPlugin([
      {
         from: path.resolve(__dirname, './src/assets/utils'),
         to:path.resolve(__dirname, './dist/'),
         // config.dev.assetsSubDirectory,
         ignore: ['*']}])],Copy the code

2. Introduce JS files

Need to call in JS interface pages to introduce the following JS files, support (HTTPS) : res.wx.qq.com/open/js/jwe… For further improve service stability, when the resource is inaccessible, can change access: res2.wx.qq.com/open/js/jwe… (HTTPS is supported). Note: The AMD/CMD standard module loading method is supported

3. Obtain the signature information required by wx.config through the interface

this.$router.push({ query: {}})// The url of this page contains a query value, which may be one of the reasons why wx.config failed invalid signature
let _this = this;
let res = await this.https.get('/pay/wechatPay/share', {url: encodeURIComponent('https://mobile-test.rightknights.com/monthlyReport')});let d = res.data; // Save parameters such as signatures obtained from the back end
if(res && res.code ! ="0000") {
 return this.$Message.error(res.msg)
}
Copy the code

4, wx. Config

wx.config({
  debug: true.// 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.
  appId: d.appId, // Mandatory, the unique identifier of the public account
  timestamp: d.timestamp, // Mandatory to generate the timestamp of the signature
  nonceStr: d.nonceStr, // Mandatory to generate a random string of signatures
  signature:  d.signature,// Mandatory, signature
  jsApiList: ['updateAppMessageShareData'] // Mandatory, a list of JS interfaces to be used
});

wx.ready(function(){
  // The ready method is executed after the config information is validated. All interface calls must be made after the result of the config interface.
  // config is an asynchronous operation on the client side, so if you need to call the relevant interface when the page loads, you need to call the relevant interface in the ready function to ensure correct execution.
  // For interfaces that are invoked only when triggered by the user, they can be invoked directly without being placed in the ready function.
});

});
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.
});
Copy the code

5, sharing interface wx. UpdateTimelineShareData

wx.ready(function () {   // It should be called before the user can click the share button
     wx.updateAppMessageShareData({
       title: 'Monthly Report of Rights Protection'.// Share the title
       desc: 'Monthly Report of Rights Protection'.// Share the description
       link: 'https://mobile-test.rightknights.com/monthlyReport'.// Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
       imgUrl: _this.topBg03, // Share ICONS
       success: function () {
        alert('success')
        // The callback function executed after the user clicks share}}); });Copy the code

6. Realizing the sharing function of other terminals

Here to share another blog article, this article is mainly a brief introduction to the different end of the sharing principle, and provides links to specific implementation cases. zhuanlan.zhihu.com/p/52276788