阿里Weex | 一天开发一个简单的APP

Posted 计苑菁英

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了阿里Weex | 一天开发一个简单的APP相关的知识，希望对你有一定的参考价值。

干货


阿里独家weex技术分享，教你秒变大神，一天完成app开发，更有阿里weex竞赛预告，等待你来挥洒才华，实现你的极客梦想！

敬请关注10月20日18:30阿里weex团队复旦大学宣讲活动，精彩大礼等着你！



你想过一天开发一个简单的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更多细节参考： http://alibaba.github.io/weex/index.html。

Hello world

现在的开发方式，不像以前我们直接1个html文件就可以的。任何工程化的体系都有相配套的工具。因此，面对安装工具，我们第一个心态应该是平静，秉着一颗提高效率的心情来使用。

第0步：安装Node.js

如何安装，这里不赘述了，可以直接到Node.js官网下载安装。安装Node.js的同时会帮助我们安装好npm。 初步安装的同学可以使用:

$ node -v
v6.3.1$ npm -v3.10.3

node -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      

http://127.0.0.1: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 | 一天开发一个简单的APP

weex中支持style和class来设定样式。但是font-size：160后面没有px。因此，css需要统一web和Native。weex做了兼容和取舍，目前支持的样式如下： http://alibaba.github.io/weex/doc/references/common-style.html （当然，这块个人不建议需要好好理解下，不是写什么样式都是支持的）。web的布局系统和引擎需要移植到多端还是很有挑战的，RN目前的实现也是一部分，Weex相对还实现了部分重要的属性，例如position:fixed。

第6步：.html文件载体在哪

我们既然运行了程序，那么一定有一个.html作为程序入口。其实，weex-toolkit给我们生成了相关文件。我们可以到hello.we同级目录下查找，就会发现有一个weex_tmp文件。该文件夹就是生成的可以执行的浏览器代码。

第7步：最佳实践

  1. 能否去掉div标签？
    明确的说，这个容器层是需要的。同时，只能有一个根节点。

  2. 能否直接在div里写文字，像web一样？
    答案是不可以，因为text组件是用来渲染文本的。在weex或者react native中，类似的这些标签不再是html元素了，而是组件。组件的意思是，每个组件承载各自的功能，区分明显；不像web那样自由。这就是首篇提到规范和约束。

  3. 能否使用一些其它样式作为H5补充呢？
    可以的。建议把样式直接写到index.html文件里面，不要写到.we文件中。这样就可以让样式只在浏览器里渲染，不影响Native。

  4. 其它组件有哪些？哪些组件可以使用？
    建议参考： http://alibaba.github.io/weex/doc/
    没有的组件就不能使用了，例如span。

约束和规范只是让我们可以更好的工程化，别无其它。


第二篇 了解Weex源码结构，修改example

其实，前面一节，我们发现，写一个简单的带有样式的界面还是挺简单的。这一节，我们不学习如何去了解一个工程，我们去学习了解官方的github代码库。一方面，可以让大家体验修改Demo的乐趣，同时可以大家可以直观的了解一个开源代码库的结构。

1. 下载Weex源码

首先，你得安装了git。至于如何安装git，可以google/baidu了。Mac OSX的同学可以使用brew命令安装。如果没有brew，请先安装homebrew。
这里，就当作大家git 命令和基础知识已经准备妥当。

打开：https://github.com/alibaba/weex 网站，就可以看到weex的源码。我们使用git克隆代码到本地：

$ git clone https://github.com/alibaba/weex.git    

2.了解源码结构

代码下载完成了，那么我们看一下源码的目录结构。
阿里Weex | 一天开发一个简单的APP

这里说几个比较重要的目录和文件：

  • package.json : node_modules依赖，更重要的是里面包含了npm run xxx 等快捷命令。比如之前我们运行node.js程序是这样的：$ node xx.js。这里我们可以把它配置化，例如package.json文件中的：
    阿里Weex | 一天开发一个简单的APP

  • start文件: 启动程序文件，里面包换编译和启动脚本：

    #called by native   
THIS_DIR=$(dirname "$0")
pushd "$THIS_DIR"

npm run build:native
npm run build:browser
npm run serve &
npm run dev:examples

popd

其中npm run就是执行package.json中的定义好的脚本别名。

  • examples: 示例Demo

  • android/ios/html： 各平台代码

  • build：打包各平台的脚本，配置在package.json中。

3.跑起程序

以下摘录weex github仓库README.md，按照下面步骤即可跑起来。

Android

  1. Prerequisites

    1. npm install, install project

    2. ./start

    3. Install Node.js 4.0+

    4. Under project root

    5. Install Android Environment

  2. Run playground, In Android Studio

    1. Open android/playground

    2. In app/java/com.alibaba.weex/IndexActivity, modify CURRENT_IP to your local IP

    3. Click 阿里Weex | 一天开发一个简单的APP (Run button)

  3. Add an example

Runtime

On Android Platform , Weex code is executed in weex_v8core which is based on Google V8 JavaScript engine.

