前期準(zhǔn)備

接入微信授權(quán)

分靜默授權(quán)和非靜默授權(quán)兩種

靜默授權(quán)： scope=snsapi_base，沒有彈窗，只能獲取用戶的openId。

非靜默授權(quán)： scope=snsapi_userinfo，有彈框彈出需要用戶手動(dòng)點(diǎn)擊確認(rèn)授權(quán)?？梢垣@取openId，用戶的頭像、昵稱等

授權(quán)步驟如下：

判斷URL有沒有code

有是已經(jīng)授權(quán)，無(wú)是未授權(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)的地址，微信會(huì)幫我們跳轉(zhuǎn)到該鏈接，并且通過(guò)？的形式拼接code

本地開發(fā)測(cè)試，在測(cè)試公眾號(hào)的網(wǎng)頁(yè)授權(quán)回調(diào)配置 當(dāng)前電腦的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

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

1、后端需要實(shí)現(xiàn)對(duì)簽名的獲取

2、前端在頁(yè)面初始化完畢的時(shí)候加載微信sdk的配置就行了

// 請(qǐng)求后端拿到簽名

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ǎn)擊分享按鈕前就先調(diào)用

wx.updateAppMessageShareData({

title: shareInfo.data.data.title, // 分享標(biāo)題

desc: shareInfo.data.data.desc, // 分享描述

link: DefaultConfig.shareLink, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致

imgUrl: shareInfo.data.data.imageUrl, // 分享圖標(biāo)

success: function () {

}

})

wx.updateTimelineShareData({

title: shareInfo.data.data.title,

link: DefaultConfig.shareLink,

imgUrl: shareInfo.data.data.imageUrl,

success: function () {

}

})

});

在測(cè)試公眾號(hào)的網(wǎng)頁(yè)的js接口安全域名配置如下

域名.jpg

線上配置 貼圖

online.jpg

跳轉(zhuǎn)到小程序

頁(yè)面可投放到小程序(具體咋弄沒研究過(guò))

項(xiàng)目有個(gè)購(gòu)買鏈接，如果是微信分享打開就跳轉(zhuǎn)到H5購(gòu)買頁(yè)，小程序打開就直接跳轉(zhuǎn)小程序購(gòu)買頁(yè)

// 小程序環(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()) {

// 具體地址和鏈接形式，找負(fù)責(zé)小程序的相關(guān)同志去要

let url = `/main/webview/index?link=${encodeURIComponent(購(gòu)買鏈接)}`

// 跳轉(zhuǎn)主要是這個(gè)api

wx.miniProgram.navigateTo({url})

} else {

window.location.href = 購(gòu)買鏈接

}

錯(cuò)誤處理

63002,invalid signature

先把后端返回來(lái)的簽名復(fù)制到微信 JS 接口簽名校驗(yàn)工具，看看后端生成的簽名是否正確

仔細(xì)檢查一下js接口安全域名是不是配對(duì)了

比如，不需要帶http https 、 測(cè)試開發(fā)賬號(hào)配置沒有加自己的端口號(hào)等錯(cuò)誤

the permission value is offline verifying

表現(xiàn)是分享的鏈接 圖片都沒起效果

官網(wǎng)上說(shuō) access_token的有效期目前為2個(gè)小時(shí)，需定時(shí)刷新， 有可能是后端忘了刷新導(dǎo)致token失效

或者 后端提早刷新了導(dǎo)致前一個(gè)分享出錯(cuò)(等2個(gè)小時(shí)就好了....)

總結(jié)

以上是生活随笔為你收集整理的微信首页登录html页面,H5页面接入微信授权登录和分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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