近期要做一个安卓端的原生应用程序。情况是这样的:需求方原先已经实现了网页,是一个工具类应用,大致作用是连接到他们公司生产的硬件,然后通手机与智能硬件通信来对硬件进行一系列控制。不过呢,这个网页先前是由工程师完成的,使用方式都是指令式的(比如连接服务器需要输入link server,发送信号需要send signal)。嗯,这很程序员。这反人性的操作让使用人员用了不久就深恶痛绝,正好又有需求上的变更,于是他司决定重写页面,同时为了方便员工的使用需要以安卓app的形式完成。
然而我只是个JSer啊!不过万能的JS表示移动端应用了也是小Case。本来我就一直对RN很感兴趣,但是现在时间紧迫,React Native的入门成本高,所以先尝试使用阿里的weex方案,待以后时机合适再学习RN的使用。

计划先过一遍weex的文档,然后研究weex团队写的移动端原生应用weex-hackernews,配合使用weex-packWeex Playgroundweex-toolkit来开发安卓APP。另外还有weex.helpweex学院这两个社区供weex开发者交流学习(浏览了一些帖子之后感叹weex的强大,于是坚定了我后期学习RN的决心)。
用weex开发安卓APP需要安装Android Studio,同时我装了安卓模拟器来测试。
以下主要我是对weex官方文档的梳理。

weex文档学习

weex是跨平台解决方案,可以用JS开发高性能、可扩展的 native 应用。早先weex自身有一套语法规则,与Vue有些相近,现在weex已与Vue合作,使用Vue作为上层框架,同时一些Vue插件如Vue-Router等也可以使用。很好奇weex+vue会碰撞出怎样的火花。

与Web开发的差异

由于weex已与Vue合作,因此写法上与Vue的单文件组件相同,即<template> </template> <script></script> <style></style>
weex的解决方案和我起初所想的并不一样,并不是向原生应用插入一个html页面。weex中写JS和在Web中写JS的区别主要有:

  • weex环境中没有DOM(DOM是js操作html的接口,是Web中的概念)。由于原生环境不支持Web API,其他一些Web API,如ELement、Event、File等也无法使用,具体可看MDN上的Web API列表
  • 虽然不存在DOM对象,但是weex实现了一套Native DOM API,这套接口与HTML DOM API非常接近,同时weex中的VUE也是基于此来进行适配的。
  • 没有BOM对象(浏览器对象模型),所以没有window、screen、document、history、location、navigator等对象。同时像document.getElementById这类选择元素的方法也就无法使用。
  • weex的运行环境以原生应用为主,在Android和iOS环境中渲染出来的是原生的组件,而不是DOM元素。
  • weex支持绑定事件,本质上是由原生组件捕获并触发的,因此行为和浏览器不同,同时只支持有限几类事件,也不区分事件的捕获的冒泡阶段(weex2.0已经实现了W3C标准的事件冒泡机制,不过为了兼容旧版本,需要在根元素属性在加上bubble="true"来开启)。
  • 能调用移动设备的原生API,使用方法是通过注册、调用模块来实现。其中有一些模块是 Weex 内置的,如 clipboard、navigator、storage等。

CSS的差异

  • 为了加强性能,weex不允许使用简写属性。比如border: 1px solid #ddd这样的CSS样式需要拆分成border-styleborder-color等。
  • weex同样基于盒模型,不过默认box-sizingborder-box
  • 长度只支持像素值,不支持em、rem这样的相对单位。
  • weex默认且唯一的布局模型为flex,因此是靠flex-directionalign-items等css属性来布局。可以看看阮一峰的flex布局教程
  • position属性除了relativeabsolutefixed外,还有stiky,意为仅当元素滚动到页面元素外时,元素会固定在页面窗口的顶部。
  • weex不支持z-index,但靠后的元素层级更高,可以通过排列元素出现顺序来调整层级。
  • Weex 支持四种伪类:active, focus, disabled, enabled所有组件都支持 active, 但只有 input 组件和 textarea 组件支持focus,enabled, diabled
  • weex支持渐变,不过现在只支持两种颜色的渐变。
    按weex文档所说,可以以如下顺序规划weex的样式:
  1. 全局样式规划:将整个页面分割成合适的模块。
  2. flex 布局:排列和对齐页面模块。
  3. 定位盒子:定位并设置偏移量。
  4. 细节样式处理:增加特定的具体样式。

