Vue中微信分享JS-SDK

在微信公众平台设置安全域名

在微信公众平台设置的安全域名必须与JS-SDK中获取的URl分享时完全一致 , 包括安全协议部分( http:// 或者 https:// ) , 若设置安全域名不包含安全协议部分 , 在获取URL做签名验证时则要去掉URL这部分

安装微信JS-SDK依赖

npm install weixin-js-sdk

修改Vue的router

去掉Vue地址中默认携带的 # , 否则Vue中微信分享JS-SDK由于vue连接中携带的 # 会导致会出现签名不一致分享报错

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index' // 首页
Vue.use(Router)
const router = new Router({
    routes: [
        {
            // 首页
            path: '/index',
            name: 'index',
            component: index
        }
    ],
    mode: 'history' // 设置router模式, 去除链接地址中携带的#
})

// 全局路由守卫 ,拦截未匹配路由
router.beforeEach((to, from, next) => {
    if (to.matched.length === 0) {
        // 如果未匹配到路由 ,跳转到首页
        console.log('路由未匹配')
        next('/index')
    } else {
        // 如果匹配到正确跳转
        next()
    }
})

export default router

配置微信API

使用axios进行服务端交互 , 将当前URL处理过后传输给服务端 

import wx from 'weixin-js-sdk'
import publicApi from "./publicApi"; // 引入自定义的axios接口封装

function wxShareApi(url, shareUrl, shareTitle, shareDesc) {
    console.log('url', url)
    // 从服务端获取需要的配置信息
    publicApi.getShareInfor({currentUrl: url}).then(res => {
        if (res.data.code == '200') {
            let nonceStr = res.data.content.nonceStr
            let signature = res.data.content.signature
            let timestamp = res.data.content.timestamp
            // 配置微信api
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: process.env.WX_CODE, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr,   // 必填，生成签名的随机串
                signature: signature, // 必填，签名，见附录1
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
            });
            wx.ready(function () {
                wx.updateAppMessageShareData({
                    title: shareTitle, // 分享标题
                    desc: shareDesc, // 分享描述
                    link: process.env.AUTH_URL + shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https://yujin-health-prod.oss-cn-beijing.aliyuncs.com/company/yujin.jpeg', // 分享图标
                    success: function () {
                        // 设置成功
                    }
                });
                wx.updateTimelineShareData({
                    title: shareTitle, // 分享标题
                    link: process.env.AUTH_URL + shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https://yujin-health-prod.oss-cn-beijing.aliyuncs.com/company/yujin.jpeg', // 分享图标
                    success: function () {
                        // 设置成功
                    }
                })
            })
        }
    })
}

export default {
    wxShare: wxShareApi
}

在组件内调用配置文件 , 并传递分享的信息以及处理过的URL

<template>
  <div id="app">
      <router-view/>
  </div>
</template>

<script>
import wxShareApi from "../../api/wxShareApi"; // 引入封装的分享方法
export default {
  name: 'App',
  created() {
     this.shareInfor()    
  },
  methods: {
     shareInfor() {
       let url = window.location.href.split("#")[0]
       let shareUrl = '分享链接'
       let shareTitle = '分享标题'
       let shareDesc = '分享内容'
       wxShareApi.wxShare(url, shareUrl, shareTitle, shareDesc)
     },
  }
}
</script>
<style></style>