微信網(wǎng)頁(yè)開(kāi)發(fā)Vue的使用

2010-07-01 公眾號(hào)開(kāi)發(fā)專(zhuān)題

用戶(hù)在微信客戶(hù)端中訪(fǎng)問(wèn)我們的網(wǎng)頁(yè)，我們所設(shè)置的公眾號(hào)就可以通過(guò)微信網(wǎng)頁(yè)授權(quán)機(jī)制，來(lái)獲取用戶(hù)基本信息，進(jìn)而實(shí)現(xiàn)業(yè)務(wù)邏輯。如果沒(méi)有授權(quán), 就無(wú)法進(jìn)行微信分享等涉及微信 SDK 的操作。

微信網(wǎng)頁(yè)授權(quán)分為兩種 :

1) 靜默授權(quán)

在授權(quán)過(guò)程中, 不會(huì)出現(xiàn)官方的授權(quán)頁(yè)面, 因此用戶(hù)不會(huì)感知到授權(quán)的進(jìn)行, 但這種授權(quán)方式只能拿到用戶(hù)的 OpenID, 要是想要獲取用戶(hù)的詳細(xì)信息, 還需要調(diào)用其他接口。

2) 完整授權(quán)

在授權(quán)過(guò)程中, 會(huì)跳到官方的授權(quán)頁(yè)面, 需要用戶(hù)點(diǎn)擊同意后, 才能獲取到用戶(hù)的詳細(xì)信息并且跳轉(zhuǎn)到我們?cè)O(shè)置的回調(diào)頁(yè)面。

在該項(xiàng)目中, 以上兩種授權(quán)方式均有用到。

授權(quán)流程 :

什么是微信 JS SDK?

微信JS-SDK是微信公眾平臺(tái) 面向網(wǎng)頁(yè)開(kāi)發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開(kāi)發(fā)工具包。通過(guò)使用微信JS-SDK，網(wǎng)頁(yè)開(kāi)發(fā)者可借助微信高效地使用拍照、選圖、語(yǔ)音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶(hù)提供更優(yōu)質(zhì)的網(wǎng)頁(yè)體驗(yàn)。

微信 JS SDK 中的分享

微信分享, 就是在微信中打開(kāi)的網(wǎng)頁(yè)可以通過(guò)微信瀏覽器右上角的按鈕將網(wǎng)頁(yè)分享給其他人. 需要注意的一點(diǎn)是: 不要有誘導(dǎo)分享等違規(guī)行為，對(duì)于誘導(dǎo)分享行為微信將永久回收公眾號(hào)接口權(quán)限!

調(diào)用微信 JS SDK, 需要生成簽名, 簽名算法應(yīng)在后臺(tái)的 service 中實(shí)現(xiàn), 其中簽名需要的參數(shù)為(下面的參數(shù)值為模擬參數(shù)值, 須替換為對(duì)應(yīng)有效的參數(shù)值):

因?yàn)楹灻惴ㄖ行枰?jsapi_ticket 參數(shù)要 call 微信服務(wù)器才能拿到, 所以簽名算法的實(shí)現(xiàn)應(yīng)在 server 端實(shí)現(xiàn). 當(dāng)前端需要使用簽名時(shí), 去調(diào)用后臺(tái) API 來(lái)獲取簽名。

配置 SDK, 具體可以查看官方文檔。

通過(guò)config接口注入權(quán)限驗(yàn)證配置 :

通過(guò)ready接口處理成功驗(yàn)證 :

微信可以分享內(nèi)容到多個(gè)平臺(tái), 如朋友圈, 好友, QQ 等等, 這里以朋友圈為例:

微信分享時(shí)當(dāng)前頁(yè)面的 URL, 如果使用默認(rèn)的分享配置, 會(huì)將此 URL 和頁(yè)面內(nèi)容分享出去,所以我們?cè)O(shè)置了分享的相關(guān)參數(shù), 使微信分享能夠動(dòng)態(tài)地在指定的頁(yè)面分享定制內(nèi)容, 如縮略圖, 頁(yè)面標(biāo)題, 頁(yè)面鏈接等等。

這里我們遇到了一個(gè)問(wèn)題, 其實(shí)應(yīng)該是單頁(yè)應(yīng)用在微信中的 bug :

在 Android 的微信中, 微信通過(guò) window.location.href 拿到的頁(yè)面URL 就是當(dāng)前頁(yè)面的 URL; 而在 iOS 中, 如果不刷新, 微信拿到的頁(yè)面 URL 就是頁(yè)面第一次加載進(jìn)來(lái)時(shí)的 URL, 這樣就導(dǎo)致 iOS 中獲取簽名時(shí),簽名會(huì)與微信驗(yàn)證的簽名不同, 導(dǎo)致報(bào)出 invalid signature 錯(cuò)誤. 所以在iOS 的微信中, 需要將第一次加載頁(yè)面時(shí)的 URL 存到 local storage 中, 在需要調(diào)用后臺(tái) API 拿簽名的時(shí)候?qū)⒅按嫫饋?lái)的 URL 取出作為參數(shù)。

