快捷導(dǎo)航

vue微信分享 vue實現(xiàn)當(dāng)前頁面分享其他頁面

更新時間：2017年12月02日 09:14:34 作者：敵人-別人家的孩子

這篇文章主要為大家詳細介紹了vue微信分享功能，vue實現(xiàn)當(dāng)前頁面分享其他頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue微信分享展示的具體代碼，供大家參考，具體內(nèi)容如下

首先以分享給朋友為例

1、先看官方文檔

wx.onMenuShareAppMessage({

 title: '', // 分享標題

 desc: '', // 分享描述

 link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致

 imgUrl: '', // 分享圖標

 type: '', // 分享類型,music、video或link，不填默認為link

 dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空

 success: function () {

  // 用戶確認分享后執(zhí)行的回調(diào)函數(shù)

 },

 cancel: function () {

  // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)

 }

});

2、vue分享踩的坑

* 1、微信分享中獲取動態(tài)的url
* 2、微信二次分享自動添加的參數(shù) form=singlemessage
* 3、vue中各個頁面都可以調(diào)用分享

3、直接代碼分析

為了保證每個頁面都可以調(diào)起微信分享,需要在vue根組件中,添加 watch監(jiān)聽
代碼

watch: {
  // 監(jiān)聽 $route 變化調(diào)用分享鏈接
  "$route"(to, from) {
   let currentRouter = this.$router.currentRoute.fullPath; 
   if(currentRouter.indexOf('userShare') == -1){  
   //如果不是userShare分享頁面,則分享另外一個接口
    this.shareOut();
   }else{
    this.shareOutTwo();   
   //當(dāng)前頁面是userShare頁面時分享調(diào)用另外一個接口  
   }
  }
 },

4、shareOut()函數(shù)

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', //自己服務(wù)器獲取jsapi_ticket接口
    params: null,
    successFc: (response) => {
     //拼接sha1加密字符串
     signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '&timestamp=' + 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.location.href 獲取的,不是使用 window.location.href.split(“#”)[0]來獲取, 因為我的vue項目是通過hash模式來進行路由跳轉(zhuǎn)的 , 直接使用 window.location.href.split(“#”)[0]會導(dǎo)致簽名失敗

//拼接sha1加密字符串
signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + window.location.href

*2、而且我們要在當(dāng)前頁面分享出去之后 , 其他用戶打開之后不是當(dāng)前分享出去的頁面 ,這就需要調(diào)整 shareOut()函數(shù)中 obj對象中的 link參數(shù)為其他頁面鏈接

6、link參數(shù)

上述 5 問題中的加密字符串匯總的 url 和分享對象中 link中的頁面鏈接可以不用保持一樣,因為本來就是要在當(dāng)前頁面分享出去其他頁面的鏈接。網(wǎng)上我看到有人說這兩個必須要保持一樣,其實沒有必要, 除非你只是簡單的在vue項目中的其中一個頁面做分享 , 然后只分享當(dāng)前頁面才需要讓二者保持一致性。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: