近期新上線項(xiàng)目，用到了微信授權(quán)獲取用戶信息和分享，掉坑無數(shù)次，遂寫此篇，為后人指路

項(xiàng)目情況

技術(shù)選型

• 項(xiàng)目語(yǔ)言：HTML、CSS、JavaScript
• 項(xiàng)目框架：Vue.js
• 項(xiàng)目搭建腳手架：vue-cli
• 工程化工具：webpack、Npm
• 源碼管理：gitlab
• 運(yùn)行環(huán)境：WeChatBrowser
• 第三方服務(wù)：微信JS-SDK

項(xiàng)目需求

• 微信授權(quán)獲取用戶信息
• 微信分享統(tǒng)計(jì)
• 提交表單攜帶微信部分信息

以下技術(shù)實(shí)現(xiàn)方式和方案都是基于公眾號(hào)已分配相關(guān)授權(quán)和權(quán)限的情況下，具體授權(quán)和權(quán)限申請(qǐng)請(qǐng)查看微信官方文檔，此處不做贅述

微信授權(quán)(基于公眾號(hào)的授權(quán)方案)

• 目前網(wǎng)上大多分為兩種方式去獲取微信授權(quán)，一種是前端主導(dǎo)的微信授權(quán)，一種是server端主導(dǎo)的微信授權(quán)，兩種方式實(shí)現(xiàn)的結(jié)果是一樣的，具體采用何種方式可以根據(jù)自己項(xiàng)目情況去選擇

授權(quán)方法

• 客戶端中轉(zhuǎn)的授權(quán)方式

• 完全由服務(wù)端主導(dǎo)的授權(quán)方式

授權(quán)流程

• 客戶端中轉(zhuǎn)的授權(quán)方式
  • 微信用戶進(jìn)入頁(yè)面(動(dòng)態(tài)網(wǎng)址需要提前向服務(wù)器端獲取授權(quán)地址)
  • 客戶端攜帶redirect_uri向微信服務(wù)器發(fā)起授權(quán)請(qǐng)求
  • 微信服務(wù)器授權(quán)成功會(huì)攜帶一個(gè)code在url上返回
  • 客戶端隨即攜帶code向服務(wù)端發(fā)送請(qǐng)求
  • 服務(wù)端返回用戶信息

• 完全由服務(wù)端主導(dǎo)的授權(quán)方式

客戶端中轉(zhuǎn)的授權(quán)方式技術(shù)實(shí)現(xiàn)

• 獲取微信授權(quán)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向服務(wù)器端獲取用戶授權(quán)

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存儲(chǔ)在cookie中方便其他頁(yè)面使用//localstorge存儲(chǔ)在微信端存在問題，建議使用cookie存儲(chǔ)//后續(xù)會(huì)寫篇文章專門講解微信端cookie存儲(chǔ)和localstorge存儲(chǔ)setCookie('userInfo', this.userInfo);}else {alert('微信授權(quán)失敗，請(qǐng)重新微信授權(quán)后打開文章', res.code)} }).catch(error => {this.userInfo = ''alert('微信授權(quán)失敗，請(qǐng)重新微信授權(quán)后打開', res.code)console.log('獲取微信授權(quán)出錯(cuò)了', error) })

• 授權(quán)成功，此時(shí)已經(jīng)拿到用戶的微信的授權(quán)信息和個(gè)人信息

微信分享

分享流程

• 獲取微信分享授權(quán)
• 自定義分享標(biāo)題，分享摘要，分享圖片，并寫入微信配置(wx.config)
• 調(diào)用分享接口(wx.ready)
• 分享成功

微信分享技術(shù)實(shí)現(xiàn)

• 微信分享是個(gè)頻繁調(diào)用的方法，實(shí)現(xiàn)過程中可以抽象一下

//調(diào)用服務(wù)器端接口驗(yàn)證授權(quán)信息 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: '分享標(biāo)題',desc: '分享摘要',link: '',imgUrl:'',};var shareAppData = options || {title: '分享標(biāo)題',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('網(wǎng)絡(luò)錯(cuò)誤,請(qǐng)稍后重試!');}}); }

• 調(diào)用分享代碼實(shí)現(xiàn)

let shareWxData = {title: '測(cè)試微信分享標(biāo)題',desc: '測(cè)試微信分享摘要',link: window.location.href,imgUrl: 'xxxxxxx',success: function(res) {// 這是微信分享的回調(diào)// 注意這個(gè)地方并不是用戶分享成功的回調(diào)，而是用戶點(diǎn)擊了分享的回調(diào)，微信現(xiàn)有版本不會(huì)告知開發(fā)者用戶是否分享成功} } $setWxShare(shareWxData)

作者：

輕易科技研發(fā)中心-前端部-張曉斌

總結(jié)

以上是生活随笔為你收集整理的页面错误!请稍后再试_微信内嵌H5页面授权和分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。