近期要做一个安卓端的原生应用程序。情况是这样的:需求方原先已经实现了网页,是一个工具类应用,大致作用是连接到他们公司生产的硬件,然后通手机与智能硬件通信来对硬件进行一系列控制。不过呢,这个网页先前是由工程师完成的,使用方式都是指令式的(比如连接服务器需要输入link server
,发送信号需要send signal
)。嗯,这很程序员。这反人性的操作让使用人员用了不久就深恶痛绝,正好又有需求上的变更,于是他司决定重写页面,同时为了方便员工的使用需要以安卓app的形式完成。
然而我只是个JSer啊!不过万能的JS表示移动端应用了也是小Case。本来我就一直对RN很感兴趣,但是现在时间紧迫,React Native的入门成本高,所以先尝试使用阿里的weex方案,待以后时机合适再学习RN的使用。
计划先过一遍weex的文档,然后研究weex团队写的移动端原生应用weex-hackernews,配合使用weex-pack、Weex Playground、weex-toolkit来开发安卓APP。另外还有weex.help和weex学院这两个社区供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-style
、border-color
等。 - weex同样基于盒模型,不过默认
box-sizing
为border-box
。 - 长度只支持像素值,不支持em、rem这样的相对单位。
- 选择器只支持单个class或者id,而不支持后代选择器、属性选择器等。
- weex默认且唯一的布局模型为
flex
,因此是靠flex-direction
、align-items
等css属性来布局。可以看看阮一峰的flex布局教程。 position
属性除了relative
、absolute
、fixed
外,还有stiky
,意为仅当元素滚动到页面元素外时,元素会固定在页面窗口的顶部。- weex不支持
z-index
,但靠后的元素层级更高,可以通过排列元素出现顺序来调整层级。 - Weex 支持四种伪类:
active
,focus
,disabled
,enabled
所有组件都支持active
, 但只有input
组件和textarea
组件支持focus
,enabled
,diabled
。 - weex支持渐变,不过现在只支持两种颜色的渐变。
按weex文档所说,可以以如下顺序规划weex的样式:
- 全局样式规划:将整个页面分割成合适的模块。
- flex 布局:排列和对齐页面模块。
- 定位盒子:定位并设置偏移量。
- 细节样式处理:增加特定的具体样式。
内建组件
虽然weex可以使用HTML和CSS中的一些标签,但实际上应该是对原生组件的封装,而非HTML元素。可用的Web标准包括HTML、CSS、JS等的API可看这里。
weex里可用的组件有:
<div>
最基本的容器标签。和HTML中的<div>
相似,不过不能在里面直接添加文本,而要用<text>
标签。 推荐自定义一个组件时在外层用一个<div>
作为根容器。<a>
组件定义了指向某个页面的超连接。它和HTML中的<a>
标签类似,区别是不能直接在里面添加文本,而是要再嵌套一层<text>
。同时它还支持所有通用样式包括flexbox
、position
等,这与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为全局事件模块,不过就算原生JS中Event事件对象我也很少用到。
其他
当然weex还有其他一些重要接口,不过没有移动应用开发经验的我不是很理解。JS Service是非常强大也很危险的功能,需要有一定的移动开发的经验。如果开发者水平足够的话,还可以扩展JS framework。为了方便调试还可以把Devtools集成到Android应用中。
——————————————
2017-10-10 上个月完成了一个钉钉微应用,是用weex写的原生应用,功能较简单,不过这番体验着实有趣~