网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

项目地址

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"color: #ff0000">提醒

下面使用到的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的限制 没法两者之间直接通信 所以就需要创建一个缓存区来获取数据

登录为何使用原生"color: #ff0000">登录说明

登录这边有一点必须注意的是 必须使用webview保存的token 绝对不要尝试在小程序里面去保存token

因为当你删除小程序的时候 微信只会清空小程序的缓存数据 但是不会清空对应的webview的缓存数据

这会导致你小程序那边没登录 但是webview那边还是登录的状态 所以一般都是在跳转页面到小程序那边的时候直接传递一个token过去来解决这个问题

webview页面刷新

场景:

比如你新增了某条数据或者编辑删除了某条数据 想让上一个页面刷新的话

只需要在wechat - otherView中将你想要刷新的routerName添加进去即可

  const { viewName } = this.$router.params
  // 强制指定页面刷新
  if ([这里就是你想要刷新的路由名字].indexOf(viewName) !== -1 && this.init) {
   Taro.redirectTo({ url: `../../pages/otherView/index"color: #ff0000">页面分享

如果你想要你的页面有分享功能 那么只需要在webview端发起一个apitool.postMessage即可

如果你想要控制分享的标题与内容的话

可以按照这种格式进行发送

apitool.postMessage({type:'share',data:{
  title:'分享标题',
  path:'分享路径',
  shareUrl:'分享的图片url'
}})

其他处理

如果你想要让你的应用具备更多的扩展性的话 可以在wechat - otherView - onMessage中增加对应的判断

nodeServer

在react-ssr-h5根目录下面有个nodeServer的文件

这个文件是一个js授权的本地服务器版本 如果你想用jssdk的一些功能来进行授权的话可以在项目中执行npm run wechat来开启这个服务

appid跟secret都被我删除了 你需要自己手动替换一下

页面授权在_app.js文件中

postcss.config说明

react-ssr-h5使用的是vw vh为单位 所以设计搞那边如果宽高不是750 * 1334的话 需要postcss.config.js中对对应的修改

    "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提醒

这个项目在启动或者export的时候都做了处理

你只需要在pages里面添加内容即可

不需要在server中再去编写指定的路由 也无需在export的时候编写路由

你对pages做的改动都会实时刷新

服务端渲染建议

1.不要在网页中引入antd库 尤其不要使用带有icon的组件 如input
引入这个将会导致你的体积直接增加140k 因为antd的图标是全量引入的

2.使用swiper之类的库 可以采用cdn的方式引入而不是npm 这样可以使你的打包体积变得更小

3.建议使用webp而非png只需要在url中"color: #ff0000">海报图

小程序海报图可以使用Painter生成

链接如下: https://github.com/Kujiale-Mobile/Painter

这是taro引入Painter的demo

https://github.com/Kujiale-Mobile/Taro-Painter-Demo

项目地址

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:20道JS原理题助你面试一臂之力(必看)
下一篇:koa2 用户注册、登录校验与加盐加密的实现方法
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。