vue WeChatを共有するvueは現在のページで他のページを共有することを実現します。
本論文の実例では、Vue WeChatの展示コードを共有しています。参考にしてください。具体的な内容は以下の通りです。
まずは友達に分かち合うことを例にします。
1、公式文書を先に見ます。
*1、WeChat共有でダイナミックなurlを取得する
*2、微信は自動的に追加されたパラメータを二回に分けます。 form=singlemessage
*3、vueの各ページで共有を呼び出すことができます。
3、直接コード分析
各ページでWeChatを共有できるようにするためには、vueルートのコンポーネントにウォッチを追加して傍受する必要があります。
コード
*1、urlは直接window.locations.hrefで取得したのではなく、window.locations.href.split(「啯」)[0]を使って取得しました。私のvueプロジェクトはhashモードでルートジャンプしたので、直接window.locations.href.splitを使います。
6、linkパラメータ
上述の5つの問題の暗号化文字列をまとめたurlと共有対象のlinkのページリンクはそのままにしてもいいです。元々は現在のページで他のページのリンクを共有するためです。ネットでこの二つは同じように維持しなければならないという人を見ましたが、必要はありません。vueプロジェクトの中の一つのページを共有するだけでなく、現在のページを共有するだけで両者の整合性を維持する必要があります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
まずは友達に分かち合うことを例にします。
1、公式文書を先に見ます。
wx.onMenuShareAppMessage({
title: '', //
desc: '', //
link: '', // , JS
imgUrl: '', //
type: '', // ,music、video link, link
dataUrl: '', // type music video, ,
success: function () {
//
},
cancel: function () {
//
}
});
2、vueシェアで踏んだ穴*1、WeChat共有でダイナミックなurlを取得する
*2、微信は自動的に追加されたパラメータを二回に分けます。 form=singlemessage
*3、vueの各ページで共有を呼び出すことができます。
3、直接コード分析
各ページでWeChatを共有できるようにするためには、vueルートのコンポーネントにウォッチを追加して傍受する必要があります。
コード
watch: {
// $route
"$route"(to, from) {
let currentRouter = this.$router.currentRoute.fullPath;
if(currentRouter.indexOf('userShare') == -1){
// userShare ,
this.shareOut();
}else{
this.shareOutTwo();
// userShare
}
}
},
4、shareOut()関数
let signStr = ''; //sha1
let timestamp = 1473254558; //
let nonceStr = 'shupao';
var obj = {
title:"", //
desc:" ", //
link:"http://www.XXXXXX.com/wx/pub/sr/simpleRegister.do",
imgUrl:"http://XXXXXXXXX.com/picactive.jpg"
};
this.$ydkAjax({
SENTYPE: "GET",
url: this.$domain + '/wx/pub/common/getJsApiTicket.json', // jsapi_ticket
params: null,
successFc: (response) => {
// sha1
signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + window.location.href;
var signature = SHA1(signStr);
wx.config({
debug: false,
appId: "wx6957b3a945a05e90", //appId
timestamp: timestamp, //
nonceStr: nonceStr, // ( )
signature: signature, //sha1
jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage']
});
wx.ready(function () {
// "
wx.onMenuShareTimeline({
title: obj.title,
link: obj.link, //
imgUrl: obj.imgUrl, //
success: function () {
// console.log(' ')
},
cancel: function () {
// console.log(' ')
}
});
//
wx.onMenuShareAppMessage({
title: obj.title, //
desc: obj.desc, //
link: obj.link, //
imgUrl: obj.imgUrl, //
success: function () {
// console.log(' ')
},
cancel: function () {
// console.log(' ')
}
});
})
},
isLayer: false
})
5、注意すること*1、urlは直接window.locations.hrefで取得したのではなく、window.locations.href.split(「啯」)[0]を使って取得しました。私のvueプロジェクトはhashモードでルートジャンプしたので、直接window.locations.href.splitを使います。
// sha1
signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + window.location.href
*2、また、現在のページを共有した後、他のユーザーが開いた後、現在共有されているページではなく、shareOut()関数のObjオブジェクトのlinkパラメータを他のページへのリンクに調整する必要があります。6、linkパラメータ
上述の5つの問題の暗号化文字列をまとめたurlと共有対象のlinkのページリンクはそのままにしてもいいです。元々は現在のページで他のページのリンクを共有するためです。ネットでこの二つは同じように維持しなければならないという人を見ましたが、必要はありません。vueプロジェクトの中の一つのページを共有するだけでなく、現在のページを共有するだけで両者の整合性を維持する必要があります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。