自定義微信瀏覽器分享卡片和朋友圈內容

首先 ：小編恭喜你已經掉入uniapp的坑，你是別想爬出去了，那是不可能的！！！

大家都被uniapp的“一套代碼，適用多個平台”所吸引，但是都是成年人，天底下有那么好的事情嗎？是沒有的。

 

　　但是今天小編給大家帶來的“自定義微信分享卡片內容”是一個在微信開發中常用到的功能，自然uniapp也是會有的，下面就聽小編來說：

　　　　uniapp官方並沒有特別指出微信分享卡片和分享朋友圈的功能，但是好在微信團隊的給力，給我們提供了方法，我們只需要調用此方法就可以了。

　　　-----在 uniapp 中可以使用模塊方式引用微信 js-sdk ，微信官網直接下載的使用有問題，可以使用 jweixin-module。

　　

安裝

- NPM安裝方式（不會用NPM就不要用這種方式）

復制代碼npm install jweixin-module --save

- 下載使用方式

下載地址：https://unpkg.com/jweixin-module@1.6.0/lib/index.js

使用

復制代碼var jweixin = require('jweixin-module') jweixin.ready(function(){ // TODO });

完整API

　　微信JS-SDK說明文檔

 

接下來是具體的使用方法：

　　前面的一系列操作完成后引入對應的組件，或者引入到main.js里。

1、首先咱們還是得獲取微信分享的四要素：appId, nonceStr, signature, timestamp（具體意思請到微信官網查詢），一般是通過接口，有后端提供。

2、就要通過jweixin的方法進行分享了，具體的代碼：

let { appId, nonceStr, signature, timestamp } = res
        let title = this.shareTitle
        let imgUrl = this.shareImage
        let desc = this.shareSubtitle
        let link = this.shareLink
        jweixin.config({
          // debug: true,
          appId: appId, // 必填，公眾號的唯一標識
          timestamp: timestamp, // 必填，生成簽名的時間戳
          nonceStr: nonceStr, // 必填，生成簽名的隨機串
          signature: signature, // 必填，簽名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
        })
        jweixin.ready(function() {
          jweixin.updateAppMessageShareData({
            title, // 分享標題
            desc, // 分享描述
            link: link,
            imgUrl, // 分享圖標
            success: function() {
              // 設置成功
            }
          })
          jweixin.updateTimelineShareData({
            title, // 分享標題
            link: link,
            imgUrl, // 分享圖標
            success: function() {
              // 設置成功
            }
          })
        })
        jweixin.error(function(res) {
          // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
        })

　　3、title, // 分享標題，desc, // 分享描述，link: //分享鏈接,imgUrl, // 分享圖標  這四要素就是你要顯示在微信卡片上的內容，但是如果分享朋友圈的話是沒有分享描述的。

　　4、jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表，這是必填項，如果只想分享給朋友或者是朋友圈那么可以只寫其中一個，相對應的js也不需要。

 

　　好了，這就是微信發送給朋友和朋友圈的全套js，小伙伴們看懂了嗎，可以評論留言，我會第一時間回復。