這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何在微信小程序中使用webview 腳手架，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供惠民網(wǎng)站建設(shè)、惠民做網(wǎng)站、惠民網(wǎng)站設(shè)計、惠民網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、惠民企業(yè)網(wǎng)站模板建站服務(wù)，10年惠民做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

項目介紹

1.wechat

使用taro創(chuàng)建的初始化項目

2.react-ssr-h6

使用nextjs創(chuàng)建的項目 已經(jīng)做好完整的兼容處理 使用vw vh為單位

簡單介紹

因小程序?qū)τ趙ebview通信做出的限制 從webview發(fā)起的postMessage并不會實時的被小程序端接受到

詳情可見 :https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

登錄 分享 支付 視頻上傳 這幾塊是沒法使用webview來實現(xiàn)的 必須用小程序原生來寫

所以如果想使用小程序內(nèi)嵌webview的朋友 這里要提個醒

webview跳轉(zhuǎn)小程序

webview - 通過jumpRouter - 跳轉(zhuǎn)到小程序的other頁面

實際轉(zhuǎn)換:

Taro.navigateTo({ url: ../../pages/otherView/index?viewName=${routerName}& + createRouterParams(routerParams) })

通過這種方式 就會在小程序原生router中push一個路由 從而達(dá)到跟小程序打開原生頁面一致的效果

在webview中發(fā)起的任何一個postMessage 也都會在這個otherView中進(jìn)行統(tǒng)一的處理

提醒

下面使用到的apitool都是對應(yīng)項目里面的 而不是共用一個

wechat api

  小程序項目中跳轉(zhuǎn)頁面并傳參
  jumpNativeRouter
  使用方式:
  apitool.jumpNativeRouter(routerName,params : object)

  替換小程序網(wǎng)頁頁面
  replaceRouter
  使用方式:
  apitool.replaceRouter(routerName,params : object)

  獲取臨時緩存區(qū)數(shù)據(jù)
  getTemp
  使用方式:
  Object apitool.getTemp()
  備注:
  請見緩存區(qū)說明

  銷毀臨時緩存區(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)
  備注:
  因為ssr項目里面使用了postcss-px-to-viewport的關(guān)系在less里面寫的px會自動轉(zhuǎn)換成vw 但是行內(nèi)樣式不行 所以你需要使用這個來轉(zhuǎn)換一下

獲取當(dāng)前運行環(huán)境
  getIsWxClient
  使用方式:
  apitool.getIsWxClient({success,fail})
  備注:
  成功或者失敗都會調(diào)用對應(yīng)的回調(diào) 但是這里只判斷了MicroMessenger是否存在 無法得知當(dāng)前是微信小程序在用還是微信內(nèi)打開網(wǎng)頁 所以如果你是直接從公眾號遷移 要保證公眾號功能都正常使用的話 這邊還得做個判斷

  將路由參數(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)
  備注:
  這個可以用來跳轉(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)建臨時緩存區(qū)
  createTemp
  使用方式
  apitool.createTemp(obj)
  備注:
  請看緩存區(qū)說明

動態(tài)更新webview標(biāo)題
  updateTitle
  使用方式:
  apitool.updateTitle(string)
  備注:
  微信小程序中使用的標(biāo)題是根據(jù)當(dāng)前頁面的webview標(biāo)題來的所以如果你想進(jìn)入頁面的時候顯示對應(yīng)的商品名稱 就調(diào)用這個即可

緩存區(qū)說明

因小程序?qū)τ趙ebview限制的原因 所以如果你有以下場景 那么可以考慮用緩存區(qū)來傳遞數(shù)據(jù)

比如從支付中跳轉(zhuǎn)到地址選擇或者優(yōu)惠券選擇等webview選擇頁面的時候 如果想要回顯webview頁面選中的東西 因為小程序webview的限制 沒法兩者之間直接通信 所以就需要創(chuàng)建一個緩存區(qū)來獲取數(shù)據(jù)

登錄為何使用原生?

起初我項目中也是使用webview配合jssdk的授權(quán)方式來做登錄 但是這個方案會有幾點問題

1.使用jssdk授權(quán) 必須使用80端口

2.使用jssdk處理登錄的話 在小程序里面 體驗不好 會導(dǎo)致你頁面有可能會出現(xiàn)頻繁的跳轉(zhuǎn) 難以控制

3.后臺必須為此寫一個接口來生成對應(yīng)的簽名

登錄說明

登錄這邊有一點必須注意的是 必須使用webview保存的token 絕對不要嘗試在小程序里面去保存token

因為當(dāng)你刪除小程序的時候 微信只會清空小程序的緩存數(shù)據(jù) 但是不會清空對應(yīng)的webview的緩存數(shù)據(jù)

這會導(dǎo)致你小程序那邊沒登錄 但是webview那邊還是登錄的狀態(tài) 所以一般都是在跳轉(zhuǎn)頁面到小程序那邊的時候直接傳遞一個token過去來解決這個問題

webview頁面刷新

場景:

比如你新增了某條數(shù)據(jù)或者編輯刪除了某條數(shù)據(jù) 想讓上一個頁面刷新的話

只需要在wechat - otherView中將你想要刷新的routerName添加進(jìn)去即可

  const { viewName } = this.$router.params
  // 強制指定頁面刷新
  if ([這里就是你想要刷新的路由名字].indexOf(viewName) !== -1 && this.init) {
   Taro.redirectTo({ url: `../../pages/otherView/index?viewName=${viewName}&` + util.tranParams(this.$router.params) })
  }

頁面分享

如果你想要你的頁面有分享功能 那么只需要在webview端發(fā)起一個apitool.postMessage即可

如果你想要控制分享的標(biāo)題與內(nèi)容的話

可以按照這種格式進(jìn)行發(fā)送

apitool.postMessage({type:'share',data:{
  title:'分享標(biāo)題',
  path:'分享路徑',
  shareUrl:'分享的圖片url'
}})

其他處理

如果你想要讓你的應(yīng)用具備更多的擴展性的話 可以在wechat - otherView - onMessage中增加對應(yīng)的判斷

nodeServer

在react-ssr-h6根目錄下面有個nodeServer的文件

這個文件是一個js授權(quán)的本地服務(wù)器版本 如果你想用jssdk的一些功能來進(jìn)行授權(quán)的話可以在項目中執(zhí)行npm run wechat來開啟這個服務(wù)

appid跟secret都被我刪除了 你需要自己手動替換一下

頁面授權(quán)在_app.js文件中

postcss.config說明

react-ssr-h6使用的是vw vh為單位 所以設(shè)計搞那邊如果寬高不是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提醒

這個項目在啟動或者export的時候都做了處理

你只需要在pages里面添加內(nèi)容即可

不需要在server中再去編寫指定的路由 也無需在export的時候編寫路由

你對pages做的改動都會實時刷新

服務(wù)端渲染建議

1.不要在網(wǎng)頁中引入antd庫 尤其不要使用帶有icon的組件 如input
引入這個將會導(dǎo)致你的體積直接增加140k 因為antd的圖標(biāo)是全量引入的

2.使用swiper之類的庫 可以采用cdn的方式引入而不是npm 這樣可以使你的打包體積變得更小

3.建議使用webp而非png只需要在url中?webp即可 已經(jīng)安裝了對應(yīng)的插件庫

4.盡量全部使用css module而非全局樣式

上述就是小編為大家分享的如何在微信小程序中使用webview 腳手架了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。