微信小程序webview 腳手架使用詳解
項(xiàng)目地址
https://github.com/fangkyi03/wechat-webview-template
項(xiàng)目介紹
1.wechat
使用taro創(chuàng)建的初始化項(xiàng)目
2.react-ssr-h5
使用nextjs創(chuàng)建的項(xiàng)目 已經(jīng)做好完整的兼容處理 使用vw vh為單位
簡(jiǎn)單介紹
因小程序?qū)τ趙ebview通信做出的限制 從webview發(fā)起的postMessage并不會(huì)實(shí)時(shí)的被小程序端接受到
詳情可見(jiàn) :https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
登錄 分享 支付 視頻上傳 這幾塊是沒(méi)法使用webview來(lái)實(shí)現(xiàn)的 必須用小程序原生來(lái)寫(xiě)
所以如果想使用小程序內(nèi)嵌webview的朋友 這里要提個(gè)醒
webview跳轉(zhuǎn)小程序
webview - 通過(guò)jumpRouter - 跳轉(zhuǎn)到小程序的other頁(yè)面
實(shí)際轉(zhuǎn)換:
Taro.navigateTo({ url: ../../pages/otherView/index?viewName=${routerName}& + createRouterParams(routerParams) })
通過(guò)這種方式 就會(huì)在小程序原生router中push一個(gè)路由 從而達(dá)到跟小程序打開(kāi)原生頁(yè)面一致的效果
在webview中發(fā)起的任何一個(gè)postMessage 也都會(huì)在這個(gè)otherView中進(jìn)行統(tǒng)一的處理
提醒
下面使用到的apitool都是對(duì)應(yīng)項(xiàng)目里面的 而不是共用一個(gè)
wechat api
小程序項(xiàng)目中跳轉(zhuǎn)頁(yè)面并傳參 jumpNativeRouter 使用方式: apitool.jumpNativeRouter(routerName,params : object)
替換小程序網(wǎng)頁(yè)頁(yè)面 replaceRouter 使用方式: apitool.replaceRouter(routerName,params : object)
獲取臨時(shí)緩存區(qū)數(shù)據(jù) getTemp 使用方式: Object apitool.getTemp() 備注: 請(qǐng)見(jiàn)緩存區(qū)說(shuō)明
銷(xiāo)毀臨時(shí)緩存區(qū) clearTemp 使用方式: apitool.clearTemp() 備注: 請(qǐng)見(jiàn)緩存區(qū)說(shuō)明
react-ssr-h5 api
獲取小程序分享以后的路徑 轉(zhuǎn)換成obj的格式 getSharePath 使用方式: Object apitool.getSharePath(this)
獲取路由參數(shù) getRouterParams 使用方式: Object apitool.getRouterParams(this)
獲取轉(zhuǎn)換以后的尺寸 getSize 使用方式: String apitool.getSize(size) 備注: 因?yàn)閟sr項(xiàng)目里面使用了postcss-px-to-viewport的關(guān)系在less里面寫(xiě)的px會(huì)自動(dòng)轉(zhuǎn)換成vw 但是行內(nèi)樣式不行 所以你需要使用這個(gè)來(lái)轉(zhuǎn)換一下
獲取當(dāng)前運(yùn)行環(huán)境 getIsWxClient 使用方式: apitool.getIsWxClient({success,fail}) 備注: 成功或者失敗都會(huì)調(diào)用對(duì)應(yīng)的回調(diào) 但是這里只判斷了MicroMessenger是否存在 無(wú)法得知當(dāng)前是微信小程序在用還是微信內(nèi)打開(kāi)網(wǎng)頁(yè) 所以如果你是直接從公眾號(hào)遷移 要保證公眾號(hào)功能都正常使用的話 這邊還得做個(gè)判斷
將路由參數(shù)轉(zhuǎn)換成string createRouterParams 使用方式: String apitool.createRouterParams(obj)
跳轉(zhuǎn)到小程序other原生頁(yè)面 jumpRouter 使用方式: apitool.jumpRouter(routerName:String,routerParams:Object) 備注: 請(qǐng)看上面注意中寫(xiě)的介紹
跳轉(zhuǎn)小程序原生頁(yè)面 jumpNativeRouter 使用方式: apitool.jumpNativeRouter(routerName:String,routerParams:Object) 備注: 這個(gè)可以用來(lái)跳轉(zhuǎn)分享 支付 登錄等小程序pages下面的原生頁(yè)面
跳轉(zhuǎn)原生登錄頁(yè)面 jumpLogin 使用方式: apitool.jumpLogin()
從webview發(fā)起請(qǐng)求到小程序 postMessage 使用方式: apitool.postMessage({type:'xxx',data:{}}) 備注: 具體詳情請(qǐng)看后面介紹
返回頁(yè)面 backRouter 使用方式: apitool.backRouter()
跳轉(zhuǎn)tab jumpTab 使用方式: apitool.jumpTab(tabName:String || 'home')
創(chuàng)建臨時(shí)緩存區(qū) createTemp 使用方式 apitool.createTemp(obj) 備注: 請(qǐng)看緩存區(qū)說(shuō)明
動(dòng)態(tài)更新webview標(biāo)題 updateTitle 使用方式: apitool.updateTitle(string) 備注: 微信小程序中使用的標(biāo)題是根據(jù)當(dāng)前頁(yè)面的webview標(biāo)題來(lái)的所以如果你想進(jìn)入頁(yè)面的時(shí)候顯示對(duì)應(yīng)的商品名稱 就調(diào)用這個(gè)即可
緩存區(qū)說(shuō)明
因小程序?qū)τ趙ebview限制的原因 所以如果你有以下場(chǎng)景 那么可以考慮用緩存區(qū)來(lái)傳遞數(shù)據(jù)
比如從支付中跳轉(zhuǎn)到地址選擇或者優(yōu)惠券選擇等webview選擇頁(yè)面的時(shí)候 如果想要回顯webview頁(yè)面選中的東西 因?yàn)樾〕绦騱ebview的限制 沒(méi)法兩者之間直接通信 所以就需要?jiǎng)?chuàng)建一個(gè)緩存區(qū)來(lái)獲取數(shù)據(jù)
登錄為何使用原生?
起初我項(xiàng)目中也是使用webview配合jssdk的授權(quán)方式來(lái)做登錄 但是這個(gè)方案會(huì)有幾點(diǎn)問(wèn)題
1.使用jssdk授權(quán) 必須使用80端口
2.使用jssdk處理登錄的話 在小程序里面 體驗(yàn)不好 會(huì)導(dǎo)致你頁(yè)面有可能會(huì)出現(xiàn)頻繁的跳轉(zhuǎn) 難以控制
3.后臺(tái)必須為此寫(xiě)一個(gè)接口來(lái)生成對(duì)應(yīng)的簽名
登錄說(shuō)明
登錄這邊有一點(diǎn)必須注意的是 必須使用webview保存的token 絕對(duì)不要嘗試在小程序里面去保存token
因?yàn)楫?dāng)你刪除小程序的時(shí)候 微信只會(huì)清空小程序的緩存數(shù)據(jù) 但是不會(huì)清空對(duì)應(yīng)的webview的緩存數(shù)據(jù)
這會(huì)導(dǎo)致你小程序那邊沒(méi)登錄 但是webview那邊還是登錄的狀態(tài) 所以一般都是在跳轉(zhuǎn)頁(yè)面到小程序那邊的時(shí)候直接傳遞一個(gè)token過(guò)去來(lái)解決這個(gè)問(wèn)題
webview頁(yè)面刷新
場(chǎng)景:
比如你新增了某條數(shù)據(jù)或者編輯刪除了某條數(shù)據(jù) 想讓上一個(gè)頁(yè)面刷新的話
只需要在wechat - otherView中將你想要刷新的routerName添加進(jìn)去即可
const { viewName } = this.$router.params // 強(qiáng)制指定頁(yè)面刷新 if ([這里就是你想要刷新的路由名字].indexOf(viewName) !== -1 && this.init) { Taro.redirectTo({ url: `../../pages/otherView/index?viewName=${viewName}&` + util.tranParams(this.$router.params) }) }
頁(yè)面分享
如果你想要你的頁(yè)面有分享功能 那么只需要在webview端發(fā)起一個(gè)apitool.postMessage即可
如果你想要控制分享的標(biāo)題與內(nèi)容的話
可以按照這種格式進(jìn)行發(fā)送
apitool.postMessage({type:'share',data:{ title:'分享標(biāo)題', path:'分享路徑', shareUrl:'分享的圖片url' }})
其他處理
如果你想要讓你的應(yīng)用具備更多的擴(kuò)展性的話 可以在wechat - otherView - onMessage中增加對(duì)應(yīng)的判斷
nodeServer
在react-ssr-h5根目錄下面有個(gè)nodeServer的文件
這個(gè)文件是一個(gè)js授權(quán)的本地服務(wù)器版本 如果你想用jssdk的一些功能來(lái)進(jìn)行授權(quán)的話可以在項(xiàng)目中執(zhí)行npm run wechat來(lái)開(kāi)啟這個(gè)服務(wù)
appid跟secret都被我刪除了 你需要自己手動(dòng)替換一下
頁(yè)面授權(quán)在_app.js文件中
postcss.config說(shuō)明
react-ssr-h5使用的是vw vh為單位 所以設(shè)計(jì)搞那邊如果寬高不是750 * 1334的話 需要postcss.config.js中對(duì)對(duì)應(yīng)的修改
"postcss-px-to-viewport": { viewportWidth: 750, // (Number) The width of the viewport. viewportHeight: 1334, // (Number) The height of the viewport. unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. viewportUnit: 'vw', // (String) Expected units. selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. minPixelValue: 1, // (Number) Set the minimum pixel value to replace. mediaQuery: false // (Boolean) Allow px to be converted in media queries. },
react-ssr-h5提醒
這個(gè)項(xiàng)目在啟動(dòng)或者export的時(shí)候都做了處理
你只需要在pages里面添加內(nèi)容即可
不需要在server中再去編寫(xiě)指定的路由 也無(wú)需在export的時(shí)候編寫(xiě)路由
你對(duì)pages做的改動(dòng)都會(huì)實(shí)時(shí)刷新
服務(wù)端渲染建議
1.不要在網(wǎng)頁(yè)中引入antd庫(kù) 尤其不要使用帶有icon的組件 如input
引入這個(gè)將會(huì)導(dǎo)致你的體積直接增加140k 因?yàn)閍ntd的圖標(biāo)是全量引入的
2.使用swiper之類(lèi)的庫(kù) 可以采用cdn的方式引入而不是npm 這樣可以使你的打包體積變得更小
3.建議使用webp而非png只需要在url中?webp即可 已經(jīng)安裝了對(duì)應(yīng)的插件庫(kù)
4.盡量全部使用css module而非全局樣式
海報(bào)圖
小程序海報(bào)圖可以使用Painter生成
鏈接如下: https://github.com/Kujiale-Mobile/Painter
這是taro引入Painter的demo
https://github.com/Kujiale-Mobile/Taro-Painter-Demo
項(xiàng)目地址
https://github.com/fangkyi03/wechat-webview-template
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)
這篇文章主要介紹了Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)的相關(guān)資料,需要的朋友可以參考下2016-05-05js將網(wǎng)址轉(zhuǎn)為urlencode類(lèi)型
網(wǎng)址urlencode加密函數(shù),主要用于中文目錄2008-06-06JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)參數(shù)不丟失的方法
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)參數(shù)不丟失的方法,結(jié)合實(shí)例形式對(duì)比分析了javascript URL加密函數(shù)escape()、encodeURI()與encodeURIComponent()的功能與相關(guān)使用技巧,需要的朋友可以參考下2016-11-11JavaScript表單驗(yàn)證實(shí)現(xiàn)過(guò)程詳解
表單校驗(yàn)是注冊(cè)環(huán)節(jié)中必不可少的操作,表單校驗(yàn)通過(guò)一定的規(guī)則來(lái)確保用戶提交數(shù)據(jù)的有效性,下面這篇文章主要給大家介紹了關(guān)于el-form表單驗(yàn)證的一些實(shí)用方法,需要的朋友可以參考下2023-01-01js實(shí)現(xiàn)人才網(wǎng)站職位選擇功能的方法
這篇文章主要介紹了js實(shí)現(xiàn)人才網(wǎng)站職位選擇功能的方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素結(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08基于JavaScript實(shí)現(xiàn)無(wú)限加載瀑布流
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)無(wú)限加載瀑布流,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07淺談javascript的call()、apply()、bind()的用法
這篇文章主要為大家詳細(xì)介紹了javascript的call()、apply()、bind()的用法,探討JavaScript中函數(shù)的一些特殊用法,感興趣的小伙伴們可以參考一下2016-02-02微信小程序獲取網(wǎng)絡(luò)類(lèi)型的方法示例
這篇文章主要介紹了微信小程序獲取網(wǎng)絡(luò)類(lèi)型的方法,結(jié)合完整實(shí)例形式分析了微信小程序通過(guò)wx.getNetworkType獲取網(wǎng)絡(luò)類(lèi)型的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框自動(dòng)選中內(nèi)容的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框自動(dòng)選中內(nèi)容的方法,涉及javascript鼠標(biāo)點(diǎn)擊事件onClick及選擇事件select的使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08