最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2019-1-4 00:45

今日励志语要接受自己行动所带来的责任而非自己成就所带来的荣耀。前言微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型,微信小程序后 ...

今日励志语

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

前言

微信小程序中可以直接运行 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 的技术方?#28014;?/p>

H5 和小程序技术对比

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

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

  • 配置域名

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

  • 选择基础库

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

  • H5 中引入微信的 jssdk,其中包含了h5和小程序直接的通讯方法

web-view 与小程序的通信

官方给出了两种通信方法(如下图所示) 1、postMessage 通信 在 H5 ?#34892;?#35201;先用 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 登录实例

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

clipboard.png

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

在小程序登?#24049;?#33719;取到后端传递的 cookie 并保存
通过 web-view 中的 url 传递到 H5 中
在 H5 中得到传递的值并写到 cookie 中
在访问接口的时候带上 cookie 2、从微信小程序响应头中获得 cookie 存到 storage 中:
首先在登录页获取?#36739;?#24212;头中的登录 cookie 放到 storage 中

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

在微信小程序中?#30475;?#35831;求接口的时候,将 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 的设置,这两个?#24403;?#39035;都有:

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

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

  • 关于调试效果缓存的问题 小程序的更新机制即当小程序进入后台,客户端会维持一?#38382;?#38388;的运行状态,超过一定时间后(目前是 5 ?#31181;櫻?#20250;被微信主动销毁。 小程序销毁后再重新启动时如果发现?#34892;?#29256;本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要?#35748;?#19968;次销毁后再重新启动时才会应用上。
  • 内嵌 H5 调试问题 因为微信小程序开发者工具中并没有提供内嵌 H5 的调试工具,所以我们可以采取以下方法调试

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

总结

看到这里,我们?#30452;?#20174;

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

五个方面梳理了关于微信小程序 webview 组件的使用。 ?#27604;唬?#24494;信小程序组件 web-view 还并不完善,其中很难实现一些特殊的交互,比如返回按钮返回的页面只能?#24039;?#19968;级不能是任意自定义的页面?#20219;?#39064;,这就需要我们更好的沟通以及规划交互设计,同时反馈并等待微信小程序官方的更新和支持。

文章来源:京东设计?#34892;?/a>

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: nextBoy 来自: segmentfault
新时时彩软件