最近用weex开发了新浪众测app的iOS端（因开发时间紧迫，前期仅开发了iOS端，年后会继续开发Android），给大家分享下。之前还用react native开发了新浪星座iOS端和Android端，最后会进行一下rn与weex的对比。
目录
- Weex概述
- Weex工作原理
- Weex在新浪众测App iOS端的实践
- 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架构图
-
打包
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。
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
网友评论