要在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>