微信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}`复制代码