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


Posted in Javascript onJuly 22, 2019

项目地址

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

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

Javascript 相关文章推荐
深入理解JavaScript定时机制
Oct 29 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 #Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 #Javascript
在小程序中推送模板消息的实现方法
Jul 22 #Javascript
javascript自定义日期比较函数用法示例
Jul 22 #Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 #Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 #Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 #Javascript
You might like
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
jQuery技巧总结
2011/01/01 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
python读取Android permission文件
2013/11/01 Python
python统计日志ip访问数的方法
2015/07/06 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python搜索包的路径的实现方法
2019/07/19 Python
基于python实现把图片转换成素描
2019/11/13 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
销售找工作求职信
2013/12/20 职场文书
欢迎新生标语
2014/10/06 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server