前期準備
- 微信給開發(fā)者提供的測試賬號平臺
https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index - 微信 JS 接口簽名校驗工具
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign - 微信開發(fā)者工具
接入微信授權(quán)
- 分
靜默授權(quán)和非靜默授權(quán)兩種-
靜默授權(quán)：scope=snsapi_base私恬，沒有彈窗，只能獲取用戶的openId谒麦。 -
非靜默授權(quán)：scope=snsapi_userinfo峻仇，有彈框彈出需要用戶手動點擊確認授權(quán)公黑。可以獲取openId，用戶的頭像凡蚜、昵稱等
-
授權(quán)步驟如下：
- 判斷URL有沒有code
- 有是已經(jīng)授權(quán)人断，無是未授權(quán)
- 未授權(quán)，跳轉(zhuǎn)微信授權(quán)鏈接 這里采用靜默授權(quán)
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${DefaultConfig.appId}&redirect_uri=${url}&response_type=code&scope=${DefaultConfig.loginWay}&state=#wechat_redirect注意： redirect_uri是授權(quán)成功朝蜘，跳轉(zhuǎn)的地址恶迈，微信會幫我們跳轉(zhuǎn)到該鏈接，并且通過谱醇？的形式拼接code
- 本地開發(fā)測試暇仲，在測試公眾號的網(wǎng)頁授權(quán)回調(diào)配置 當前電腦的IP就行了
function login() {
let url = encodeURIComponent(DefaultConfig.redirectUriWx); // 注意一定要encodeURIComponent
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${DefaultConfig.appId}&redirect_uri=${url}&response_type=code&scope=${DefaultConfig.loginWay}&state=#wechat_redirect`
}
跳轉(zhuǎn)url.jpg
實現(xiàn)微信分享
1、后端需要實現(xiàn)對簽名的獲取
2副渴、前端在頁面初始化完畢的時候加載微信sdk的配置就行了
// 請求后端拿到簽名
let wxConfig = await getWXSignature(encodeURIComponent(window.location.href.split('#')[0]))
let shareInfo = await getShareInfo()
// 更新配置
wx.config({
debug: false,
appId: DefaultConfig.appId,
timestamp: wxConfig.data.data.timestamp,
nonceStr: wxConfig.data.data.noncestr,
signature: wxConfig.data.data.signature,
jsApiList: [
'updateAppMessageShareData', // 分享給朋友
'updateTimelineShareData' // 朋友圈
]
});
wx.error(() => {
// console.log(66644)
})
wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調(diào)用
wx.updateAppMessageShareData({
title: shareInfo.data.data.title, // 分享標題
desc: shareInfo.data.data.desc, // 分享描述
link: DefaultConfig.shareLink, // 分享鏈接奈附，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致
imgUrl: shareInfo.data.data.imageUrl, // 分享圖標
success: function () {
}
})
wx.updateTimelineShareData({
title: shareInfo.data.data.title,
link: DefaultConfig.shareLink,
imgUrl: shareInfo.data.data.imageUrl,
success: function () {
}
})
});
-
在測試公眾號的網(wǎng)頁的js接口安全域名配置如下
域名.jpg
線上配置 貼圖
online.jpg
跳轉(zhuǎn)到小程序
- 頁面可投放到小程序（具體咋弄沒研究過）
- 項目有個購買鏈接，如果是微信分享打開就跳轉(zhuǎn)到H5購買頁佳晶，小程序打開就直接跳轉(zhuǎn)小程序購買頁
// 小程序環(huán)境
export function isMiniProgram() {
let win: any = window
return (navigator.userAgent.match(/micromessenger/i) && navigator.userAgent.match(/miniprogram/i)) || win.__wxjs_environment === 'miniprogram';
}
// iPhone環(huán)境
export function isIPhone() {
let userAgent = window.navigator.userAgent
return userAgent.includes('iPhone') && /MicroMessenger/i.test(userAgent)
}
// ==========================================
// 判斷是否是小程序環(huán)境
if (isMiniProgram()) {
// 具體地址和鏈接形式桅狠，找負責(zé)小程序的相關(guān)同志去要
let url = `/main/webview/index?link=${encodeURIComponent(購買鏈接)}`
// 跳轉(zhuǎn)主要是這個api
wx.miniProgram.navigateTo({url})
} else {
window.location.href = 購買鏈接
}
錯誤處理
63002,invalid signature
- 先把后端返回來的簽名復(fù)制到
微信 JS 接口簽名校驗工具，看看后端生成的簽名是否正確 - 仔細檢查一下js接口安全域名是不是配對了
- 比如轿秧，不需要帶
httphttps中跌、 測試開發(fā)賬號配置沒有加自己的端口號等錯誤
the permission value is offline verifying
- 表現(xiàn)是分享的鏈接 圖片都沒起效果
- 官網(wǎng)上說 access_token的有效期目前為2個小時，需定時刷新菇篡， 有可能是后端忘了刷新導(dǎo)致token失效
- 或者 后端提早刷新了導(dǎo)致前一個分享出錯（等2個小時就好了....）
