微信H5卡片式分享

一、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

二、在需要调用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>

三、调用后端接口获取签名，时间戳，随机串，公众号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)
    })
  })
}

四、页面通过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接口列表
           });

五、在wx.ready({})里面进行分享设置，标题，描述，图片等

 wx.ready(function () {
        wx.updateAppMessageShareData({
        title: "朋友分享给你的商品链接来啦",   //标题
        desc: that.commodityDetail.commodityName,   //描述
        link: window.location.href,   //链接
        imgUrl: that.commodityDetail.imgShare,   //图片地址
        success: function () {
        //里面是分享成功后得回调
        
        },
                });
        });

六、注意

当我们写单页应用，vue的路由采用history模式时，在ios系统里，链接并不会改变，永远都是第一次进入项目的地址，所以在你需要分享的页面需要重新组装你传给后端的参数，可以在路由守卫里获取当前路径。

  const authUrl = `${window.location.origin}${to.fullPath}`