0
点赞
收藏
分享

微信扫一扫

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架构图


  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

JS引擎:

JS开发框架:

跨平台:

性能:

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

举报

相关推荐

0 条评论