Weex实战与对比RN-优快云博客

最近用weex开发了新浪众测app的iOS端（因开发时间紧迫，前期仅开发了iOS端，年后会继续开发Android），给大家分享下。之前还用react native开发了新浪星座iOS端和Android端，最后会进行一下rn与weex的对比。

阿里巴巴旗下的跨平台移动开发解决方案特点：Write Once, Run Everywhere 这里是weex官网：WEEX官网这篇文章可以让你一小时内跑出一个demo：【入门】WEEX快速创建工程 Hello World
如果想直接跑，可以去看下我写的weex-demo：github.com/tryao/weex-…

语法

Weex采用vue2.0语法
Weex 和 Vue 2.x 的语法差异

样式

Weex 中只支持单个类名选择器，不支持关系选择器，也不支持属性选择器
背景色：android下view默认白色, iOS无默认颜色
支持了基本的盒模型和 flexbox 布局样式属性暂不支持简写不支持css动画和3D样式不支持display: none;

WEEX工作原理

首先来看看weex架构图

打包 Weex将工程进行分包，发布多个JSBundle
发包打包后的 JSBundle 一般发布到发包服务器上，客户端从服务器更新包后即可在下次启动执行新的版本，而无需重新下载 app。
执行 Weex 的 iOS 和 Android 客户端的【JSFramework】中都会运行一个 JavaScript 引擎，来执行 JS bundle，同时向各端的渲染层发送规范化的指令，调度客户端的渲染和其它各种能力。

接下来一起分析一下weexSDK，参考上面的weex架构图分析如下：

「JS Framework」JSBundle的执行环境
「Weex Runtime」中间件或者叫通讯桥梁
「Native Render Engine」解析js端发出的指令做原生控件布局渲染

WEEX在众测APP IOS端的实践

展示

以上是4个tab页面 下面将对以下几部分展开说一下：

引导页
页面间数据传递
list渲染
滑动切换
css复用
module（原生组件）
iPhone X适配

引导页

iOS 10 的坑：新机首次安装 app ，首次启动该app会弹出一个询问用户“是否允许应用访问数据”的弹框，在点击允许之前是不会进行数据请求的。然而从 app 启动到用户点击“允许”需要一段时间，在这段时间内发出的网络请求全都会直接失败，所以会出现你点击允许仍然有空白数据的情况。解决办法如下：

延迟请求
引导页
允许用户手动重新请求

页面间数据传递

A->B 举例：home- >homepage 在home页面：

let params = {
    url:`${this.baseurl}me/homepage.js?id=${id}`,
    animated:'true'
};
navigator.push(params, function(e) {
    console.log('i am the callback.')
});
复制代码

在homepage页面：

//获取本页面URL
let url = weex.config.bundleUrl;
//对URL进行解析即可获取id参数
复制代码

A->B->A 举例：我的页面跳转登录页面之后跳回我的页面在me页面：

// 监听事件
const globalEvent = weex.requireModule('globalEvent');
globalEvent.addEventListener("logout", (e) => {
    // 事件回调
    if (e=='false') {
        navigator.pop();
    }
});
复制代码

在login页面：

// 广播退出登录事件
loginModule.postGlobalEvent('logout', 'true');
复制代码

list渲染

长列表渲染是很多开发者都会关注的问题，weex提供了scroller和list两种列表：

scroller 渲染和界面的操作需要等到将所有列表加载完成后才能使用没有内存回收
list 只渲染可见区域有内存复用 **注意：**list只适合垂直长列表的滚动场景，但是如果需要使用横向滚动就必须使用scroller；同时划分好cell颗粒度，嵌套不要太深。

滑动切换

slider有一个属性 :index，这个就是当前item的索引。我们需要设置这个索引来实现滑动切换，只要去改变这个对应的index 的值就可以了。详情可参考这篇文章：weex slider 实现滑动底部导航功能

css复用

在很多业务页面都会用到的css可抽离出来进行复用，复用方法如下：

<!-- 刷新加载 -->
<style src='../components/css/refresh.css' />
复制代码

module

我们封装了以下module

网络监控
登录
推送
分享
全局广播
底部tab消息红点
反馈与跳转app store对话框
h5与native交互

因为有些模块涉及公司内部代码，所以仅对h5与native交互说一下 h5->weex页面 定义跳转协议在h5中关于我们的链接:

<a href="sinazc://zhongce.sina.com.cn?from=sinazc&jumptype=about"></a>
复制代码

在iOS端

if ([[url absoluteString] hasPrefix:@"sinazc://"]) { //解析协议
    NSDictionary *entry = [[ZCUrlOpenHandleManager shareInstance] analyzeUrl:[url absoluteString]];
    if (entry.count) {
        [[ZCUrlOpenHandleManager shareInstance] handleUrlOpenWithDictionary:entry];
    }
    return YES;
}
复制代码

在此顺便说下weex不太适合的场景：文章详情页，也就是超富文本的场景，我们采用的方案是内嵌h5。