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

所属分类: 网络编程 / JavaScript 阅读数: 423
收藏 0 赞 0 分享

项目地址

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的缓存数据

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

webview页面刷新

场景:

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

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

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

页面分享

如果你想要你的页面有分享功能 那么只需要在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中?webp即可 已经安装了对应的插件库

4.尽量全部使用css module而非全局样式

海报图

小程序海报图可以使用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

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

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多