This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

I have developed several projects using VUE and VUe-Router routing frameworks, and encountered many pits, some of which failed to find a very ideal answer.

Vue learning is relatively simple, the official documentation is very clear (cn.vuejs.org/v2/guide/), do some Demo can be skilled, and now there are many frameworks (vuex, MintUI, Element, iView, etc.), according to the needs of the project to learn, So I haven’t written much about VUE.

This time is mainly to share their problems in wechat sharing, Android machine sharing there is no problem, mainly IOS to share a variety of signatures, title, content, pictures do not change the problem.

1. Of course, wechat sharing should introduce wechat JS-SDK

Wechat JS-SDK documentation: mp.weixin.qq.com/wiki?t=reso…

Introduction: share page res.wx.qq.com/open/js/jwe…

The Vue framework can be used: github.com/yanxi-me/we… Command: NPM install weixin-js-sdk

2. Encapsulate the functions of Wechat sharing as follows:

import wx from 'weixin-js-sdk'; import apiUrl from "@/config/apiUrl.js"; export default { wxChat : ($vue, param) => { let appId = ""; let timestamp=""; let nonceStr = ""; let signature = ""; let options = { title: "", desc: "", link: "", imgUrl: "", type: "link", dataUrl: "", localUrl: "" }; options = Object.assign({}, options, param); // $vue.$httpPost(apiUrl.weChatShare, {shareLink: options.localUrl}).then((res) => { if(res.data&&res.data.status==="1000") { wx.config({ debug: false, appId: Res.data. appId, // Must be the same as Ticke ------ Mandatory, unique identifier of public number timestamp: res.data.timestamp, // Mandatory, timestamp of generated signature nonceStr: Res.data. nonceStr, // Required, generates a random string of signatures signature: res.data.signature, // Required, jsApiList: [ 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone' ] }); Wx. error(function (res) {console.log(' error :', res); wx.error(function (res) {console.log(' error :', res); }); Wx.ready (function () {// Share the timeline to wx.onmenusharetimeline ({title: options.title, // Share the title link: ImgUrl: options.imgurl, // Share icon success: Function (res) {console.log(" share to friends ", res); ShowMsg (" Share success!" ); }, cancel: function (res) {console.log(" cancel to share ", res) {console.log(" cancel to share ", res); }}); Wx. onMenuShareAppMessage({title: options.title, desc: options.desc, link: options.link, imgUrl: {title: options.title, desc: options.desc, link: options.link, imgUrl: ImgUrl, type: options.type, // Share type, music, video, or link. The default is link dataUrl: Options. dataUrl, // Provide data link if type is music or video, default to null SUCCESS: Function (res) {console.log(" share with a friend successfully returns :", res); showMsg(JSON.stringify(options)); }, cancel: function (res) {console.log(" Cancel sharing with friends returns :", res); }}); // Share to QQ wx.onMenuShareQQ({title: options.title, desc: options.desc, link: options.link, imgUrl: {title: options.title, desc: options.desc, link: options.link, imgUrl: ImgUrl, success: function (res) {console.log(" share to QQ friend successfully return message :", res); }, cancel: function (res) {console.log(" cancel sharing with QQ friends returns :", res); }}); Wx. onMenuShareQZone({title: options.title, desc: options.desc, link: options.link, imgUrl: ImgUrl, success: function (res) {console.log(" share to qspace successfully returns :", res); }, cancel: function (res) {console.log(" cancel to qzone returns :", res); }}); }); } else { console.log(res.data.msg); } }).catch((err) => { console.log(err); }); }};Copy the code

3. How to use encapsulated sharing

If the vUE routing hash mode is used, the address obtained in IOS is always the address opened at the beginning of the page, not the current page address after the jump, so you can initialize the page or share the page initialization meet (Android), you can obtain different kernel differentiation. Use location.href = “” when jumping to a page, don’t use routing, just call wechat initialization on the share page. To insure, save the jump address to localstorage. set(“LocalUrl”, document.url) in route. beforeEach hook.

Href = “? #/invite? userId=3” ;

import weixin from "@/utils/wechat.js"; initWxChat: function() { let url = window.localStorage.getItem("LocalUrl")||window.location.href; Let param = {title: "invite ", desc:" welcome to invite ", link: window.location.href, imgUrl: this.headPortrait, localUrl: url}; weixin.wxChat(this, param); }Copy the code

4. The wechat signature authentication can be passed, but the user-defined shared content may not work

This problem is mainly to share pages with parameters, due to the automatic routing Hash pattern will join # #, WeChat in IOS automatically add their own content, and then put # later in the behind it so get parameter can be a problem, perhaps the signature certification will also appear problem, so you want to go to join a special symbol for processing, To the argument # of the passed address, add a? Number, and the best parameter to pass only one, if it is multiple words or there will be a problem.

Gets the current page address: let the url = window. The localStorage. The getItem (” LocalUrl “) | | window. The location. The href;

Share authentication page localUrl: http://localhost:9000/? #/invite? userId=3;

Really want to share the page link: window. The location. The href. The split (‘ # ‘) [0] + “# / invite_share? userId=3”;

Article content if write existence question welcome message to point out, let us common exchange, common discussion, common progress ~~~

If the article is helpful to you, move your little hands to praise, encourage, give me the power to move forward.

“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”