内建组件

虽然weex可以使用HTML和CSS中的一些标签,但实际上应该是对原生组件的封装,而非HTML元素。可用的Web标准包括HTML、CSS、JS等的API可看这里
weex里可用的组件有:

  • <div> 最基本的容器标签。和HTML中的<div>相似,不过不能在里面直接添加文本,而要用<text>标签。 推荐自定义一个组件时在外层用一个<div>作为根容器。
  • <a> 组件定义了指向某个页面的超连接。它和HTML中的<a>标签类似,区别是不能直接在里面添加文本,而是要再嵌套一层<text>。同时它还支持所有通用样式包括flexboxposition等,这与HTML中的<a>标签完全不同。
  • <text> 用于渲染文本,可以用{{}}来插入变量值。 可以用line="3"来指定文本为三行。
  • <textarea> 可以当作是允许多行的<input>标签。用row=3来设置高数限制。
  • <video><image>用来插入媒体。
  • <web>用于在weex页面中嵌入一张网页内容,和HTML中的<iframe>作用类似。
  • <switch> 类似iPhone中飞行模式的按钮。
  • <input>
  • <list>垂直列表功能的组件,<cell>为其子组件。
  • <scroll> 内部子组件可滚动的容器。
  • <slider>轮播图,<indicator>为指示器。
  • <loading>上拉加载功能。<refresh>下拉刷新功能。不过都需要是<scroll><list>的子组件才能被正确渲染。

内建模块

weex里的模块应该也是对原生开发语言的一些方法或是库的引用或封装。比如如果要引用dom模块,需要用const dom=weex.requireModule('dom')的方式加载。可用的模块有:

  • animation动画效果。使用方法为animation.transition(el,options,callback)el为对元素的引用,不过需要通过vue中的this.refs.element来引用。option是过渡效果的时间、样式变化等的配置项,callback为回调函数。
  • picker用于数据选择、日期选择、日间选择等。pick(options,callback)
  • WebSocket
  • clipboard模块用getString(callback)setString(callback)来从系统的粘贴板中获取内容或者是设置内容。
  • dom。目前来说除了scrollToElement(node,options)没有其他用处。
  • modal用于展示消息框如toast、alert、confirm、prompt等。
  • navigator用于切换页面,同时可以指定动画效果。
  • storage与前端的数据存储类似,不过没有大小的限制。
  • stream用于实现网络请求。使用为fetch(options, callback[,progressCallback])
  • webview模块,用于配合<view>组件使用的。
  • globalEvent为全局事件模块,不过就算前端DOM3级事件中的Event事件对象我也很少用到。

其他

当然weex还有其他一些重要接口,不过没有移动应用开发经验的我不是很理解。JS Service是非常强大也很危险的功能,需要有一定的移动开发的经验。如果开发者水平足够的话,还可以扩展JS framework。为了方便调试还可以把Devtools集成到Android应用中。

