要在vue里使用微信分享需要前后端一起配合来做，大致分为以下几步，在开发之前需要在登录公众号做一些绑定域名等一系列的操作，这个是大前提我会按照
(1)公众号配置
(2)后端准备工作及开发（本人是前端开发，只简单介绍后端与微信的大致接入过程以及在与后端交互的时候出现的问题，代码就不细说了）
(3)前端准备工作及开发
这个顺序来进行书写，免得看上去很乱，因为在配置完公众号后，前端的很多工作需要后端跟微信请求完获取到参数提供给前端，前端才能开始做，话不多说，开整
一、公众号配置
1.登录公众号进行域名绑定
<a href="https://mp.weixin.qq.com/">https://mp.weixin.qq.com/</a>
进入后台绑定域名，这个域名必须是你在微信打开的链接的host，这是必须的
如图配置：
二、后端准备工作
下载微信官方的代码示例，里面有具体的对接代码
链接： <a href="http://demo.open.weixin.qq.com/jssdk/sample.zip">http://demo.open.weixin.qq.com/jssdk/sample.zip</a>
微信官方提醒：链接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制
步骤：
(1) 写一个接收前端传递url参数的方法(这个url就是前端需要分享的url)
(2) 按照官方代码示例进行签名，<strong style="color:red">注意后台签名时候这里参数名必须全部小写，且必须有序</strong>，当时就是因为粗心这里有一个参数nonce_str里面的S大写了，一直报错</br>
我跟后端交互大概就这两步，如果不全后面我再补充
三、前端准备工作（使用的history模式）
1.引入微信官方的jssdk
两种方式：
(1) 在需要调用JS接口的页面引入如下JS文件,(支持https)：
http://res.wx.qq.com/open/js/jweixin-1.4.0.js</br>
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：
http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）
(2)npm install --save-dev weixin-js-sdk</li>
2.创建一个公共的js，用来初始化微信分享的一些操作，我的js名字为wxapi.js，按照你们习惯自己起名字
import wx from 'weixin-js-sdk'
//这个是我自己封装的axios 为了向后端传递当前路由，获取对应的config字段，可替换成你网络请求的方法
```
import {getBaseUrl} from './api'
const wxApi = {
/**
* [wxRegister 微信Api初始化]
* @param {Function} callback [ready回调函数]
*/
wxRegister (url,sys) {
if(sys == "ios"){
url = window.entryUrl;
}
getBaseUrl('/wechatshare?url='+url).then(res=>{
wx.config({
//在测试的时候一定要开启这个 debug: true 只要有报错就一定会弹出来，
debug: false, // 开启调试模式
appId: res.appId, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
jsApiList: [
'checkJsApi',//必填，检测api是否有权限
//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
'updateAppMessageShareData',
//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
'updateTimelineShareData'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
})
}),
wx.ready(() => {
//一定要保证分享的url和传递给后端url是一致的，如果路由发生了变化一定要获取当前的路由
let links = location.href.split('#')[0];
let optionApp = {
title: '***', // 分享标题, 请自行替换
desc:'***',
link: links,
imgUrl: 'logo.png', // 分享图标, 请自行替换，需要绝对路径
}
let optionTimeline = {
title: '***', // 分享标题, 请自行替换
link: links, // 分享链接，根据自身项目决定是否需要split
imgUrl: 'logo.png', // 分享图标, 请自行替换，需要绝对路径
desc:'***'
}
// 微信分享给朋友
wx.updateAppMessageShareData({
title: optionApp.title, // 分享标题
link: optionApp.link, // 分享链接
imgUrl: optionApp.imgUrl, // 分享图标
desc: optionApp.desc, // 分享图标
success () {
},
cancel () {
// 用户取消分享后执行的回调函数
},fail(){
// alert("分享失败！"+JSON.stringify(s));
}
}),
// 微信分享到朋友圈
wx.updateTimelineShareData({
title: optionTimeline.title, // 分享标题
link: optionTimeline.link, // 分享链接
imgUrl: optionTimeline.imgUrl, // 分享图标
desc:optionTimeline.desc,
success () {
// 用户成功分享后执行的回调函数
},
cancel () {
// 用户取消分享后执行的回调函数
},fail(){
// alert(JSON.stringify(msg));
}
})
})
wx.error(function(){
// alert(JSON.stringify(e)+'--------error')
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
},
}
export default wxApi
```
<li>3.在需要分享的界面引入</li></br>
```
import wxapi from '../request/wxapi'
//在method定义一个方法里进行验证，在mounted里面调用
methods: {
//分享前的验证签名，因为Android和IOS在进入微信后路由变化的逻辑是不同的，所以要判断一下，IOS只能分享第一次进来时候的路由地址（IOS待验证，后面来填坑）
checkSign(){
// window.__wxjs_is_wkwebview为true 时 为 IOS 设备 false时 为 安卓 设备
if (window.__wxjs_is_wkwebview) { // IOS
if (window.entryUrl == '' || window.entryUrl == undefined) {
var url = location.href.split('#')[0]
window.entryUrl = url // 将后面的参数去除
}
wxapi.wxRegister(location.href.split('#')[0],'ios');
}else { // 安卓
setTimeout(function () {
wxapi.wxRegister(location.href.split('#')[0],'android');
}, 500);
}
},
},
mounted() {
//据说Android手机端会有延时，就加了500的延时，看情况你们加不加都可以
setTimeout(()=>{
this.checkSign();
},500)
}
```
其实到这里基本就完事儿了，可以根据微信提供的debug来进行跟踪
我出现过两种错误</br>
(1) invaild singatrue，这个错误是由于后端签名的时候把noncestr 里面的S写成大写了，一般invaild singatrue错误要不就是后端签名错误，要不就是你给后端的url与你当前的路由不匹配</br>
使用<a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html">微信自带的调试工</a>具可以很好的解决url与你当前的路由不匹配的问题</br>
签名错误可以使用微信提供的<a href="https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign">在线签名工具</a>生成看跟后端返回的是否匹配</br>
(2) config:ok 但是无法调起微信的分享界面，其实最终提示config:ok的时候就说明你已经分享成功了，如果提示config:ok的话，你认为还没调起微信的分享界面的时候看下下面的话，希望对你有所帮助！
<li>
<strong style="color:red">另，在开发过程中一直以为是自己加一个按钮来调起微信的分享，其实上面做的这么多操作最终只是重写微信webview里右上角三个点，自己重写的不能调起微信的分享界面，谨记！<strong></li></br>
</ul>