First, take sharing with friends as an example
1. Read the official documents first
({
title: '', // Share the title
desc: '', // Share the description
link: '', // Share the link. The domain name or path of the link must be consistent with the official account JS security domain name corresponding to the current page.
imgUrl: '', // Share icon
type: '', // Sharing type, music, video or link, if not filled in, the default is link
dataUrl: '', // If the type is music or video, you want to provide a data link, the default is empty
success: function () {
// The callback function executed after the user confirms the sharing
},
cancel: function () {
// The callback function executed after the user cancels the sharing
}
});
2. The pitfalls that vue shares
* 1. Get dynamic urls in WeChat sharing
* 2. Automatically added parameters on WeChat secondary sharing form=singlemessage
* 3. You can call and share on each page in vue
3. Direct code analysis
In order to ensure that each page can be shared on WeChat, you need to add watch listening in the vue root component
Code
watch: {
// Listen to $route Change Call Sharing Link "$route"(to, from) {
let currentRouter = this.$; //
if(('userShare') == -1){ //If it is not the userShare sharing page, share another interface ();
}else{
(); //When the current page is userShare page, it calls another interface }
}
},
4. ShareOut() function
let signStr = ''; //sha1 encrypted string let timestamp = 1473254558; //Time stamp let nonceStr = 'shupao';
var obj = {
title:"", //title desc:"Text description", //describe link:"/wx/pub/sr/",
imgUrl:"/"
};
this.$ydkAjax({
SENTYPE: "GET",
url: this.$domain + '/wx/pub/common/', //Get jsapi_ticket interface by your own server params: null,
successFc: (response) => {
//Split Sha1 encrypted string signStr = 'jsapi_ticket=' + + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + ;
var signature = SHA1(signStr);
({
debug: false,
appId: "wx6957b3a945a05e90", //appId
timestamp: timestamp, //Time stamp nonceStr: nonceStr, //Encryption requires strings (defined by yourself) signature: signature, //Sha1 encrypted string jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage']
});
(function () {
//Share to friends" ({
title: ,
link: , // Share link imgUrl: , // Share icon success: function () {
// ('Successfully shared in Moments') },
cancel: function () {
// ('Share failed to share to your friends') }
});
//Share with friends ({
title: , // Share the title desc: , // Share the description link: , // Share link imgUrl: , // Share icon success: function () {
// ('Share to friends for success') },
cancel: function () {
// ('Share to friends failed') }
});
})
},
isLayer: false
})
5. Things to note
*1. The url is obtained directly, not using ("#")[0], because my vue project is routed through hash mode, and using ("#")[0] directly will cause signature failure
//Split Sha1 encrypted stringsignStr = 'jsapi_ticket=' + + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' +
*2. And after we share the current page, after other users open it, it is not the currently shared page. This requires adjusting the link parameter in the obj object in the shareOut() function to link other pages
6. Link parameters
The URLs in the encrypted string summary in the above 5 questions can be kept in the same way as the page links in the sharing object, because they are originally meant to share links to other pages on the current page. I saw someone on the Internet saying that these two must be kept the same, but it is not necessary, unless you simply share one of the pages in the vue project, and then share the current page to make the two consistent.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.