微信小程序webview 脚手架使用详解

项目地址

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是否存在 无法得知当前是微信小程序在用还是微信内打开网页 所以如果你是直接从公众号迁移 要保证公众号功能都正常使用的话 这边还得做个判断