你想过一天开发一个简单的APP吗？
很多做移动的开发的同学都希望有一种能力，那就是掌握三端开发。这三端是指iOS、Android、Web。但是一个人在短时间内掌握三端的技术是特别难的事儿，开发三端的应用也是特别耗时的事儿。这往往阻止了一批极客同学，阻止了一批想成为独立开发者的同学。
同时，有时候，我们新增一个功能。需要成天祈祷，等待审核通过，尤其是 Apple 审核。这一切都是我们不想看到的。发一个新功能，修复一个bug还要不断发版本，多费事。
于是，阿里在多年的实践的基础上开源了一个移动应用框架，那就是WEEX。WEEX框架不仅可以做到动态发布、跨平台开发，还能确保高性能的体验。看到这里，想想都有些激动。
那么，WEEX的跨平台体现在哪儿呢？
首先，就是写一套代码，能够运行在三端的平台上。也就是说开发者一套代码可以开发出iOS、Android、Web应用。
还有一个比较兴奋的点就是：不需要学习其他语言、语法，掌握基本的 Web 开发知识即可。例如HTML, CSS, JavaScript。
好处这么多，到底能否一天开发出一个简单的APP呢？
我的答案是：能！但是需要，明确三点：
1）简单App, “简单”两个字。如果你拿一个ERP App来难为我，我是不理你的，我会躲着，惹不起。
2）有一些编程经验的基础。如果编程基础都不了解，我只能说学点Web，再来开发也不迟。
3）服务端是已经开发好的，跟WEEX App开发无关，这个应该能理解。
说了这么多，一起来尝试开发一款APP吧
1
WEEX环境搭建
首先，我们需要熟悉 WEEX。很多时候搭建环境会成为大家的拦路虎，因此这里提供两篇文章做参考：
第一篇weex初体验
很多话题已展开就是一本百科全书，但是，很多时候，直观、精简的方式是大家容易接受的。比如初学者学习V系的语言，拿着微软的MSDN是无从下手的。因此，我在尝试简短去描述或者介绍一个事物。这个也是我个人必须去抽象和提升的。
Weex是什么？
Weex是阿里开源的一套构建跨平台的移动框架。对于前端的同学，最直观的是web components的开发方式；对于Native同学，可以理解为使用web的开发方式构建跨平台移动程序（iOS & Android）。可以类比的是React Native，但是相对React Native更为彻底：不仅统一了 iOS/Android的差异，更是实现了三端的统一。2016年，weex值得去关注，因为目前移动端的痛点是需要被攻克的难题。而这一块也是大家孜孜不倦的努力探索的结果。
Weex更多细节参考： 。
Hello world
现在的开发方式，不像以前我们直接1个html文件就可以的。任何工程化的体系都有相配套的工具。因此，面对安装工具，我们第一个心态应该是平静xcode模拟器安装app，秉着一颗提高效率的心情来使用。
第0步：安装Node.js
如何安装，这里不赘述了，可以直接到Node.js官网下载安装。安装Node.js的同时会帮助我们安装好npm。 初步安装的同学可以使用:
$ node -v
v6.3.1$ npm -v3.10.3node -v 和 npm -v 命令来测试Node.js环境是否搭建成功。
第1步：安装weex-toolkit
这里使用npm来完成。因为npm之前已经安装好了。所以，直接拿来使用即可。
$ npm install -g weex-toolkit 如果发现很慢，说明是时候考虑使用cnpm来安装了。首先，我们全局安装cnpm：
$ npm install -g cnpm cnpm是一个国内npm镜像，可以提高下载速度。我们使用cnpm：
$ cnpm install -g weex-toolkit 备注：当然，可能会提示权限问题，这时候加上sudo关键字即可。例如：
$ sudo npm install -g weex-toolkit 然后输入你本机电脑密码即可。
weex-toolkit安装完成后，输入:
$ weex --version
info 0.4.4 说明，我们安装成功。
第2步：创建文件
weex程序的文件后缀（扩展名）是.we。因此我们创建一个.we的文件。Mac OSX的同学，可以使用touch命令创建文件。
$ touch hello.we 我们打开空白的hello.we文件，输入三个标签，内容为：
<template></template><style></style><script></script> 其实，这个时候，我们的程序完成了，就是这么简单粗暴。开发完成了，这段代码是不能直接跑的。我们都知道.html是可以直接运行的，这个程序呢，缺少了html的载体，同时只是xml的子集。那么，我们就需要使用weex-toolkit来编译我们的代码了。这里，使用weex命令编译hello.we文件。
$ weex hello.we 这时，会发现浏览器被打开了，浏览器地址是：
:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr
这是浏览器是空白的，因为我们没有添加任何实质的内容。
第3步：添加内容
我们修改weex.we文件，像 hello.we 的 template 添加内容。 weex.we文件内容如下：
<template>
<div>
<text>Hello world</text>
</div></template><style></style><script></script> 我们再次编译hello.we文件：
$ weex hello.we OK，我们会看到浏览器显示了：Hello world字样。
第5步：增加样式
我们给text增加样式，具体代码如下：
<template>
<div>
<text class="text" style="color:red;">Hello world</text>
</div></template><style>
.text{
font-size:160;
}</style><script></script> 细心的同学，会发现weex-toolkit帮我们重载了页面。浏览器可以看到红闪闪的大写的“Hello world”字样。
weex中支持style和class来设定样式。但是font-size：160后面没有px。因此，css需要统一web和Native。weex做了兼容和取舍，目前支持的样式如下： （当然，这块个人不建议需要好好理解下，不是写什么样式都是支持的）。web的布局系统和引擎需要移植到多端还是很有挑战的，RN目前的实现也是一部分，Weex相对还实现了部分重要的属性，例如position:fixed。
第6步：.html文件载体在哪
我们既然运行了程序，那么一定有一个.html作为程序入口。其实，weex-toolkit给我们生成了相关文件。我们可以到hello.we同级目录下查找，就会发现有一个weex_tmp文件。该文件夹就是生成的可以执行的浏览器代码。
第7步：最佳实践
能否去掉div标签？
明确的说，这个容器层是需要的。同时，只能有一个根节点。
能否直接在div里写文字，像web一样？
答案是不可以，因为text组件是用来渲染文本的。在weex或者react native中，类似的这些标签不再是html元素了，而是组件。组件的意思是，每个组件承载各自的功能，区分明显；不像web那样自由。这就是首篇提到规范和约束。
能否使用一些其它样式作为H5补充呢？
可以的。建议把样式直接写到index.html文件里面，不要写到.we文件中。这样就可以让样式只在浏览器里渲染，不影响Native。
其它组件有哪些？哪些组件可以使用？
建议参考：
没有的组件就不能使用了，例如span。
约束和规范只是让我们可以更好的工程化，别无其它。
第二篇 了解Weex源码结构，修改example
其实，前面一节，我们发现，写一个简单的带有样式的界面还是挺简单的。这一节，我们不学习如何去了解一个工程，我们去学习了解官方的github代码库。一方面，可以让大家体验修改Demo的乐趣，同时可以大家可以直观的了解一个开源代码库的结构。
1. 下载Weex源码
首先，你得安装了git。至于如何安装git，可以google/baidu了。Mac OSX的同学可以使用brew命令安装。如果没有brew，请先安装homebrew。
这里，就当作大家git 命令和基础知识已经准备妥当。
打开： 网站，就可以看到weex的源码。我们使用git克隆代码到本地：
$ git clone https://github.com/alibaba/weex.git 2.了解源码结构
代码下载完成了，那么我们看一下源码的目录结构。
这里说几个比较重要的目录和文件：
其中npm run就是执行package.json中的定义好的脚本别名。
3.跑起程序
以下摘录weex github仓库README.md，按照下面步骤即可跑起来。
Android
Prerequisites
npm install, install project
./start
InstallNode.js4.0+
Under project root
InstallAndroid Environment
Run playground, In Android Studio
Openandroid/playground
Inapp/java/com.alibaba.weex/IndexActivity, modifyCURRENT_IPto your local IP
Click
(Runbutton)
Add an example
Runtime
On Android Platform , Weex code is executed inweex_v8corewhich is based on Google V8 JavaScript engine.
iOS
Prerequisites
npm install, install project
./start
InstallNode.js4.0+
Under project root
InstalliOS Environment
InstallCocoaPods
Run playground
cd ios/playground
pod install
OpenWeexDemo.xcworkspacein Xcode
Click
(Runbutton) or use default shortcutcmd + rin Xcode
If you want to run the demo on your device. InDemoDefine.h(you can search this file by Xcode default shortcutcmd + shift + o), modifyCURRENT_IPto your local IP
运行的结果，如下图：
但是，我们也希望在浏览器中看到效果，那么输入如下网站也可：
http://127.0.0.1:12580 4.修改example
其中index.we是入口文件。因此可以在example中增加一个文件。然后在index.we中增加一个name和title。
点击模拟器刷新按钮即可查看效果。
5.如何学习
到这里基本上已经可以修改个钟demo，查看各种效果。当不了解一个组件和api如何使用时，查阅官方文档和阅读Demo就显得尤为重要。
有兴趣的，还可以阅读《WEEX快速入门指南》：
2
WEEX基础语法
首先，我们需要简单了解下 WEEX 的基础语法。首先，WEEX 语法跟 Web 特别近，是其子集。
基本格式
WEEX 文件的后缀是.we. 因此，大家很可能是第一次遇到 .we 的文件。但是不用担心，WEEX还是很简单的。同时，WEEX 是组件化的。我们来看一下简单的代码：
{{title}}
.cell { margin-top:10 ; margin-left:10 ; flex-direction: row; }
.thumb { width: 200; height: 200; }
.title { text-align: center ; flex: 1; color: #808080; font-size: 50; }
module.exports = {
data: {
title: 'JavaScript'
},
methods: {
goWeexSite: function () {
this.$openURL('http://alibaba.github.io/weex/')
}
}
}
1) template 是我们的视图模版，类似于 HTML 标签。但是他们目前不是 HTML标签，我们可以称作为组件。例如，在 Web 中我们可以在div中显示文字，在span中也可以显示文字。但是 WEEX 显示文本的组件是text 和 input，其他的是不行的。同时，在 Native 会对应相应的组件，例如在 iOS 中，template中的 text 组件会解析成 UIText。
2）style标签内部是我们熟悉的 Web类样式。同时我们可以在组件上使用内联样式，例如：
3) script标签是逻辑代码。
注意点
1）样式目前不支持 id 选择器，只支持类样式和内联样式。
2）样式支持范围有限xcode模拟器安装app，是 CSS 样式的子集，可以到 WEEX 文档官网查阅。
3）我们建议宽度和高度不写单位“px”。
4）事件绑定可见上面代码，例如“onclick”，但是每个组件支持的事件有哪些？根据WEEX 文档官网而定。
3
确定目标
了解完了基础知识，那么我们需要确定一个可以完成的目标，那就是一个阅读的App。该App包含几个功能：
OK，我们的目标比较简单，但是基本流程也有了。就是这么实诚，才不会拿 ERP 系统来开发呢，那不是开自己玩笑嘛。目标已定，那么开发这么一款 App 需要掌握 WEEX 到什么程度呢？答案是：
基本熟练即可。
整个项目参考地址：
4
完成效果预览
5
———END———
限 时 特 惠：本站每日持续更新海量各大内部创业教程，一年会员只需128元，全站资源免费下载点击查看详情
站 长 微 信：jiumai99
×