微信提供給開發(fā)者的方式也在發(fā)生全面的改變你知道幾點(diǎn)

2010-07-12 公眾號(hào)開發(fā)專題

微信目前用戶群體非常龐大，微信推出公眾號(hào)以后，火爆程度大家都看得到，也同樣推動(dòng)著 Html 5 的高速發(fā)展，隨著公眾號(hào)業(yè)務(wù)的需求越來越復(fù)雜，應(yīng)用號(hào)現(xiàn)在的到來也是恰到好處。

我發(fā)現(xiàn)，微信提供給開發(fā)者的方式也在發(fā)生全面的改變：從操作 DOM 轉(zhuǎn)為操作數(shù)據(jù)，基于微信提供的一個(gè)過橋工具實(shí)現(xiàn)很多 Html 5 在公眾號(hào)很難實(shí)現(xiàn)的功能，有點(diǎn)類似于 hybrid 開發(fā)，不同于 hybrid 開發(fā)的方式是：微信開放的接口更為嚴(yán)謹(jǐn)，結(jié)構(gòu)必須采用他提供給的組件，外部的框架和插件都不能在這里使用上，讓開發(fā)者完全脫離操作 DOM，開發(fā)思想轉(zhuǎn)變很大。

工欲善其事，必先利其器。理解它的核心功能非常重要，先了解它的整個(gè)運(yùn)作流程。

路由：

路由在項(xiàng)目開發(fā)中一直是個(gè)核心點(diǎn)，在這里其實(shí)微信對路由的介紹很少，可見微信在路由方面經(jīng)過很好的封裝，也提供三個(gè)跳轉(zhuǎn)方法。

wx.navigateTo(OBJECT)：保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用wx.navigateBack可以返回到原頁面。

wx.redirectTo(OBJECT)：關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。

wx.navigateBack()：關(guān)閉當(dāng)前頁面，回退前一頁面。

這三個(gè)基本上使用足夠，在路由方面微信封裝的很好，開發(fā)者根本不用去配置路由，往往很多框架在路由方面配置很繁瑣。

Vue中路由使用hash模式，開發(fā)微信H5頁面分享時(shí)在安卓上設(shè)置分享成功，但是ios的分享異常

問題詳情描述：

ios當(dāng)前頁面分享給好友，點(diǎn)擊進(jìn)來是正常，如果二次分享，則跳轉(zhuǎn)到首頁；使用vue router跳轉(zhuǎn)到第二個(gè)頁面后在分享時(shí)，分享設(shè)置失敗；以上安卓分享都是正常

出現(xiàn)原因分析：jssdk是后端進(jìn)行簽署，前端校驗(yàn)，但是有時(shí)跨域，ios是分享以后會(huì)自動(dòng)帶上 from=singlemessage&isappinstalled=0 以及其他參數(shù)，分享朋友圈參數(shù)還不一樣，貌似系統(tǒng)不一樣參數(shù)也不一樣，但是每次獲取url并不能獲取后面這些參數(shù)

解決辦法：

(1)可以使用改頁面this.$router.push跳轉(zhuǎn)，為window.location.href去跳轉(zhuǎn)，而不使用路由跳轉(zhuǎn)，這樣可以使地址欄的地址與當(dāng)前頁的地址一樣，可以分享成功（適合分享的頁面不多的情況下，作為一個(gè)單單頁運(yùn)用，這樣刷新頁面跳轉(zhuǎn)，還是..）

（2）把入口地址保存在本地，等需要獲取簽名的時(shí)候取出來，注意：sessionStorage.setItem(‘href’,href); 只在剛進(jìn)入單應(yīng)用的時(shí)候保存！【該方法未驗(yàn)證】

題外話：

如果能用小程序?qū)懙捻撁?，盡量上小程序吧，H5開發(fā)在微信開發(fā)者工具里看頁面效果可能看不出問題，因?yàn)椴荒軉酒疖涙I盤。避免頻繁線上發(fā)布，可以用花生殼或者idcfengye，做內(nèi)網(wǎng)穿透，搭建一個(gè)可以通過域名訪問的開發(fā)環(huán)境的h5頁面，在手機(jī)上看看效果，對了微信內(nèi)置瀏覽器緩存機(jī)制。會(huì)導(dǎo)致剛提交的代碼（特別是js）效果要半個(gè)小時(shí)左右才生效。

最后：

微信H5頁面其實(shí)很多知識(shí)，登陸授權(quán)，jssdk授權(quán)，這里就只做了分享，當(dāng)然還有上傳圖片、微信支付等功能，都可能會(huì)遇到坑，以上幾個(gè)坑也是比較常遇到的，如果有更好的解決方案的話，歡迎在留言區(qū)分享。

上一篇：遇到坑了不要慌，先帶你跳幾個(gè) 返回觀點(diǎn)列表下一篇：微信web開發(fā)者工具你知道多少

本文標(biāo)簽：

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

相關(guān)專題

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