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).
- 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.
-
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
- Successfully verified through ready interface processing
-
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. -
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
-
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) - 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 ~