iOS

  1. Prerequisites

    1. npm install, install project

    2. ./start

    3. Install Node.js 4.0+

    4. Under project root

    5. Install iOS Environment

    6. Install CocoaPods

  2. Run playground

    1. cd ios/playground

    2. pod install

    3. Open WeexDemo.xcworkspace in Xcode

    4. Click 阿里Weex | 一天开发一个简单的APP (Run button) or use default shortcut cmd + r in Xcode

    5. If you want to run the demo on your device. In DemoDefine.h(you can search this file by Xcode default shortcutcmd + shift + o), modify CURRENT_IP to your local IP

运行的结果，如下图：
阿里Weex | 一天开发一个简单的APP
但是，我们也希望在浏览器中看到效果，那么输入如下网站也可：

http://127.0.0.1:12580        

4.修改example

阿里Weex | 一天开发一个简单的APP
其中index.we是入口文件。因此可以在example中增加一个文件。然后在index.we中增加一个name和title。
阿里Weex | 一天开发一个简单的APP

点击模拟器刷新按钮即可查看效果。

5.如何学习

到这里基本上已经可以修改个钟demo，查看各种效果。当不了解一个组件和api如何使用时，查阅官方文档和阅读Demo就显得尤为重要。



有兴趣的，还可以阅读《WEEX快速入门指南》：https://github.com/vczero/weex-learning

2
WEEX基础语法




首先，我们需要简单了解下 WEEX 的基础语法。首先，WEEX 语法跟 Web 特别近，是其子集。




基本格式

WEEX 文件的后缀是.we. 因此，大家很可能是第一次遇到 .we 的文件。但是不用担心，WEEX还是很简单的。同时，WEEX 是组件化的。我们来看一下简单的代码：

<template>
  <div class="container" onclick="goWeexSite" >
    <div class="cell">
        <image class="thumb" ></image>
        <text class="title">{{title}}</text>
    </div>
  </div>
</template>

<style>
  .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; }
</style>

<script>
module.exports = {
    data: {
      title: 'JavaScript'
    },
    methods: {
      goWeexSite: function () {
        this.$openURL('http://alibaba.github.io/weex/')
      }
    }
}
</script>

1) template 是我们的视图模版，类似于 HTML 标签。但是他们目前不是 HTML标签，我们可以称作为组件。例如，在 Web 中我们可以在div中显示文字，在span中也可以显示文字。但是 WEEX 显示文本的组件是text 和 input，其他的是不行的。同时，在 Native 会对应相应的组件，例如在 iOS 中，template中的 text 组件会解析成 UIText。
      2）style标签内部是我们熟悉的 Web类样式。同时我们可以在组件上使用内联样式，例如：

<div style="width:50;height:50;"></div>  

3) script标签是逻辑代码。

注意点

1）样式目前不支持 id 选择器，只支持类样式和内联样式。
       2）样式支持范围有限，是 CSS 样式的子集，可以到 WEEX 文档官网查阅。
      3）我们建议宽度和高度不写单位“px”。
      4）事件绑定可见上面代码，例如“onclick”，但是每个组件支持的事件有哪些？根据WEEX 文档官网而定。

3
确定目标

了解完了基础知识，那么我们需要确定一个可以完成的目标，那就是一个阅读的App。该App包含几个功能：

  • 阅读分类

  • 阅读的文章列表

  • 文章内容详情

OK，我们的目标比较简单，但是基本流程也有了。就是这么实诚，才不会拿 ERP 系统来开发呢，那不是开自己玩笑嘛。目标已定，那么开发这么一款 App 需要掌握 WEEX 到什么程度呢？答案是：

4
完成效果预览




阿里Weex | 一天开发一个简单的APP

阿里Weex | 一天开发一个简单的APP




5
开发分类页面（首页）

首先，我们可以看到，首先上面有几个组件：

  • 搜索组件

  • 专题分类

  • 轻松一刻

因此，我们创建如下文件：

  • search.we

  • recommend.we

  • hot-recommend.we

  • category.we

  • hr.we

因为这些代码都偏多，这里以搜索组件举例：

<template>
  <div style="height:80; margin-top:25;">
    <input class="search" type="text"  placeholder="搜索"></input>
  </div>
</template>

<style>
 .search {
   height:75;
   padding-left:20;
   font-size:30;
   border-width:1;
   border-color:#C1C1C1;
   margin-left:10;
   margin-right:10;
   outline:none;
   border-radius:5;
   placeholder-color:#393939;
   font-weight: 200;
 }
</style>

其他文件可以参考：https://github.com/vczero/weex-yy/tree/master/reading 。
因此，我们完成了以上组件，在 index.we 入口组件中 require 这些组件模块。示例代码如下：