其他 SDK 中的功能, 調(diào)用過(guò)程與分享類(lèi)似, 這里不再列舉。

結(jié)語(yǔ)

微信中的網(wǎng)頁(yè)開(kāi)發(fā), 其實(shí)與一般的手機(jī)端網(wǎng)頁(yè)開(kāi)發(fā)區(qū)別并不是很大, 唯一比較大的區(qū)別就是微信網(wǎng)頁(yè)開(kāi)發(fā)會(huì)使用到微信 JS SDK. 但是 SDK 的運(yùn)用在整個(gè)開(kāi)發(fā)當(dāng)中也占了比較重要的一部分, SDK 中的很多功能很重要, 如果能很好地利用起來(lái)并與業(yè)務(wù)邏輯相結(jié)合, 那么整個(gè)應(yīng)用都會(huì)增色不少。

在整個(gè)開(kāi)發(fā)過(guò)程中, 我們還發(fā)現(xiàn)微信的 JS SDK 雖然已經(jīng)歷經(jīng)了很多個(gè)版本, 但是其中還是有很多的坑存在, 在與其他第三方 JS 模塊整合時(shí)可能會(huì)遇到不少問(wèn)題, 這就需要大家在踩坑中不斷解決問(wèn)題了。

上一篇：如何快速低成本的推廣對(duì)企業(yè)尤為重要返回觀點(diǎn)列表下一篇：優(yōu)秀的sdk助力簡(jiǎn)潔快速微信開(kāi)發(fā)

本文標(biāo)簽：

本文地址： http://www.bmwdream.cn/a/2249.html

相關(guān)專(zhuān)題

電商/商城開(kāi)發(fā)
杭州派迪科技為高端客戶(hù)提供商城開(kāi)發(fā)建設(shè)咨詢(xún)策劃，商城官網(wǎng)設(shè)計(jì)，商城建設(shè)開(kāi)發(fā)服務(wù)，以國(guó)際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端商城開(kāi)發(fā)定制、策劃、設(shè)計(jì)、互動(dòng)與制作
查看詳情
微信公眾號(hào)開(kāi)發(fā)
杭州派迪科技微信公眾號(hào)開(kāi)發(fā)，為全國(guó)企業(yè)提供微信公眾號(hào)商城、H5、功能系統(tǒng)開(kāi)發(fā)，如您需要找專(zhuān)業(yè)的公眾號(hào)開(kāi)發(fā)團(tuán)隊(duì)，委托第三方公司開(kāi)發(fā)公眾號(hào)菜單及網(wǎng)頁(yè)內(nèi)容請(qǐng)聯(lián)系派迪科技
查看詳情
小程序開(kāi)發(fā)
杭州派迪科技專(zhuān)業(yè)小程序開(kāi)發(fā)，為企業(yè)提供微信小程序開(kāi)發(fā),包括小程序商城、小程序應(yīng)用及其他平臺(tái),可根據(jù)客戶(hù)需求進(jìn)行定制開(kāi)發(fā),提供源代碼,可二次開(kāi)發(fā),可申請(qǐng)軟件著作權(quán),歡迎咨詢(xún)。我們以用戶(hù)為中心的程序功能豐富、直觀且性能極佳。我們以清晰的業(yè)務(wù)目標(biāo)視圖制作您的項(xiàng)目目的地，并確保它支持用戶(hù)訪(fǎng)問(wèn)體驗(yàn)?？稍诳缭O(shè)備上產(chǎn)生無(wú)縫的全渠道體驗(yàn)，應(yīng)用程序具有豐富的 UI/UX、規(guī)范化的數(shù)據(jù)庫(kù)和強(qiáng)大的框架，可提供更好性能。
查看詳情
在線(xiàn)教育
查看詳情
APP/應(yīng)用平臺(tái)開(kāi)發(fā)
杭州派迪科技專(zhuān)業(yè)的app開(kāi)發(fā)平臺(tái),9年開(kāi)發(fā)經(jīng)驗(yàn),專(zhuān)注app開(kāi)發(fā)、app軟件開(kāi)發(fā)、手機(jī)app制作為教育行業(yè)、檢修行業(yè)、商城電商系統(tǒng)等APP提供過(guò)全程策劃及開(kāi)發(fā)
查看詳情