Weex在苏宁移动办公开发中是如何实践的?

  • 时间:2018-06-19 22:11 作者:安卓安卓安卓 来源:安卓安卓安卓 阅读:304
  • 扫一扫,手机访问
摘要:Weex 是什么?Weex 是一套简单易使用的跨平台开发方案,可以以 web 的开发体验构建高性可以、可扩展的 native 应使用,为了做到这些,Weex 与 Vue 合作,用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,打造三端一致的 nativ

Weex 是什么?

Weex 是一套简单易使用的跨平台开发方案,可以以 web 的开发体验构建高性可以、可扩展的 native 应使用,为了做到这些,Weex 与 Vue 合作,用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,打造三端一致的 native 应使用。其架构如下所示:

Weex在苏宁移动办公开发中是如何实践的?

将 weex 工程文件编译成 JS bundle,发布到云端,由用户端下载后,通过浏览器里的 JavaScript 引擎或者 Weex SDK 运行起来的。

为了可以掌握 weex 编程技术,开发人员需要熟习以下几个概念(拷贝自官网 http://weex.apache.org)

Weex 页面结构

界面展现、逻辑解决、设施可以力用、生命周期管理等部分。

Dom 模型

Weex 页面通过相似 HTML DOM 的方式管理界面,首先页面会被分解为一个 DOM 树,每个 DOM 结点都代表了一个相对独立的 native 视图的单元。而后不同的视图单元之间通过树形结构组合在了一起,构成一个完整的页面。

组件

Weex 支持文字 text、图片 image、视频 video 等内容型组件,也支持 div、list、scroller 等容器型组件,还包括 slider、input、textarea、switch 等多种特殊的组件。Weex 的界面就是由这些组件以 DOM 树的方式构建出来的。

布局系统

Weex 页面中的组件会按照肯定的布局规范来进行排布,我们这里提供了 CSS 中的盒模型、flexbox 和 绝对 / 相对 / 固定 / 吸附布局这三大块布局模型。

功可以

Weex 提供了非常丰富的系统功可以 API,包括弹出存储、网络、导航、弹对话框和 toast 等,开发者能在 Weex 页面通过获取一个 native module 的方式引入并调使用这些用户端功可以 API。

生命周期

每个 Weex 页面都有其自身的生命周期,页面从开始被创立到最后被销毁,会经历到整个过程。这是通过对 Weex 页面的创立和销毁,在路由中通过 SDK 自行定义并实现的。

在移动办公开发中的实践

注:涉及代码均以 Android 端为例。

(一)前台遵循 weex 移动应使用的设计理念

Weex在苏宁移动办公开发中是如何实践的?

weex 认为一个具备高并行研发可以力、动态化和标准化规范化的移动应使用应该由以下几个方面构成:

  • 页面:首先移动应使用应该能被拆解成若干个页面,每个页面相对解耦独立,同时每个页面都有一个 URL 进行唯一标识。
  • 路由:这些页面将会通过路由机制有机的串联起来,页面之间的关系是通过路由来进行调度的。常见的移动应使用路由包括导航栏、tab 切换等。
  • 设施可以力:以各种 API 或者服务的方式提供出来,供页面自由用。

这样的话,在构建一个完整的移动应使用之前,先确定你的应使用有多少页面,每个页面分别是什么 URL,页面之间的路由逻辑是怎么的,而后梳理整个移动应使用需要的所有 API 和服务。最后通过 Weex 创立不同的页面,并分别进行开发、调试。

(二)构建自己的标杆工程

我们基于 github 上的 Playground 项目,构建了自己的标杆工程。

Weex在苏宁移动办公开发中是如何实践的?

Weex在苏宁移动办公开发中是如何实践的?

Weex在苏宁移动办公开发中是如何实践的?

将不同的 js 文件使用做常量、工具方法的定义。常量诸如 url、版本开关、路由表。工具方法诸如 Http get、post 方法的封装、时间转换函数、加解密方法。

除了使用 vue 封装页面,还封装了公使用的样式,构建了常使用的控件库。

(三)整合 weex 引擎,完善移动办公微应使用的接入方案

Weex在苏宁移动办公开发中是如何实践的?

挂接 glide 使用于替换默认的 picasso 图库的实现,由于目前 picasso 的版本没法支持 gif 动图。另一个好处是,能定制图库缓冲区的大小。

Weex在苏宁移动办公开发中是如何实践的?

挂接自己的 http 适配器,适度复使用 Native 的 http 实现并定制到 weex 中,同时这也是打通 native 登陆凭证和 weex 登陆凭证的必要一环。

在项目迭代中,扩展自己设置控件。这块自己设置控件特指通过 WXSDKEngine.registerComponent() 注册的 Native 控件。需要严格控制这部分控件的实现。基于以下几个方面考虑:

1.Native 控件需要 IOS、Android 同时实现,添加了开发工作量。

2. 页面用了这种控件,老版本的应使用就没法进行兼容,会需要提醒使用户更新。

3. 开发者需要充分考虑纯 vue 的方式能否可以实现,一般都是有方法的。

即便实现了 Native 控件,在后续 weex 引擎更新过程中,也需要持续关注,可可以日后标准控件库会提供支持。

定义一套开放接口,通过 WXSDKEngine.registerModule() 注册,weex 能适度复使用 H5 的开放接口实现。

注册自己的 webview 实现替换默认的 webview。实现自己的文件下载器,文件选择器,支持电话号码、邮箱等链接的点击跳转。

(四)静态资源的缓冲和缓冲升级策略配置

静态资源(js、css、图片)默认不支持缓冲策略,导致用微应使用页面总是打开较慢,且白费流量,没可以达到离线 web 应使用的顺滑操作体验。针对此问题,手机端和服务端均需做出调整。

前面我们讲到了,在用户端一侧,针对图片适配器我们设置了 glide 图库,且修改了缓冲配置。而针对静态页面的加载,weex 的支撑板块是 WXHttpManager 和 WXOkHttpDispatcher。如下图所示:

Weex在苏宁移动办公开发中是如何实践的?

Weex在苏宁移动办公开发中是如何实践的?

对 defaultOkHttpClient 进行缓冲路径和大小的配置。 在服务端一侧,配上 Etag 策略,假如不支持则配置较老的 Last-Modified+If-Modified-Since 策略。其实现效果如下:

第一次请求:

  1. 用户端发起 HTTP GET 请求一个文件。
  2. 服务器解决请求,返回文件内容和 Headers,当然包括 Etag(如"2e681a-6-5d044840"),状态码 200。

第二次请求:

  1. 用户端发起 HTTP GET 请求同一个文件,这个时候用户端会附带一个 If-None-Match 头,这个头的内容就是第一次请求时服务器返回的 Etag:2e681a-6-5d044840。
  2. 服务器判断发送过来的 Etag 和按云端文件计算出来的 Etag 匹配,说明静态资源未变更,直接返回 304,通知用户端继续用本地缓存。

需要补充的是,对于网络请求失败或者是缓冲加载失败的情况,本地需要挂接回调方法解决,并定制加载失败页面,让使用户在失败页面有机会点击刷新按钮进行重试。

(五)开放接口和接口权限控制

weex 引擎加载的页面包括 weex 和 H5 两种,针对 H5 页面,通过 Javascript Interface 我们挂接与其余 H5 应使用相同的一套开发接口。

Weex在苏宁移动办公开发中是如何实践的?

这些是一部分我们给 H5 提供的开放接口,通过 WXSDKEngine.registerModule() 我们还另行包装了一份给 weex 调使用。考虑到部分接口涉及使用户隐私,假如应使用内有要用这部分接口,在应使用启动时需要像微信一样有使用户受权。

(六)打通 Native、weex、H5 的登陆凭证

我们应使用的登陆凭证是保存在 Cookie 当中的,所以在 Native、weex、H5 中打通登陆凭证,实现单点登录(Single SignOn)我们做了以下几件事:

1. 包装一个 CookieManager,实现 cookie 的读写接口以兼容新老版本。

Weex在苏宁移动办公开发中是如何实践的?

Weex在苏宁移动办公开发中是如何实践的?

2. 进程初始化时,初始化 CookieManager;账号登出时,移除 Cookies。

3. 在 WebView 页面加载成功的回调,添加 Cookie 强制持久化写入的逻辑。Weex WebView 也添加相同逻辑。

Weex在苏宁移动办公开发中是如何实践的?

4. 在 Http 请求、文件传输接口处添加 Cookie 的读写逻辑,特别要注意的是对重定向请求的解决,需要挂接自己的回调方法,读写 Cookie。Weex 对应的 HttpAdapter 和文件传输接口也需做相同修改。

Weex在苏宁移动办公开发中是如何实践的?

(七)更新策略

无论是通过 WXSDKEngine.registerModule() 注册的接口还是通过 WXSDKEngine.registerComponent() 注册的组件,都是在迭代版本中逐渐增加进去的。考虑到兼容性,就存在一部分老版本用户端无法用当前 weex 页面部分功可以的问题,所以在 weex 页面需要添加平台最小版本号的控制逻辑,当用户端版本低于接口所需的最小版本时,要提醒使用户更新。

Weex在苏宁移动办公开发中是如何实践的?

由于使用户是能选择忽略更新的,在每个组件和开放接口的用点,也需要添加保护,无法用时应提醒是版本过低不支持的起因。

(八)错误的云监测

在 Native 能通过接口 IWXRenderListener 中的 onException 回调方法监测 render error、js exception、network error 等。在 Weex 页面,则需要通过开放接口上报错误错误。这些错误最后都通过 Native 接口上报到云端,做到对使用户问题的实时监控。

(九)屏幕适配

Weex 是固定以 750px 作为虚拟屏幕宽度的,所有控件的实际大小要根据设施的屏幕大小进行等比缩放。例如,当一个按钮的尺寸在页面中设定为 60x100px,而屏幕实际宽度为 1080px,那么按钮的显示宽度则为 60x1080/750 = 86px,高度则为 100x1080/750 = 144px。

(十)引擎更新和平台兼容性的坑

作为一款需要商使用的应使用,在集成了 weex 引擎后,面临引擎更新的问题,尤其在阿里官方迭代版本较密集的现状下。强烈建议慎重更新!在引擎更新后要对已上线的应使用做回归测试,我们遭遇到的实际状况是引擎更新支持了少量新功可以,却把部分老控件、老接口、老页面给搞坏了。例如:

1. 引擎更新到 16 版本 Android 端取系统时间接口,未携带当前时区偏移,到了 18 版本又好了。

2. 18 版本 IOS 横向翻页的页面切换效果会有垂直方向偏移。

3. vue 本身是支持 v-model 给 Input 来赋值的,Android 端的引擎更新到 18 之后这块功可以忽然又不支持了。

Weex 引擎还存在少量平台兼容性的坑,例如:

1. 页面恢复的广播事件,IOS 和 Android 不一致,Android 的事件名叫 WXApplicationDidBecomeActiveEvent,IOS 的叫 viewWillAppear。

2. 在做自己设置组件的时候,需要页面上盖了一个蒙板控件,假如蒙板里没有内容,在 Android 端,蒙板不会耗费 Touch 事件,在 IOS 端,蒙板会耗费 touch 事件。为理解决这个问题,当蒙板上无内容的时候,需要把 IOS 端蒙板的透明度改成全透明。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
【系统环境|】教你零基础如何快速入门大数据技巧(2019-05-12 11:25)
【系统环境|】想学习大数据?这才是完整的大数据学习体系(2019-05-11 11:33)
手机二维码手机访问领取大礼包
返回顶部