如何在微信小程序中使用webview腳手架-創(chuàng)新互聯(lián)
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何在微信小程序中使用webview 腳手架，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
項(xiàng)目介紹
1.wechat
使用taro創(chuàng)建的初始化項(xiàng)目
2.react-ssr-h6
使用nextjs創(chuàng)建的項(xiàng)目 已經(jīng)做好完整的兼容處理 使用vw vh為單位
簡單介紹
因小程序?qū)τ趙ebview通信做出的限制 從webview發(fā)起的postMessage并不會(huì)實(shí)時(shí)的被小程序端接受到
詳情可見 :https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
登錄 分享 支付 視頻上傳 這幾塊是沒法使用webview來實(shí)現(xiàn)的 必須用小程序原生來寫
所以如果想使用小程序內(nèi)嵌webview的朋友 這里要提個(gè)醒
webview跳轉(zhuǎn)小程序
webview - 通過jumpRouter - 跳轉(zhuǎn)到小程序的other頁面
實(shí)際轉(zhuǎn)換:
Taro.navigateTo({ url: ../../pages/otherView/index?viewName=${routerName}& + createRouterParams(routerParams) })
通過這種方式 就會(huì)在小程序原生router中push一個(gè)路由 從而達(dá)到跟小程序打開原生頁面一致的效果
在webview中發(fā)起的任何一個(gè)postMessage 也都會(huì)在這個(gè)otherView中進(jìn)行統(tǒng)一的處理
提醒
下面使用到的apitool都是對應(yīng)項(xiàng)目里面的 而不是共用一個(gè)
wechat api
小程序項(xiàng)目中跳轉(zhuǎn)頁面并傳參 jumpNativeRouter 使用方式: apitool.jumpNativeRouter(routerName,params : object)
替換小程序網(wǎng)頁頁面 replaceRouter 使用方式: apitool.replaceRouter(routerName,params : object)
獲取臨時(shí)緩存區(qū)數(shù)據(jù) getTemp 使用方式: Object apitool.getTemp() 備注: 請見緩存區(qū)說明
銷毀臨時(shí)緩存區(qū) clearTemp 使用方式: apitool.clearTemp() 備注: 請見緩存區(qū)說明
react-ssr-h6 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里面寫的px會(huì)自動(dòng)轉(zhuǎn)換成vw 但是行內(nèi)樣式不行 所以你需要使用這個(gè)來轉(zhuǎn)換一下
獲取當(dāng)前運(yùn)行環(huán)境
getIsWxClient
使用方式:
apitool.getIsWxClient({success,fail})
備注:
成功或者失敗都會(huì)調(diào)用對應(yīng)的回調(diào) 但是這里只判斷了MicroMessenger是否存在 無法得知當(dāng)前是微信小程序在用還是微信內(nèi)打開網(wǎng)頁 所以如果你是直接從公眾號(hào)遷移 要保證公眾號(hào)功能都正常使用的話 這邊還得做個(gè)判斷將路由參數(shù)轉(zhuǎn)換成string createRouterParams 使用方式: String apitool.createRouterParams(obj)
跳轉(zhuǎn)到小程序other原生頁面 jumpRouter 使用方式: apitool.jumpRouter(routerName:String,routerParams:Object) 備注: 請看上面注意中寫的介紹
跳轉(zhuǎn)小程序原生頁面 jumpNativeRouter 使用方式: apitool.jumpNativeRouter(routerName:String,routerParams:Object) 備注: 這個(gè)可以用來跳轉(zhuǎn)分享 支付 登錄等小程序pages下面的原生頁面
跳轉(zhuǎn)原生登錄頁面 jumpLogin 使用方式: apitool.jumpLogin()
從webview發(fā)起請求到小程序
postMessage
使用方式:
apitool.postMessage({type:'xxx',data:{}})
備注:
具體詳情請看后面介紹返回頁面 backRouter 使用方式: apitool.backRouter()
跳轉(zhuǎn)tab jumpTab 使用方式: apitool.jumpTab(tabName:String || 'home')
創(chuàng)建臨時(shí)緩存區(qū) createTemp 使用方式 apitool.createTemp(obj) 備注: 請看緩存區(qū)說明
動(dòng)態(tài)更新webview標(biāo)題 updateTitle 使用方式: apitool.updateTitle(string) 備注: 微信小程序中使用的標(biāo)題是根據(jù)當(dāng)前頁面的webview標(biāo)題來的所以如果你想進(jìn)入頁面的時(shí)候顯示對應(yīng)的商品名稱 就調(diào)用這個(gè)即可
緩存區(qū)說明
因小程序?qū)τ趙ebview限制的原因 所以如果你有以下場景 那么可以考慮用緩存區(qū)來傳遞數(shù)據(jù)
比如從支付中跳轉(zhuǎn)到地址選擇或者優(yōu)惠券選擇等webview選擇頁面的時(shí)候 如果想要回顯webview頁面選中的東西 因?yàn)樾〕绦騱ebview的限制 沒法兩者之間直接通信 所以就需要?jiǎng)?chuàng)建一個(gè)緩存區(qū)來獲取數(shù)據(jù)
登錄為何使用原生?
起初我項(xiàng)目中也是使用webview配合jssdk的授權(quán)方式來做登錄 但是這個(gè)方案會(huì)有幾點(diǎn)問題
1.使用jssdk授權(quán) 必須使用80端口
2.使用jssdk處理登錄的話 在小程序里面 體驗(yàn)不好 會(huì)導(dǎo)致你頁面有可能會(huì)出現(xiàn)頻繁的跳轉(zhuǎn) 難以控制
3.后臺(tái)必須為此寫一個(gè)接口來生成對應(yīng)的簽名
登錄說明
登錄這邊有一點(diǎn)必須注意的是 必須使用webview保存的token 絕對不要嘗試在小程序里面去保存token
因?yàn)楫?dāng)你刪除小程序的時(shí)候 微信只會(huì)清空小程序的緩存數(shù)據(jù) 但是不會(huì)清空對應(yīng)的webview的緩存數(shù)據(jù)
這會(huì)導(dǎo)致你小程序那邊沒登錄 但是webview那邊還是登錄的狀態(tài) 所以一般都是在跳轉(zhuǎn)頁面到小程序那邊的時(shí)候直接傳遞一個(gè)token過去來解決這個(gè)問題
webview頁面刷新
場景:
比如你新增了某條數(shù)據(jù)或者編輯刪除了某條數(shù)據(jù) 想讓上一個(gè)頁面刷新的話
只需要在wechat - otherView中將你想要刷新的routerName添加進(jìn)去即可
const { viewName } = this.$router.params
// 強(qiáng)制指定頁面刷新
if ([這里就是你想要刷新的路由名字].indexOf(viewName) !== -1 && this.init) {
Taro.redirectTo({ url: `../../pages/otherView/index?viewName=${viewName}&` + util.tranParams(this.$router.params) })
}頁面分享
如果你想要你的頁面有分享功能 那么只需要在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中增加對應(yīng)的判斷
nodeServer
在react-ssr-h6根目錄下面有個(gè)nodeServer的文件
這個(gè)文件是一個(gè)js授權(quán)的本地服務(wù)器版本 如果你想用jssdk的一些功能來進(jìn)行授權(quán)的話可以在項(xiàng)目中執(zhí)行npm run wechat來開啟這個(gè)服務(wù)
appid跟secret都被我刪除了 你需要自己手動(dòng)替換一下
頁面授權(quán)在_app.js文件中
postcss.config說明
react-ssr-h6使用的是vw vh為單位 所以設(shè)計(jì)搞那邊如果寬高不是750 * 1334的話 需要postcss.config.js中對對應(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-h6提醒
這個(gè)項(xiàng)目在啟動(dòng)或者export的時(shí)候都做了處理
你只需要在pages里面添加內(nèi)容即可
不需要在server中再去編寫指定的路由 也無需在export的時(shí)候編寫路由
你對pages做的改動(dòng)都會(huì)實(shí)時(shí)刷新
服務(wù)端渲染建議
1.不要在網(wǎng)頁中引入antd庫 尤其不要使用帶有icon的組件 如input
引入這個(gè)將會(huì)導(dǎo)致你的體積直接增加140k 因?yàn)閍ntd的圖標(biāo)是全量引入的
2.使用swiper之類的庫 可以采用cdn的方式引入而不是npm 這樣可以使你的打包體積變得更小
3.建議使用webp而非png只需要在url中?webp即可 已經(jīng)安裝了對應(yīng)的插件庫
4.盡量全部使用css module而非全局樣式
上述就是小編為大家分享的如何在微信小程序中使用webview 腳手架了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)站名稱：如何在微信小程序中使用webview腳手架-創(chuàng)新互聯(lián)
分享鏈接：http://m.jiaotiyi.com/article/djhhjj.html