【使用 Weex 和 Vue 开发原生应用】 2 编写独立页面

在配置完开发环境之后，就可以开始写应用了。在写应用之前，肯定会先划分好页面，一个一个独立着写的。

不过，首先要明确的是，使用 weex 写出来的是原生应用，页面的概念还和 web 上一样吗？

写的有些乱，与下边内容关系不太，不理解可以忽略。

weex 的实例在 web 上是和“浏览器页签”的概念相对应的，通常一个 weex 实例就是一个“页面”。

在 web 上，只要没有新开页签，网页中的各种跳转，都是记录在 <code>history</code> 对象中的，对于 weex 而言，这些都相当与在一个“页面”之内。在 native 上，页面的跳转是记录在 <code>navigator</code> 中的，内部也有一个栈来存储跳转记录，可以 <code>push</code> 、 <code>pop</code>。

想深入理解这方面的概念，还需要了解一些 native 开发的知识。原生开发里边，页面是个比较上层的概念，可以来回切换和销毁，在背后还有生命周期更长程序在运行，weex runtime 就运行在这一层里，多个 weex 的实例会共用一个 runtime。

因为 vue-router 的设计和实现都是在同一个页面内的，是 spa 概念里的产物。其实前端路由也是基于 spa 产生的概念，在 weex 或者原生应用这种多页跳转的场景里可能并不合适，慎重使用。虽然 weex-hackernews 项目里用了 vue-router ，但是依然在同一个 weex 实例中。相关话题我在 《使用 vue-router》这篇文章里详细再说。

这还要求你在 web 入口 html 文件里手动写上 <code>#root</code> 的标签：

至于 android 和 ios 平台，只要指定了 <code>el</code> 属性即可，属性值就无所谓了，weex 会默认将其挂载到容器根视图中（可由 native 端配置）。

简单来说，vue 在 weex 中使用的是“预编译”模式，只保留了运行时，不支持实时编译模板。简单来说，就是不支持下边几个特性：

定义组件时不支持使用 <code>template</code> 属性。

不支持使用 <code>x-templates</code>。

不支持使用 <code>vue.compile</code>。

写代码的过程和写其他 vue 2.0 项目是一样的，没什么可说的。但是既然说了是写原生应用，就要注意跨平台的问题，虽然 weex 抹平了很多差异，但是平台差异是客观存在的。web 和 android 和 ios 毕竟都不相同，想写跨平台的应用，了解平台差异还是很有必要的。

推荐阅读官方文档：

<a href="http://weex.apache.org/cn/references/platform-difference.html">《weex 和 web 平台的差异》</a>

大概摘录一下是这样的：

weex 环境中没有 dom

不支持 dom 操作，原生平台没有 dom 概念。

不区分事件的捕获阶段和冒泡阶段，相当于 dom 0 级事件。

weex 环境中没有 bom

没有 window 、screen 对象，可以通过 <code>wxenvironment</code> 获取设备环境信息。

没有 document 对象，没有选择器方法。

能够调用移动设备原生 api

可以通过模块调用设备原生 api，如 clipboard 、 navigator 、storage 等。

具体组件的使用方法参考官方文档。

<a href="http://weex.apache.org/cn/references/components/index.html">weex 支持的组件列表</a>

css 的属性特别多，写法也特别多，能力很强大，也有很多坑。一方面新标准在不断的提出，像 css grid 和 houdini 这些概念也逐渐受到关注；另一方面旧标准是很难再废除的，新旧语法总能摩擦出各种奇葩的行为，css 也是容易滋生“奇技淫巧”的地方，也有各种关于“最佳实践”的话题，很多人乐于此道。浏览器内部为了处理这些边界情况肯定用了大量“特殊技巧”。

支持基本的盒模型。

支持 <code>position</code> 定位布局。

支持使用 <code>flexbox</code> 布局。

使用限制

只支持单个类名选择器，不支持关系选择器，也不支持属性选择器。

默认是组件级别的作用域，没有全局样式。

不支持样式继承（因为有作用域隔离）。

考虑到样式的数据绑定，样式属性暂不支持简写。