vue ＋微信二次分享／自定義分享

時間 2019-11-08

標籤 vue 微信二次分享自定義简体版

原文原文鏈接

微信二次分享／自定義分享

從App中使用App分享（一次分享）

使用微信導航欄的分享（二次分享）－－已作處理

使用微信導航欄的分享（二次分享）－－未作處理

如上圖，若是不作相關處理，頁面進行二次分享，用戶看到的就是連接＋空圖，上面顯示的文案（考拉閱讀）其實是獲取的title標籤中的文案，我在網上查的相關例子有說明，圖片若是不設置，將會自動獲取瀏覽器渲染的第一張圖片，通過我的測試，並無實現（朋友圈同理，不作圖片展現）。前端

微信js-sdk說明文檔vue

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。（通常後端配置）

前端須要調取後端的接口，獲取微信的congfig所須要的參數ios

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，須要使用的JS接口列表
});

jsApiList裏面須要填寫你調用的jsApi，updateAppMessageShareData（分享微信，QQ），updateTimelineShareData（微信朋友圈，QQ空間），onMenuShareTimeline／onMenuShareAppMessage／onMenuShareQQ 這三個即將廢棄，不建議使用。
⚠️可是在本次開發中，我只使用了updateAppMessageShareData，updateTimelineShareData，個別Android（微信版本7.0.3）分享出來的仍是沒有圖片和文案，ios的是沒有問題，因此又加上了棄用的onMenuShareTimeline，onMenuShareAppMessage以後，安卓機也能夠正常分享。

判斷當前客戶端版本是否支持指定JS接口ajax

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 須要檢測的JS接口列表，全部JS接口列表見附錄2,
    success: function(res) {
    // 以鍵值對的形式返回，可用的api值true，不可用爲false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

wx.config中的 debug 設爲true，在微信測試時會自動彈出相關信息，在微信開發者工具中也會打印出流程（分爲begin，end）,以下圖

經過ready接口處理成功驗證

在ready接口中調取updateAppMessageShareData，updateTimelineShareData方法後端

wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
    wx.updateAppMessageShareData({ 
        title: '', // 分享標題
        desc: '', // 分享描述
        link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
        imgUrl: '', // 分享圖標
        success: function () {
          // 設置成功
        }
    })
});
在vue的開發項目中，可在created或mounted生命週期中調用

經過error接口處理失敗驗證api

wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
});

⚠️須要注意的點瀏覽器

經過後端的接口獲取微信配置的參數時，須要傳遞當前頁面url安全

-  url（當前網頁的URL，不包含#及其後面部分），若是沒有＃，則須要傳遞完整的url
-  url須要編碼    encodeURIComponent(url)

代碼以下

//  wetchat.js  －－ 我的封裝
import wx from 'weixin-js-sdk';  // 引入wxJS
import apiUrl from "@/api/index";  // 本項目的api （根據本身項目）
export function wxChatShare(param) {
    let _url = encodeURIComponent(param.url)  // 當前頁面的url
    apiUrl.wechatConfig(_url)  // wechatConfig是獲取微信配置相關信息的接口，此處根據我的項目寫法而定，相似於this.$ajax
    .then (res => {
        if(res.data.code==200) {
        // 接口返回配置信息
            wx.config({
                debug: false,
                appId: res.data.content.appid,
                timestamp: res.data.content.timestamp, // 必填，生成簽名的時間戳
                nonceStr: res.data.content.nonceStr, // 必填，生成簽名的隨機串
                signature: res.data.content.signature, // 必填，簽名
                jsApiList: [  // 用的方法都要加進來
                    'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage'
                ]
            });
            wx.ready(function () {
                //分享到朋友圈

                wx.updateTimelineShareData({ 
                    title: param.title, // 分享標題
                    link: param.link, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標
                    success: function () {
                      // 設置成功
                        console.log("分享到朋友圈成功返回的信息爲:", res);
                        this.$Message.message("設置成功!");
                    }
                })

                wx.onMenuShareTimeline({
                    title: param.title, // 分享標題
                    link: param.link, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標
                    success: function () {
                    // 用戶點擊了分享後執行的回調函數
                    },
                })

                //分享給朋友

                wx.updateAppMessageShareData({ 
                    title: param.title, // 分享標題
                    desc: param.desc, // 分享描述
                    link: param.link, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標
                    success: function () {
                      // 設置成功
                        console.log("分享到朋友圈成功返回的信息爲:", res);
                        this.$Message.message("設置成功!");
                    }
                })
                wx.onMenuShareAppMessage({
                    title: param.title, // 分享標題
                    desc: param.desc, // 分享描述
                    link: param.link, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: param.imgUrl, // 分享圖標
                    type: param.type, // 分享類型,music、video或link，不填默認爲link
                    dataUrl: param.dataUrl, // 若是type是music或video，則要提供數據連接，默認爲空
                    success: function () {
                    // 用戶點擊了分享後執行的回調函數
                    }
                });
            });
            wx.error(function (res) {
                console.log('驗證失敗返回的信息:', res);
            });
        } else {
            console.log(res.data.message);
        }
    })
  }

// home.vue

  import * as wechatJS from '@/utils/wechat'  // 引入wechat.js

//  寫在方法中調用，或者在生命週期中調用
let _param = {
    studentId: 1, // 我的項目而定
    activityId: 1, // 我的項目而定
    url: window.location.href, // 當前頁面url
    title: "爲我點贊，一塊兒免費搶考拉閱讀VIP會員卡，暢讀一萬本好書～",  // 分享數據配置
    desc: "孩子要讀書，上考拉閱讀", // 分享數據配置
    link: _nowUrl, // 分享數據配置
    imgUrl: url, // 分享數據配置  －－ 全路徑
    type: "link", // 分享類型,music、video或link，不填默認爲link
    dataUrl: " ", // 若是type是music或video，則要提供數據連接，默認爲空
}

已上
有什麼不清楚的，或者須要糾正的，歡迎留言～微信

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

vue ＋ 微信二次分享／自定義分享

vue ＋微信二次分享／自定義分享