<template>
  <div>
      <search></search>
      <hr></hr>
      <scroller class="scroller">
         <recommend recommend="{{recommendTopic}}"></recommend>
         <hr></hr>
         <text class="title-big">热门推荐</text>
         <hot-recommend hot-recommend="{{hotRecommend1}}"></hot-recommend>
         <hot-recommend hot-recommend="{{hotRecommend2}}"></hot-recommend>

         <hr></hr>
         <text class="title-big">专题分类</text>
         <category list="{{category1}}"></category>
         <category list="{{category2}}"></category>

         <hr></hr>
         <text class="title-big">轻松一刻</text>
         <hot-recommend hot-recommend="{{cookies1}}"></hot-recommend>
         <hot-recommend hot-recommend="{{cookies2}}"></hot-recommend>

         <div style="height:50;"></div>
      </scroller>
      
  </div>
</template>
<style>
    ...
</style>
<script>
    require('./components-add/tabbar.we');
    require('./reading/search.we');
    require('./reading/hr.we');
    require('./reading/recommend.we');
    require('./reading/hot-recommend.we');
    require('./reading/category.we');
    ...
</script>

recommend、search、hr、hot-recommend就是我们引入的组件。具体的代码可以参考：
https://github.com/vczero/weex-yy/blob/master/index.we 

5
列表组件

我们需要讲新闻或者文章展示成列表。因此我们可以使用 list 组件。这里的代码是使用

 <div repeat="{{list}}" class="row-item" onclick="gotoPage" title="{{title}}" url="{{url}}">...</div>  

这样，我们就可以了解模板循坏。具体代码可以参考：
https://github.com/vczero/weex-yy/blob/master/reading/list.we 

6
详情页

我们这里使用Webview展示文章。因此，这里定义了一个yywebview的组件，该组件是 基于 WEEX web 组件定制的。代码如下：

<template>
    <div class="wrapper">
        <web class="web"  style="height:{{height}};" onpagestart="pagestart" onpagefinish="pagefinish" onerror="error"></web>
    </div>
</template>


<style>
    .text{
        font-size:26;
    }

    .web{
        flex:1;
    }
</style>
<script>
    require('./components-add/wxc-navpage.we');
    //background-color="#0A60FE" title-color="#fff" left-item-color="#fff"
    module.exports = {
        data: {
            src: '',
            width: 0,
            height: 0,
            src: '',
            title: '测试页面',
            leftTitle:'',
        },
        created: function(){
            var config  = this.$getConfig();
            this.width = config.env.deviceWidth;
            this.height = config.env.deviceHeight;
            var url = config.bundleUrl;
            this.src = this._getUrl(url, 'weixin_url');
            this.title = decodeURIComponent(this._getUrlParam(url, 'weixin_title'));

            this.$on('naviBar.leftItem.click',function(e){
                //pop back
                var params = {
                    'animated' : 'true',
                }
                var navigator = require('@weex-module/navigator');
                navigator.pop(params, function(e) {});
            });
        },

        methods: {
            pagestart: function(){
                //TODO: loading
            },
            pagefinish: function(){
                //TODO: close loading
            },
            error: function(){
                //TODO: show infowindow
            },
            _getUrl: function(url, key){
                var isExits = url.indexOf(key);
                if(isExits > -1){
                    return url.split('url=')[1];
                }
            },
            _getUrlParam: function(url, key){
                var reg = new RegExp('[?|&]' + key + '=([^&]+)');
                var match = url.match(reg);
                return match && match[1];
            }
        }
    };

</script>
7
需要注意的地方

数据请求

WEEX 提供了 stream 模块进行网络数据请求。例如：

var that = this;
var stream = require('@weex-module/stream');
var url = 'http://xxxx.com/1.json';
stream.fetch({
  method: 'GET',
  url: url,
  type:'json'
}, function(response) {
    if(response.status == 200){
      //TODO:成功后进行数据处理
      }else{
       //TODO:
      }
    }else{
        //TODO:错误处理
    }
},function(err){
    //TODO:错误处理
});



页面跳转

页面跳转，我们使用 navigator组件，示例代码如下：

var navigator = require('@weex-module/navigator');
var params = {
    'url': this.baseURL + 'reading/list.js?type=' + type + '&title=' + title,
    'animated' : 'true',
}

navigator.push(params, function(e) {});

其中 url 需要中的 this.baseURL 需要根据是 Android／iOS 还是 Web环境确认，因此，具体代码参考：
https://github.com/vczero/weex-yy/blob/master/reading/category.we 



8
结束语

OK, 我们整个App的代码就是这么多。那么如何运行该项目呢，具体可以参考：
https://github.com/vczero/weex-yy
里面有详细的说明。
整个App的开发呢，也是边学边做，大概完整的开始时间是7～8小时。所以，用一天开发这个简单的App还是完全可以的。并且，我们相信大家会花的时间会更少，App的功能会更多。

9
其他重要参考

科普和全局


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  



以上是关于阿里Weex | 一天开发一个简单的APP的主要内容，如果未能解决你的问题，请参考以下文章

WEEX 来了，你知道吗？

他用Weex花两天时间开发出『One·一个』App

阿里巴巴开源Weex 开发教程

网易严选 App 感受 Weex 开发

阿里Weex，用Web方式开发Native应用

一份代码处处运行-阿里巴巴Weex