需求：微信扫二维码跳转到设定的链接，然后分享到微信朋友，或者朋友圈, 配置分享界面样式
首先，生成跳转链接的二维码
https://segmentfault.com/a/11...（这里具体写了怎么生成二维码）
下来我们具体讨论微信分享的具体配置，和遇到的问题。
1、配置微信分享界面
我们系统中使用的路由跳转，都做了权限控制，配置路由的时候如果没有登录就会跳转到登录界面，或者请求接口的时候后台做了token验证，这些都会影响分享界面，所以配置分享界面路由是和login同级别的（即外层），请求接口的时候我们也配置一下微信分享路由不需要验证token。我自己的配置是这样的
router/index.js
...
{
path: '/wechat-share',
name: 'wechat-share',
component: WechatShare
},
{
path: '/login',
name: 'login',
component: Login
}
...main.js
router.beforeEach((to, from, next) => {
// 如果没有session信息不能跳转
if (localStorage.getItem('userInfo_admin')) {
next()
} else {
// 如果是登录界面，或者微信分享界面都不需要验证session
if (to.path === '/login' || to.path === '/wechat-share') {
next()
} else {
next({
path: '/login'
})
}
}请求接口文件，封装http.js
// 请求拦截器
axios.interceptors.request.use(config => {
// 如果不是登录接口，或者微信分享接口，都需要验证token
if (window.location.hash.indexOf('login') === -1 && window.location.hash.indexOf('wechat-share') === -1) {
const token = store.state.userInfo.Authorization
token && (config.headers.Authorization = token)
}
return config
}2、通过接口获取微信配置信息（和后台沟通）
通常接口只需要传递转码的url就可以了，返回我们需要的配置信息
axios.get('接口地址', {params: {url: encodeURIComponent(window.location.href.split('#')[0])}}).then(res => {}).catch(error => {})注意：这里的url通过window.location.href.split('#')获取‘#’号前面的内容，然后进行编码传递给后台获取内容。这里只是实力，实际项目中可以把获取信息写在vuex actions中
3、微信分享配置
// 安装wx sdk
npm install weixin-js-sdk --save
// 组件中引入
import wx from 'weixin-js-sdk'
// 在mounted中配置
// appId,timestamp, nonceStr, singature都可以在接口中得到。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 必填，需要使用的JS接口列表
})
wx.ready(function() { //通过ready接口处理成功验证
// config信息验证成功后会执行ready方法
wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用
title: '这里是标题', // 分享标题
desc: 'This is a test!', // 分享描述
link: '链接', // 分享链接
imgUrl: '图片', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
})
wx.onMenuShareTimeline({ //分享朋友圈
title: '标题', // 分享标题
link: '链接',
imgUrl: '图片', // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
})
})
wx.error(function(res){//通过error接口处理失败验证
// config信息验证失败会执行error函数
})我的配置代码，以及遇到的坑
data () {
return {
config: {
url: encodeURIComponent(this.$store.getters.base_url),
title: '项目名称',
desc: '项目描述',
img: 'https://pic4.zhimg.com/80/v2-9e7354788266d6ceae5a0839e24d9c1a_hd.jpg'
},
projectInfo: ''
}
}
...
// 获取微信配置信息，通过后台接口。
await this.$store.dispatch('getWechatConfigAction', encodeURIComponent(window.location.href.split('#')[0]))
// alert(this.projectInfo)
// // 接口获取界面内容
// alert(JSON.stringify(this.config, null, 4))
// alert(JSON.stringify(this.$store.state.wxConfig, null, 4))
wx.config({
debug: true,
appId: this.$store.state.wxConfig.appId,
timestamp: this.$store.state.wxConfig.timestamp,
nonceStr: this.$store.state.wxConfig.nonceStr,
signature: this.$store.state.wxConfig.signature,
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
})
wx.ready(() => {
wx.onMenuShareAppMessage({
title: this.config.title, // 分享标题
desc: this.config.content, // 分享描述
link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享链接
imgUrl: this.config.imgUrl, // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
// _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
this.$message({
type: 'success',
message: '分享成功'
})
// config.success()
},
cancel: function () {
// 用户取消分享后执行的回调函数
// _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
this.$message({
type: 'success',
message: '取消分享'
})
// config.cancel()
},
fail: function (res) {
this.$message({
type: 'error',
message: '分享失败'
})
// config.fail()
}
})
wx.onMenuShareTimeline({
title: this.config.title, // 分享标题
desc: this.config.content, // 分享描述
link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享链接
imgUrl: this.config.imgUrl, // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
// _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
this.$message({
type: 'success',
message: '分享成功'
})
// config.success()
},
cancel: function () {
// 用户取消分享后执行的回调函数
// _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
this.$message({
type: 'success',
message: '取消分享'
})
// config.cancel()
},
fail: function (res) {
this.$message({
type: 'error',
message: '分享失败'
})
// config.fail()
}
})
})
wx.error(() => {
console.log('请求分享数据失败')
// config.fail()
})问题1：
// 配置完成以后弹出如下信息
{errorMsg: config: invalid signature}
// 这是因为请求配置信息的接口参数url有误，可以通过encodeURIComponent(window.location.href.split('#')[0])来获取问题2：
// 配置完成以后弹出如下信息
{errorMsg: config: invalid url domain}
// 这是因为微信公众号设置中没有设置好，可以根据下图设置
完整代码
// 分享界面的代码
<!--
* @Author: 张旭超
* @Date: 2020-01-08 13:14:14
* @LastEditTime : 2020-01-10 17:09:56
* @LastEditors : Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /src/components/wechat-share/WechatShare.vue
-->
<template>
<div>
<div>微信分享</div>
<div>微信扫码分享</div>
<div>{{projectInfo}}</div>
{{this.$store.state.wxConfig.appId}}
{{this.$store.state.wxConfig.timestamp}}
{{this.$store.state.wxConfig.nonceStr}}
{{this.$store.state.wxConfig.signature}}
</div>
</template>
<script>
import wx from 'weixin-js-sdk'
export default {
data () {
return {
config: {
url: encodeURIComponent(this.$store.getters.base_url),
title: '项目名称',
desc: '项目描述',
img: 'https://pic4.zhimg.com/80/v2-9e7354788266d6ceae5a0839e24d9c1a_hd.jpg'
}
}
},
async mounted () {
// 获取微信配置信息，通过后台接口。
await this.$store.dispatch('getWechatConfigAction', encodeURIComponent(window.location.href.split('#')[0]))
// alert(this.projectInfo)
// // 接口获取界面内容
// alert(JSON.stringify(this.config, null, 4))
// alert(JSON.stringify(this.$store.state.wxConfig, null, 4))
wx.config({
debug: true,
appId: this.$store.state.wxConfig.appId,
timestamp: this.$store.state.wxConfig.timestamp,
nonceStr: this.$store.state.wxConfig.nonceStr,
signature: this.$store.state.wxConfig.signature,
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
})
wx.ready(() => {
wx.onMenuShareAppMessage({
title: this.config.title, // 分享标题
desc: this.config.content, // 分享描述
link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享链接
imgUrl: this.config.imgUrl, // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
// _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
this.$message({
type: 'success',
message: '分享成功'
})
// config.success()
},
cancel: function () {
// 用户取消分享后执行的回调函数
// _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
this.$message({
type: 'success',
message: '取消分享'
})
// config.cancel()
},
fail: function (res) {
this.$message({
type: 'error',
message: '分享失败'
})
// config.fail()
}
})
wx.onMenuShareTimeline({
title: this.config.title, // 分享标题
desc: this.config.content, // 分享描述
link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享链接
imgUrl: this.config.imgUrl, // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
// _hmt.push(['_trackEvent', config.title, "分享给好友", "分享成功"]);
this.$message({
type: 'success',
message: '分享成功'
})
// config.success()
},
cancel: function () {
// 用户取消分享后执行的回调函数
// _hmt.push(['_trackEvent', config.title, "分享给好友", "取消分享"]);
this.$message({
type: 'success',
message: '取消分享'
})
// config.cancel()
},
fail: function (res) {
this.$message({
type: 'error',
message: '分享失败'
})
// config.fail()
}
})
})
wx.error(() => {
console.log('请求分享数据失败')
// config.fail()
})
}
}
</script>
代码中获取配置信息，封装在了vuex的actions中，获取的配置信息存储在 $store.stat.wxConfig中，主要是传递参数url的配置。
