「前端早读君009」疾速小顺序开辟之微信小顺序内嵌 H5

2019年8月20日 166次阅读 来源: nextBoy

本日励志语

要接收本身行为所带来的义务而非本身造诣所带来的光荣。

媒介

微信小顺序中能够直接运转 web 页面，这一新组件 web-view 的发生，能够直接致使小顺序数目迎来一波岑岭。本篇博文将从营业选型，微信小顺序背景设置，运用 web-view 完成登录营业以及在实战中怎样调试一次性带你感觉小顺序内嵌 H5 的风貌，帮你更有底气的运用微信小顺序新组件 web-view。

手艺挑选

H5 转成小顺序计划线路优缺点对照

上表是从原有 H5 转类似营业逻辑的微信小顺序的计划线路优缺点对照，基于时刻的限定以及当前主流多端编译的可靠性考量，终究团队以为经由过程运用小顺序组件 web-view 内嵌 H5 的体式格局比较合适当前的开辟需求。 web-view 的兼容性题目主假如要在基本库在1.6.4+及以上才够用，而微信官方统计基本库在1.6.4+ 的覆蓋率已达 95% 以上，这个目标也相符产物大人的要求，因而便兴奋的挑选了 web-view 内嵌 H5 的手艺计划。

H5 和小顺序手艺对照

《「前端早读君009」疾速小顺序开辟之微信小顺序内嵌 H5》

从上表中能够对照出 H5 相较于小顺序的优缺点，轻易列位前端大大评价需求。尤为重要的是由于小顺序封装的比较严重所以小顺序开辟的灵活性没有 H5 那末高，这就要我们注重对交互设想的评价。

web-view 微信小顺序设置系列题目

  • 设置域名

营业域名中设置的就是小顺序以及 H5 和 H5 中援用 iframe 的域名。这里要特别注重的是假如 H5 中有内嵌的 iframe 也要设置进去
这里须要服务端的朋侪合营一下，将校验文件安排在将要嵌套的营业域名的根目录。所以要注重后端是不是能够支撑，不然会有种种扯皮的题目

  • 挑选基本库

开辟的时刻不要遗忘设置微信小顺序的基本库，注重 web-view 要在基本库1.6.4以上的版本库才运用

  • H5 中引入微信的 jssdk,个中包含了h5和小顺序直接的通讯要领

《「前端早读君009」疾速小顺序开辟之微信小顺序内嵌 H5》

web-view 与小顺序的通讯

官方给出了两种通讯要领（如下图所示） 1、postMessage 通讯 在 H5 中须要先用 wx.miniProgram.postMessage 接口，把须要分享的信息，推送给小顺序。 在用户点击了小顺序退却、组件烧毁、分享这些特别事宜以后，小顺序页面经由过程 bindmessage 绑定的函数读取 post 信息。 2、设置 web-view 组件的 URL 通讯 H5 跳转小顺序：

toWeixin() {
 wx.miniProgram.navigateTo({url: '/pages/myWelfare/myWelfare'});
}

小顺序跳转 H5： 首先在 .wxml 中引入 web-view 组件

<view>
<web-view src="{{url}}" ></web-view>
</view>

以后在小顺序的 js 文件中设置经由过程 URL 以问号传参的体式格局传入参数到 H5 中

if(!option.page){
      this.setData({
        url: `${this.data.url}?${test}`
      });
    } else {
      this.setData({
        url: `${this.data.url}${option.page}?${test}`
      });
    }

小顺序内嵌 H5 登录实例

小顺序登录完成计划流程图：

《「前端早读君009」疾速小顺序开辟之微信小顺序内嵌 H5》

如上图所示：全部登录的 cookie 的通报阅历了四个步骤：

在小顺序登录后猎取到后端通报的 cookie 并保留
经由过程 web-view 中的 url 通报到 H5 中
在 H5 中取得通报的值并写到 cookie 中
在接见接口的时刻带上 cookie 2、从微信小顺序相应头中取得 cookie 存到 storage 中：
首先在登录页猎取到相应头中的登录 cookie 放到 storage 中