weex入门的更多相关文章

  1. weex入门篇

    weex入门篇 Weex 致力于使开发者能基于当代先进的 Web 开发技术,使用同一套代码来构建 Android.iOS 和 Web 应用. weex SDK 集成了vueJS,Rax,不需要额外引入 ...

  2. Weex入门与进阶指南

    Weex入门与进阶指南 标签: WeexiOSNative 2016-07-08 18:22 59586人阅读 评论(8) 收藏 举报 本文章已收录于:  iOS知识库  分类: iOS(87)  职 ...

  3. iOS 集成Weex入门教程

    前言 自Weex发布伊始, 其口号 "Write Once, Run Everywhere"就吸引了大批前端与客户端程序猿纷纷入坑, 我也不能独善其中. 就我目前所学习Weex的经 ...

  4. Weex入门指南

    背景 由于公司项目需要,需求变化频繁,计划总改不上变化,由于app更新版本周期长,不能很好应对这种变化,正在此前提下热修复和热更新技术也有了发展的空间,不管热修复还是热更新,都是对app内容或者逻辑的 ...

  5. Weex入门篇——Mac 安装Weex

    相关文档:http://blog.csdn.net/jasonblog/article/details/51863173 前言 相比较于React Native的“Learn once, write ...

  6. weex入门(一)

    emmmm其实没有接触过weex ,了解一番发现有很多坑,有很多基于weex改良后的框架,比如weexplus等等,基本不用踩多少坑.经过几天的深思熟虑我觉得还是去踩坑,毕竟踩完坑才能真正的了解嘛 w ...

  7. Weex学习资料整合

    1.weex weex文档:http://weex.apache.org/cn/guide/index.html Weex Ui awesome-weex WEEX免费视频教程-从入门到放肆 (共17 ...

  8. 热门跨平台方案对比:WEEX、React Native、Flutter和PWA

    本文主要对WEEX.React Native.Flutter和PWA几大热门跨平台方案进行简单的介绍和对比.内容选自<WEEX跨平台开发实战> (WEEX项目负责人力荐,从入门到实战,教你 ...

  9. Java 学习文章汇总

    目前JAVA可以说是产业界和学术界最热门的语言,许多人都很急切想把JAVA学好. 但学习是需要步骤的,除非像电影中演的那样,能够把需要的专业技巧下载到脑海:主角只花了几秒下载资料,就马上具备飞行员的技 ...

随机推荐

  1. Map的迭代

    public static void main(String[] args) { Map<String, Integer> map = new HashMap<String, Int ...

  2. linux网口绑定笔记-bind

    模式0:balance-rr 模式1:active-backup 模式2:balance-xor 模式3:broadcast 模式4:802.3ad 模式5:balance-tlb 模式6:balan ...

  3. c的旅程---字符

    输出菱形实验: /***************** 2017年四月十六. 第一个例子,输出菱形.就是找关系. 这是当n= 3时, * *** * ******************/ #inclu ...

  4. zabbix主动上报的python脚本

    本代码linux.window平台通用. 不过我遇到一个Windows2008缺少运行库的提示,可能这个是Python3.6开发的.需要安装vc2015运行库吧.我没调试成功. linux平台还可以监 ...

  5. JQuery 中关于插入新元素的方法

    关于JQuery插入新内容的方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - ...

  6. js判断字符串是否全为空(使用trim函数/正则表达式)

    我们需要判断用户输入的是否全是空格,可以使用以下方法: 方法一: 使用trim() /* 使用String.trim()函数,来判断字符串是否全为空*/ function kongge1(test) ...

  7. cmd 命令行模式操作数据库 添加查询 修改 删除 ( 表 字段 数据)

    一 查看数据库.表.数据字段.数据 1 首先配置环境变量 进入mysql  或者通过一键集成工具 打开mysql命令行  或者mysql 可视化工具 打开命令行 进入这样的界面   不同的机器操作不同 ...

  8. 分针网—IT教育: jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  9. 小谈ThinkPHP

    ThinkPHP也是一个MVC框架,分视图.控制器和模型,和Yii框架相比相对较好理解,并且是轻量级的框架(相对于Yii来说),在使用Yii框架时候如果将框架放在项目文件中,用编辑器打开文件都比较慢, ...

  10. Echarts环形进度使用 【1 简单的使用示例】

    使用中说明几点属性:  hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互//这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等 ...