微信H5卡片式分享

1、綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」

2、在須要調用JS接口的頁面引入以下JS文件

<script src='http://res2.wx.qq.com/open/js/jweixin-1.6.0.js'></script>複製代碼

或者

<script src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>複製代碼

3、調用後端接口獲取簽名，時間戳，隨機串，公衆號id

import { get } from '@/JS/ajax'
export function getConfig () {
  return new Promise(function (resolve, reject) {
    get('/dt/getWeChatConfig', { //url是接口參數
      url: window.__wxjs_is_wkwebview ? window.entryUrl : window.location.href
    }).then(res => {
      resolve(res)
    },
    err => {
      reject(err)
    })
  })
}複製代碼

4、頁面經過wx.config({})注入配置信息，進行權限驗證

     wx.config({
            debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
            appId: res.data.appId, // 必填，公衆號的惟一標識
            timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
            nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
            signature: res.data.signature, // 必填，簽名
            jsApiList: [   //須要使用的JS接口列表
               "updateAppMessageShareData", //分享給好友
               "updateTimelineShareData",   //分享到朋友圈
               "onMenuShareQZone",   //分享到qq空間
               "onMenuShareWeibo",   //分享到微博
                ], // 必填，須要使用的JS接口列表
           });複製代碼

5、在wx.ready({})裏面進行分享設置，標題，描述，圖片等

 wx.ready(function () {
        wx.updateAppMessageShareData({
        title: "朋友分享給你的商品連接來啦",   //標題
        desc: that.commodityDetail.commodityName,   //描述
        link: window.location.href,   //連接
        imgUrl: that.commodityDetail.imgShare,   //圖片地址
        success: function () {
        //裏面是分享成功後得回調
        
        },
                });
        });複製代碼

6、注意

當咱們寫單頁應用，vue的路由採用history模式時，在ios系統裏，連接並不會改變，永遠都是第一次進入項目的地址，因此在你須要分享的頁面須要從新組裝你傳給後端的參數，能夠在路由守衛裏獲取當前路徑。

  const authUrl = `${window.location.origin}${to.fullPath}`複製代碼