wx.setStorageSync('cookie', res.header["Set-Cookie"]);

在微信小顺序中每次要求接口的时刻，将 storage 中的 cookie 取出来，放到要求头中，假如传入不正确或许没有传入 cookie 值，背景将返回 errorCode 为 3002 ，此时前端跳转到登录页面。

 var headerCookie = wx.getStorageSync('cookie');
   wx.request({
            url: murl,
            data: parameter.data || {},
            header: {
               'Cookie': headerCookie
            },
            method: parameter.method || 'POST',
            success: function(res) {
            if(res.data.code == 3002) {
                    wx.redirectTo({
                        url: '../login/login'
                    })
                } else {
                    parameter.success && parameter.success(res);
                }

            }

3、取得 cookie 并拼接到 URL 中
首先在 web-view 页面猎取 cookie ,并匹配到须要通报的字段，以后将此字段放到 url 中经由过程问号传参的体式格局通报到 H5 中

try {
      var value = wx.getStorageSync('cookie');
      if (value) {
        test = value.match(new RegExp("(^| )"+"jxi-m-sid"+"=([^;]*)(;|$)"))[2] ;
      }
    }
url: 'https://www.xxx.com#',
    if(!option.page){
      this.setData({
         //在这里放入通报的字段（如test）
         url: `${this.data.url}?${test}`
      });
    } else {
      this.setData({
         //在这里放入通报的字段,也能够拼接更多的信息（如option.page）
         url: `${this.data.url}${option.page}?${test}`
      });
    }

4、猎取 cookie 并在 H5 中运用 在 H5 中猎取 cookie 值,并带入 cookie ,注重 domain 和 path 的设置，这两个值必需都有：

let isDebug = (window.location.href).indexOf('myf') > -1;
let host = isDebug ? 'jd' : 'jdf';
//取得通报的字段
let c =window.location.href.split('?')[1];
//设置cookie
document.cookie = `jxi-m-sid=${c};domain=${host};path=/`;

小顺序内嵌 H5 调试解决计划

  • 关于调试结果缓存的题目 小顺序的更新机制即当小顺序进入背景，客户端会保持一段时刻的运转状况，凌驾肯定时刻后（现在是 5 分钟）会被微信主动烧毁。 小顺序烧毁后再从新启动时假如发现有新版本，将会异步下载新版本的代码包，并同时用客户端当地的包举行启动，即新版本的小顺序须要等下一次烧毁后再从新启动时才会应用上。
  • 内嵌 H5 调试题目 由于微信小顺序开辟者东西中并没有供应内嵌 H5 的调试东西，所以我们能够采用以下要领调试

在 H5 开辟的时刻，我们能够在微信小顺序开辟者东西中找到 web-view 通报给 H5 的 URL 链接将此链接黏贴到浏览器中即可像日常平凡开辟 H5 一样调试
关于手机端 H5 的测试调试能够在 H5 中引入 vconsole 这个插件来调试顺序，他能够让我们看到接口状况以及 H5 中的日记。

总结

看到这里，我们分别从

  • web-view 手艺的优缺点
  • web-view 微信小顺序设置系列题目
  • web-view 与小顺序的通讯
  • 小顺序内嵌 H5 登录实例
  • 小顺序内嵌 H5 调试解决计划

五个方面梳理了关于微信小顺序 webview 组件的运用。 固然，微信小顺序组件 web-view 还并不完美，个中很难完成一些特别的交互，比方返回按钮返回的页面只能是上一级不能是恣意自定义的页面等题目，这就须要我们更好的沟通以及计划交互设想，同时反应并守候微信小顺序官方的更新和支撑。

文章泉源：京东设想中间

《「前端早读君009」疾速小顺序开辟之微信小顺序内嵌 H5》
翻开微信扫一扫关注早读君，天天清晨为你推送前端学问，度过挤地铁坐公交的时间

    原文作者：nextBoy
    原文地址: https://segmentfault.com/a/1190000017752299
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