1. 首页
  2. IT资讯

快速小程序开发之微信小程序内嵌 H5

简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以及在实战中如何调试,一次性带你感受小程序内嵌 H5 的风采,帮你更有底气的使用微信小程序新组件 web-view。

快速小程序开发之微信小程序内嵌 H5

微信小程序

一、技术选择:

1.H5 转成小程序方案路线优缺点对比:

快速小程序开发之微信小程序内嵌 H5

H5 转成小程序方案路线优缺点对比

上表是从原有 H5 转相似业务逻辑的微信小程序的方案路线优缺点对比,基于时间的限制以及当前主流多端编译的可靠性考量,最终团队认为通过使用小程序组件 web-view 内嵌 H5 的方式比较适合当前的开发需求。 web-view 的兼容性问题主要是要在基础库在1.6.4+及以上才可以用,而微信官方统计基础库在1.6.4+ 的覆盖率已达 95% 以上,这个指标也符合产品大人的要求,于是便愉快的选择了 web-view 内嵌 H5 的技术方案。

2.H5 跳转小程序

快速小程序开发之微信小程序内嵌 H5

H5 跳转小程序

从上表中可以对比出 H5 相较于小程序的优缺点,方便各位前端大大评估需求。尤为重要的是因为小程序封装的比较严重所以小程序开发的灵活性没有 H5 那么高,这就要我们注意对交互设计的评估。

快速小程序开发之微信小程序内嵌 H5

二、web-view 微信小程序配置系列问题

1、配置域名

快速小程序开发之微信小程序内嵌 H5

注意:

  • 业务域名中配置的就是小程序以及 H5 和 H5 中引用 iframe 的域名。这里要特别注意的是假如 H5 中有内嵌的 iframe 也要配置进去
  • 这里需要服务端的朋友配合一下,将校验文件放置在将要嵌套的业务域名的根目录。所以要注意后端是否可以支持,否则会有各种扯皮的问题

2、选择基础库

开发的时候不要忘记配置微信小程序的基础库,注意 web-view 要在基础库1.6.4以上的版本库才能使用

快速小程序开发之微信小程序内嵌 H5

3、H5 中引入微信的 js

引入的 js 写的是 H5 跳转微信小程序的 API 实现,这个在H5首页中引入即可,如下图示例

快速小程序开发之微信小程序内嵌 H5

H5 中引入微信的 js

三、web-view 与小程序的通信

官方给出了两种通信方法(如下图所示)

1、postMessage 通信

在 H5 中需要先用 wx.miniProgram.postMessage 接口,把需要分享的信息,推送给小程序。

在用户点击了小程序后退、组件销毁、分享这些特殊事件之后,小程序页面通过 bindmessage 绑定的函数读取 post 信息。

2、设置 web-view 组件的 URL 通信

H5 跳转小程序:

快速小程序开发之微信小程序内嵌 H5

H5 跳转小程序

小程序跳转 H5:

首先在 .wxml 中引入 web-view 组件

快速小程序开发之微信小程序内嵌 H5

引入 web-view 组件

之后在小程序的 js 文件中设置通过 URL 以问号传参的方式传入参数到 H5 中

快速小程序开发之微信小程序内嵌 H5

URL传参

四、小程序内嵌 H5 登录实例

1、小程序登录实现方案流程图:

快速小程序开发之微信小程序内嵌 H5

流程图

如上图所示:整个登录的 cookie 的传递经历了四个步骤:

  • 在小程序登录后获取到后端传递的 cookie 并保存
  • 通过 web-view 中的 url 传递到 H5 中
  • 在 H5 中得到传递的值并写到 cookie 中
  • 在访问接口的时候带上 cookie 2、从微信小程序响应头中获得 cookie 存到 storage 中:

首先在登录页获取到响应头中的登录 cookie 放到 storage 中

快速小程序开发之微信小程序内嵌 H5

登录 cookie 放到 storage

在微信小程序中每次请求接口的时候,将 storage 中的 cookie 取出来,放到请求头中,如果传入不正确或者没有传入 cookie 值,后台将返回 errorCode 为 3002 ,此时前端跳转到登录页面。

快速小程序开发之微信小程序内嵌 H5

请求接口携带cookie

3、获得 cookie 并拼接到 URL 中

首先在 web-view 页面获取 cookie ,并匹配到需要传递的字段,之后将此字段放到 url 中通过问号传参的方式传递到 H5 中:

快速小程序开发之微信小程序内嵌 H5

快速小程序开发之微信小程序内嵌 H5

4、获取 cookie 并在 H5 中使用

在 H5 中获取 cookie 值,并带入 cookie ,注意 domain 和 path 的设置,这两个值必须都有:

快速小程序开发之微信小程序内嵌 H5

获取 cookie 并在 H5 中使用

五、小程序内嵌 H5 调试解决方案

1、关于调试效果缓存的问题

小程序的更新机制即当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是 5 分钟)会被微信主动销毁。

小程序销毁后再重新启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次销毁后再重新启动时才会应用上。

2、内嵌 H5 调试问题

因为微信小程序开发者工具中并没有提供内嵌 H5 的调试工具,所以我们可以采取以下方法调试

  • 在 H5 开发的时候,我们可以在微信小程序开发者工具中找到 web-view 传递给 H5 的 URL 链接将此链接黏贴到浏览器中即可像平时开发 H5 一样调试
  • 对于手机端 H5 的测试调试可以在 H5 中引入 vconsole 这个插件来调试程序,他可以让我们看到接口情况以及 H5 中的日志。

六、总结

看到这里,我们分别从

  • web-view 技术的优缺点
  • web-view 微信小程序配置系列问题
  • web-view 与小程序的通信
  • 小程序内嵌 H5 登录实例
  • 小程序内嵌 H5 调试解决方案

原文地址:快速小程序开发之微信小程序内嵌 H5

原文始发于:快速小程序开发之微信小程序内嵌 H5

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/24725.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code