BYR Achieve · 镜像论坛

很多做移动的开发的同学都希望有一种能力，那就是掌握三端开发。这三端是指iOS、Android、Web。但是一个人在短时间内掌握三端的技术是特别难的事儿，开发三端的应用也是特别耗时的事儿。这往往阻止了一批极客同学，阻止了一批想成为独立开发者的同学。同时，有时候，我们新增一个功能。需要成天祈祷，等待审核通过，尤其是 Apple 审核。这一切都是我们不想看到的。发一个新功能，修复一个bug还要不断发版本，多费事。于是，阿里在多年的实践的基础上开源了一个移动应用框架，那就是WEEX。 WEEX框架不仅可以做到动态发布、跨平台开发，还能确保高性能的体验。看到这里，想想都有些激动。那么，WEEX的跨平台体现在哪儿呢？首先，就是写一套代码，能够运行在三端的平台上。也就是说开发者一套代码可以开发出iOS、Android、Web应用。还有一个比较兴奋的点就是：不需要学习其他语言、语法，掌握基本的 Web 开发知识即可。例如HTML, CSS, JavaScript。 Weex还能确保高性能。 Weex 的UI呈现都是 Native UI，也就是 Android/iOS 的UI组件，这样性能酒会更高，体验就会更好。具体的细节，这里就不过多展开了。好处这么多，那到底一天能否完成一个简单App的开发呢？我的答案是：能！但是需要，明确三点： 1）简单App, “简单”两个字。如果你拿一个ERP App来难为我，我是不理你的，我会躲着，惹不起。 2）有一些编程经验的基础。如果编程基础都不了解，我只能说学点Web，再来开发也不迟。 3）服务端是已经开发好的，跟WEEX App开发无关，这个应该能理解。说了这么多，那么我们就来尝试开发一款App。 [WEEX 环境搭建] -------------------------------------------------------- 首先，我们需要熟悉 WEEX。很多时候搭建环境会成为大家的拦路虎，因此这里提供两篇文章做参考： weex初体验了解Weex源码结构，修改example 有兴趣的，还可以阅读《WEEX快速入门指南》： https://github.com/vczero/weex-learning [WEEX 基础语法] -------------------------------------------------------- 首先，我们需要简单了解下 WEEX 的基础语法。首先，WEEX 语法跟 Web 特别近，是其子集。 1.基本格式 WEEX 文件的后缀是.we. 因此，大家很可能是第一次遇到 .we 的文件。但是不用担心，WEEX还是很简单的。同时，WEEX 是组件化的。我们来看一下简单的代码： 1)template 是我们的视图模版，类似于 HTML 标签。但是他们目前不是 HTML标签，我们可以称作为组件。例如，在 Web 中我们可以在div中显示文字，在span中也可以显示文字。但是 WEEX 显示文本的组件是text 和 input，其他的是不行的。同时，在 Native 会对应相应的组件，例如在 iOS 中，template中的 text 组件会解析成 UIText。 2）style标签内部是我们熟悉的 Web类样式。同时我们可以在组件上使用内联样式，例如： 3) script标签是逻辑代码。 2.注意点 1）样式目前不支持 id 选择器，只支持类样式和内联样式。 2）样式支持范围有限，是 CSS 样式的子集，可以到 WEEX 文档官网查阅。 3）我们建议宽度和高度不写单位“px”。 4）事件绑定可见上面代码，例如“onclick”，但是每个组件支持的事件有哪些？根据WEEX 文档官网而定。 [确定目标] -------------------------------------------------------- 了解完了基础知识，那么我们需要确定一个可以完成的目标，那就是一个阅读的App。该App包含几个功能：阅读分类阅读的文章列表文章内容详情 OK，我们的目标比较简单，但是基本流程也有了。就是这么实诚，才不会拿 ERP 系统来开发呢，那不是开自己玩笑嘛。目标已定，那么开发这么一款 App 需要掌握 WEEX 到什么程度呢？答案是：基本熟练即可。整个项目参考地址：https://github.com/vczero/weex-yy [完成效果预览] -------------------------------------------------------- [开发分类页面（首页）] -------------------------------------------------------- 首先，我们可以看到，首先上面有几个组件：搜索组件专题分类轻松一刻因此，我们创建如下文件： search.we recommend.we hot-recommend.we category.we hr.we 因为这些代码都偏多，这里以搜索组件举例：其他文件可以参考：https://github.com/vczero/weex-yy/tree/master/reading。因此，我们完成了以上组件，在 index.we 入口组件中 require 这些组件模块。示例代码如下： recommend、search、hr、hot-recommend就是我们引入的组件。具体的代码可以参考： https://github.com/vczero/weex-yy/blob/master/index.we [列表组件] -------------------------------------------------------- 我们需要讲新闻或者文章展示成列表。因此我们可以使用 list 组件。这里的代码是使用这样，我们就可以了解模板循坏。具体代码可以参考： https://github.com/vczero/weex-yy/blob/master/reading/list.we [详情页] -------------------------------------------------------- 我们这里使用Webview展示文章。因此，这里定义了一个yywebview的组件，该组件是基于 WEEX web 组件定制的。代码如下： [需要关注的地方] -------------------------------------------------------- 1）数据请求 WEEX 提供了 stream 模块进行网络数据请求。例如： 2) 页面跳转页面跳转，我们使用 navigator组件，示例代码如下：其中 url 需要中的 this.baseURL 需要根据是 Android／iOS 还是 Web环境确认，因此，具体代码参考： https://github.com/vczero/weex-yy/blob/master/reading/category.we [结语] -------------------------------------------------------- OK, 我们整个App的代码就是这么多。那么如何运行该项目呢，具体可以参考： https://github.com/vczero/weex-yy 里面有详细的说明。整个App的开发呢，也是边学边做，大概完整的开始时间是7～8小时。所以，用一天开发这个简单的App还是完全可以的。并且，我们相信大家会花的时间会更少，App的功能会更多。 [其他重要参考] -------------------------------------------------------- 一、科普 & 全局 1.阿里宣布开源Weex ，亿级应用匠心打造跨平台移动开发工具: http://mp.weixin.qq.com/s?__biz=MzAxNDEwNjk5OQ==&mid=502916405&idx=1&sn=7335da43c20797367dba8512a7f2dfc3&scene=18#wechat_redirect 2.Weex：JS&Web能力拓展万物互联的探索 http://developer.51cto.com/art/201608/516465.htm 3.官网： http://alibaba.github.io/weex/ 二、语法、API、组件篇 1.数据绑定：https://github.com/weexteam/article/issues/5 2.样式和类：https://github.com/weexteam/article/issues/6 3.语法综述：https://github.com/weexteam/article/issues/8 4.事件绑定：https://github.com/weexteam/article/issues/15 5.组件封装：https://github.com/weexteam/article/issues/2 6.找节点：https://github.com/weexteam/article/issues/3 其他参考：https://github.com/weexteam/article/issues 三、源码源码：https://github.com/alibaba/weex 浏览完如此丰富的实战干货，你渴望独立开发app的心是否也蠢蠢欲动了呢？别急，我们还为你准备了一个挥洒才华的舞台！ ---- 由阿里巴巴高校联盟主办的WEEX竞赛也即将开赛了！！在这个舞台上，你将有机会和各位极客大牛交流切磋，赢得丰厚大奖，实现你的极客梦想~ 具体的报名信息随后会在我们的论坛及微信公众号上公布~ 欢迎大家踊跃参赛，这样难得的实战机会你不容错过！！！阿里巴巴高校联盟微信公众号二维码：

【干货！】你想过一天开发一个简单App吗？