weex开发总结

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

目录

1. Weex概述
2. Weex工作原理
3. Weex在新浪众测App iOS端的实践
4. Weex与ReactNative的对比

WEEX概述

阿里巴巴旗下的跨平台移动开发解决方案
特点：Write Once, Run Everywhere
这里是weex官网：WEEX官网
这篇文章可以让你一小时内跑出一个demo：[【入门】WEEX快速创建工程 Hello World]
(https://segmentfault.com/a/1190000010984857)
现官网有更新，建议按照官方步骤：快速上手
如果想直接跑，可以去看下我写的weex-demo：https://github.com/tryao/weex-demo.git

语法

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

样式

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

WEEX工作原理

首先来看看weex架构图

weex架构图

1. 打包
   Weex将工程进行分包，发布多个JSBundle

   
   打包
2. 发包
   打包后的 JSBundle 一般发布到发包服务器上，客户端从服务器更新包后即可在下次启动执行新的版本，而无需重新下载 app。
3. 执行
   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 启动到用户点击“允许”需要一段时间，在这段时间内发出的网络请求全都会直接失败，所以会出现你点击允许仍然有空白数据的情况。
解决办法如下：

1. 延迟请求
2. 引导页
3. 允许用户手动重新请求

页面间数据传递

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。

WEEX与RN

可参考这篇文章Weex & ReactNative

weex:阿里巴巴于2016年6月开源
ReactNative:Facebook于2015年3月开源

JS引擎：

weex使用V8(Android),JSCore(iOS)
ReactNative使用JSCore

JS开发框架：

weex基于vue.js(7W+ star)。
ReactNative使用React(8W+ star)。

跨平台：

weex可以支持Android iOS web三个平台
ReactNative支持Android iOS两个平台

性能：

• 分包加载
  weex默认提供分包实现
  ReactNative需要自己实现，从而优化JS加载执行时间
• 长view渲染
  weex提供了node和tree两种渲染模式，优化长view的渲染
  ReactNative默认没有优化机制，长view渲染性能会比较差

以上，是分享的主要内容，之后会继续完善，欢迎大家提意见！有任何问题可以直接在下面留言，我看到后会第一时间进行回复。
PS：感谢客户端同学的支持！同时建议大家：想要进行weex开发，基础的原生开发知识是必不可少的！

FE交流群群二维码.png