近期新上線項目，用到了微信授權獲取用戶信息和分享，掉坑無數次，遂寫此篇，為后人指路
項目情況
技術選型
- 項目語言：HTML、CSS、JavaScript
- 項目框架：Vue.js
- 項目搭建腳手架：vue-cli
- 工程化工具：webpack、Npm
- 源碼管理：gitlab
- 運行環境：WeChatBrowser
- 第三方服務：微信JS-SDK
項目需求
- 微信授權獲取用戶信息
- 微信分享統計
- 提交表單攜帶微信部分信息
以下技術實現方式和方案都是基于公眾號已分配相關授權和權限的情況下，具體授權和權限申請請查看微信官方文檔，此處不做贅述
微信授權(基于公眾號的授權方案)
- 目前網上大多分為兩種方式去獲取微信授權，一種是前端主導的微信授權，一種是server端主導的微信授權，兩種方式實現的結果是一樣的，具體采用何種方式可以根據自己項目情況去選擇
授權方法
- 客戶端中轉的授權方式
- 完全由服務端主導的授權方式
授權流程
- 客戶端中轉的授權方式
- 微信用戶進入頁面(動態網址需要提前向服務器端獲取授權地址)
- 客戶端攜帶
redirect_uri向微信服務器發起授權請求 - 微信服務器授權成功會攜帶一個
code在url上返回 - 客戶端隨即攜帶
code向服務端發送請求 - 服務端返回用戶信息
- 完全由服務端主導的授權方式
客戶端中轉的授權方式技術實現
- 獲取微信授權
code
let redirectUri = encodeURI(window.location.href)
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`- 攜帶
code向服務器端獲取用戶授權
let code = getQuery(window.location.href).code
axios.get("/xxx/getWxInfo?code=" + code).then(res => {if (res && res.data && res.data.code == 10000) {this.userInfo = res.data.data//獲取成功后將userInfo存儲在cookie中方便其他頁面使用//localstorge存儲在微信端存在問題，建議使用cookie存儲//后續會寫篇文章專門講解微信端cookie存儲和localstorge存儲setCookie('userInfo', this.userInfo);}else {alert('微信授權失敗，請重新微信授權后打開文章', res.code)}
}).catch(error => {this.userInfo = ''alert('微信授權失敗，請重新微信授權后打開', res.code)console.log('獲取微信授權出錯了', error)
})- 授權成功，此時已經拿到用戶的微信的授權信息和個人信息
微信分享
分享流程
- 獲取微信分享授權
- 自定義分享標題，分享摘要，分享圖片，并寫入微信配置(wx.config)
- 調用分享接口(wx.ready)
- 分享成功
微信分享技術實現
- 微信分享是個頻繁調用的方法，實現過程中可以抽象一下
//調用服務器端接口驗證授權信息
function $setShare(options) {axios.get('/xxx/getWxSignature?url=' + encodeURIComponent(location.href.split('#')[0])).then(function(resp) {if (!resp || !resp.data || resp.data.code != 10000) { return }wx.config({// debug: true,// 開啟debug模式appId: resp.data.data.appid,timestamp: resp.data.data.timestamp,nonceStr: resp.data.data.noncestr,signature: resp.data.data.signature,jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]});var shareTimeLineData = options || {title: '分享標題',desc: '分享摘要',link: '',imgUrl:'',};var shareAppData = options || {title: '分享標題',desc: '分享摘要',link: '',imgUrl:'',};wx.ready(function() {wx.onMenuShareAppMessage(shareAppData);wx.onMenuShareTimeline(shareTimeLineData);});wx.error(function(res){console.log('分享簽證失敗', res)});},function(err){if (err) {alert(err);}else{alert('網絡錯誤,請稍后重試!');}});
}- 調用分享代碼實現
let shareWxData = {title: '測試微信分享標題',desc: '測試微信分享摘要',link: window.location.href,imgUrl: 'xxxxxxx',success: function(res) {// 這是微信分享的回調// 注意這個地方并不是用戶分享成功的回調，而是用戶點擊了分享的回調，微信現有版本不會告知開發者用戶是否分享成功}
}
$setWxShare(shareWxData)作者：
輕易科技研發中心-前端部-張曉斌
