Vue+WeChat Secondary Sharing/Custom Sharing

  html, html5, javascript, vue.js

WeChat Secondary Sharing/Custom Sharing

  • Use App Sharing from App (One Share)

图片描述

  • Sharing with WeChat Navigation Bar (Secondary Sharing)-Processed

图片描述

  • Sharing with WeChat Navigation Bar (Secondary Sharing)-Not Processed

图片描述

As shown in the above figure, if the relevant processing is not done, the page will be shared for the second time. What the user sees is the link+empty figure. The copy shown above (koala reading) is actually the copy in the title tag obtained. The relevant example I checked online shows that if the picture is not set, the first picture rendered by the browser will be automatically obtained. After personal tests, it has not been realized (similarly, the circle of friends will not display the picture).


WeChat js-sdk Documentation

  • First login WeChat public platform and enter “function settings” of “public number settings” to fill in “JS interface security domain name”. (General backend configuration)
  • The front-end needs to call the back-end interface to obtain the parameters required by WeChat’s congfig.

    wx.config({
     Debug: true, // opens debug mode, the return value of all api calls will come out at client alert, if you want to view the incoming parameters,   you can open it at pc side, the parameter information will be typed through log, and it will only be printed at pc side.
     AppId: '', // Required, Unique Identification of Public Number
     Timestamp:, // required, timestamp to generate signature
     NonceStr: '', // required, generating signed random string
     Signature: '',// required, signature
     JsApiList: [] // Required, JS Interface List to Use
     });
  • JsApiList needs to be filled with the jsApi you called, updateAppMessageShareData (Sharing WeChat, QQ), updateTimelineShareData (WeChat circle of friends, QQ space), OnMenusharimeline/OnMenusharippMessage/OnMenushariqq, which are about to be abandoned and are not recommended.
    However, in this development, I only used updateAppMessageShareData, updateTimelineShareData, and some Android (WeChat version 7.0.3) still did not share pictures and documents. ios did not have any problems, so after adding the discarded onMenuShareTimeline and onMenuShareAppMessage, Android can also share normally.
  1. Judging whether the current client version supports the specified JS interface

    wx.checkJsApi({
     JsApiList: ['chooseImage'], // See Appendix 2 for a list of JS interfaces to be detected.
     success: function(res) {
     //return as a key-value pair, available api value is true, not false
     //for example: {"checkresult": {"chooseimage": true}, "errmsg": "checkjsapi: ok"}
     }
     });
     
     Debug in wx.config is set to true, relevant information will pop up automatically during WeChat test,   and the process (divided into begin and end) will be printed out in WeChat developer tool, as shown in the following figure

图片描述

  1. Successfully verified through ready interface processing
  2. Calling updateAppMessageShareData, updateTimelineShareData Method in ready Interface

    Wx.ready(function () {// needs to be called before the user may click the share button
     wx.updateAppMessageShareData({
     Title: '', // Share Title
     Desc: '', // Share Description
     Link: '', // Share the link. The domain name or path of the link must be consistent with the public number JS security domain name corresponding to the current page.
     ImgUrl: '', // Share icon
     success: function () {
     //Set Successfully
     }
     })
     });
     In vue's development project, it can be called in the created or mounted life cycle.
  3. Failed validation through error interface processing

    wx.error(function(res){
     //error function will be executed if config information fails to be verified. If the signature expires and the verification fails,   the specific error information can be viewed in debug mode of CONFIG or in the res parameter returned. For SPA, the signature can be updated here.
     });


Points for Attention

  1. When obtaining WeChat configuration parameters through the back-end interface, the current page url needs to be passed

    -url (url of the current web page, excluding # and the following parts), if there is no #, the complete URL needs to be passed
     -urls require encoding encodeURIComponent(url)
  2. The code is as follows
//wethat.js-personal packaging
 import wx from 'weixin-js-sdk';  //Introduce wxJS
 import apiUrl from "@/api/index";  //api of this project (according to own project)
 export function wxChatShare(param) {
 Let _ url = encodericomponent (param.url)//url of current page
 Api URL. wechatconfig (_ URL)//wechatconfig is the interface to obtain information about wechat configuration, which is written according to personal items, and is similar to this.$ajax.
 .then (res => {
 if(res.data.code==200) {
 //Interface Returns Configuration Information
 wx.config({
 debug: false,
 appId: res.data.content.appid,
 Timestamp: res.data.content.timestamp,//required, timestamp to generate signature
 Noncestr: res.data.content.nonccestr,//required to generate a signed random string
 Signature: res.data.content.signature,//required, signature
 JsApiList: [// All methods used should be added
 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage'
 ]
 });
 wx.ready(function () {
 //Share with friends
 
 wx.updateTimelineShareData({
 Title: param.title.//share title
 Link: param.link, // share the link. the domain name or path of the link must be consistent with the public number JS security domain name corresponding to the current page.
 ImgUrl: param.imgUrl, // share icon
 success: function () {
 //Set Successfully
 Console.log ("the information successfully returned to the circle of friends is:", res ");
 Message ("setup succeeded!"  );
 }
 })
 
 wx.onMenuShareTimeline({
 Title: param.title.//share title
 Link: param.link, // share the link. the domain name or path of the link must be consistent with the public number JS security domain name corresponding to the current page.
 ImgUrl: param.imgUrl, // share icon
 success: function () {
 //The user clicked the callback function executed after sharing
 },
 })
 
 //Share with friends
 
 wx.updateAppMessageShareData({
 Title: param.title.//share title
 Desc: param.desc.//share description
 Link: param.link, // share the link. the domain name or path of the link must be consistent with the public number JS security domain name corresponding to the current page.
 ImgUrl: param.imgUrl, // share icon
 success: function () {
 //Set Successfully
 Console.log ("the information successfully returned to the circle of friends is:", res ");
 Message ("setup succeeded!"  );
 }
 })
 wx.onMenuShareAppMessage({
 Title: param.title.//share title
 Desc: param.desc.//share description
 Link: param.link, // share the link. the domain name or path of the link must be consistent with the public number JS security domain name corresponding to the current page.
 ImgUrl: param.imgUrl, // share icon
 Type: param.type, // share type, music, video or link; default is link if not filled in.
 Dataurl: param.dataurl.//if type is music or video, provide a data link, which is empty by default.
 success: function () {
 //The user clicked the callback function executed after sharing
 }
 });
 });
 wx.error(function (res) {
 Log ('information returned from validation failure:', res');
 });
 } else {
 console.log(res.data.message);
 }
 })
 }
// home.vue
 
 Import * aswechat js from' @/utils/wechat'//introduce wechat.js
 
 //Write to call in method or in life cycle
 let _param = {
 StudentId: 1, // depending on individual project.
 ActivityId: 1, // depending on individual project.
 Url: window.location.href, // current page url
 Title: "Give me some compliments, grab koalas to read VIP membership cards for free and read 10,000 good books ~"//Share data configuration
 Desc: "Children should read, koala should read",//Share data configuration
 Link: _nowUrl, // share data configuration
 ImgUrl: url, // Share Data Configuration-Full Path
 Type: "link", // share type, music, video or link; default is link if not filled in
 DataUrl: "", // If type is music or video, provide a data link, which is empty by default.
 }

On board
If there is anything unclear or needs to be corrected, please leave a message ~