欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序webview 腳手架使用詳解

 更新時(shí)間:2019年07月22日 11:25:19   作者:fangkyi03  
這篇文章主要介紹了微信小程序webview 腳手架使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值

項(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)文章

最新評(píng)論