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是否存在 无法得知当前是微信小程序在用还是微信内打开网页 所以如果你是直接从公众号迁移 要保证公众号功能都正常使用的话 这边还得做个判断
将路由参数转换成string createRouterParams 使用方式: String apitool.createRouterParams(obj)
跳转到小程序other原生页面 jumpRouter 使用方式: apitool.jumpRouter(routerName:String,routerParams:Object) 备注: 请看上面注意中写的介绍
跳转小程序原生页面 jumpNativeRouter 使用方式: apitool.jumpNativeRouter(routerName:String,routerParams:Object) 备注: 这个可以用来跳转分享 支付 登录等小程序pages下面的原生页面
跳转原生登录页面 jumpLogin 使用方式: apitool.jumpLogin()
从webview发起请求到小程序 postMessage 使用方式: apitool.postMessage({type:'xxx',data:{}}) 备注: 具体详情请看后面介绍
返回页面 backRouter 使用方式: apitool.backRouter()
跳转tab jumpTab 使用方式: apitool.jumpTab(tabName:String || 'home')
创建临时缓存区 createTemp 使用方式 apitool.createTemp(obj) 备注: 请看缓存区说明
动态更新webview标题 updateTitle 使用方式: apitool.updateTitle(string) 备注: 微信小程序中使用的标题是根据当前页面的webview标题来的所以如果你想进入页面的时候显示对应的商品名称 就调用这个即可
缓存区说明
因小程序对于webview限制的原因 所以如果你有以下场景 那么可以考虑用缓存区来传递数据
比如从支付中跳转到地址选择或者优惠券选择等webview选择页面的时候 如果想要回显webview页面选中的东西 因为小程序webview的限制 没法两者之间直接通信 所以就需要创建一个缓存区来获取数据
登录为何使用原生?
起初我项目中也是使用webview配合jssdk的授权方式来做登录 但是这个方案会有几点问题
1.使用jssdk授权 必须使用80端口
2.使用jssdk处理登录的话 在小程序里面 体验不好 会导致你页面有可能会出现频繁的跳转 难以控制
3.后台必须为此写一个接口来生成对应的签名
登录说明
登录这边有一点必须注意的是 必须使用webview保存的token 绝对不要尝试在小程序里面去保存token
因为当你删除小程序的时候 微信只会清空小程序的缓存数据 但是不会清空对应的webview的缓存数据