項目地址

https://github.com/fangkyi03/wechat-webview-template

項目介紹

1.wechat

使用taro創建的初始化項目

2.react-ssr-h5

使用nextjs創建的項目 已經做好完整的兼容處理 使用vw vh為單位

簡單介紹

因小程序對于webview通信做出的限制 從webview發起的postMessage并不會實時的被小程序端接受到

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

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

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

webview跳轉小程序

webview - 通過jumpRouter - 跳轉到小程序的other頁面

實際轉換:

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

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

在webview中發起的任何一個postMessage 也都會在這個otherView中進行統一的處理

提醒

下面使用到的apitool都是對應項目里面的 而不是共用一個

wechat api

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

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

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

  銷毀臨時緩存區  clearTemp  使用方式:  apitool.clearTemp()  備注:  請見緩存區說明

react-ssr-h5 api

  獲取小程序分享以后的路徑 轉換成obj的格式  getSharePath  使用方式:  Object apitool.getSharePath(this)

  獲取路由參數  getRouterParams  使用方式:  Object apitool.getRouterParams(this)

  獲取轉換以后的尺寸  getSize  使用方式:  String apitool.getSize(size)  備注:  因為ssr項目里面使用了postcss-px-to-viewport的關系在less里面寫的px會自動轉換成vw 但是行內樣式不行 所以你需要使用這個來轉換一下

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