258资源分享网

今日励志语

要接受自己行动所带来的责任而非自己成就所带来的荣耀。

前言

微信小程序中可以直接运行 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 和小程序技术对比

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

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

配置域名

业务域名中配置的就是小程序以及 H5 和 H5 中引用 iframe 的域名。这里要特别注意的是假如 H5 中有内嵌的 iframe 也要配置进去

这里需要服务端的朋友配合一下，将校验文件放置在将要嵌套的业务域名的根目录。所以要注意后端是否可以支持，否则会有各种扯皮的问题

选择基础库

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

H5 中引入微信的 jssdk,其中包含了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=http://www.yiyongtong.com/archives/"{{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 登录实例

小程序登录实现方案流程图：

clipboard.png

如上图所示：整个登录的 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=http://www.yiyongtong.com/`;

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