玩Android 快应用已经开源啦~

npm install -g hap-toolkit

npm config set registry https://registry.npm.taobao.org

hap -V

hap init <你的项目名称>

├── node_modules
├── sign                      rpk包签名模块
│   └── debug                 调试环境
│       ├── certificate.pem   证书文件
│       └── private.pem       私钥文件
├── src
│   ├── Common                公用的资源文件和组件文件
│   │   └── logo.png          manifest.json中配置的icon
│   ├── Demo                  页面目录
│   |   └── index.ux          页面文件，文件名不必与父文件夹相同
│   ├── app.ux                APP文件（用于包括公用资源）
│   └── manifest.json         项目配置文件（如：应用描述、接口申明、页面路由等）
└── package.json              定义项目需要的各种模块及配置信息，npm install根据这个配置文件，自动下载所需的运行和开发环境

npm install

npm run build

npm run watch

// 默认端口12306
npm run server
// 自定义端口,比如8080
npm run server -- --port 8080

npm run watch

adb logcat -s JsConsole// JsConsole是过滤信息，因为在as看到快应用日志输出都有JsConsole这个标记，所以直接使用这个查看快应用日志，就不会被手机其他日志干扰

{
  "package": "cn.codebear.wanandroid", //应用包名
  "name": "wanandroid", //应用名称
  "versionName": "1.0.0", //版本名称
  "versionCode": "1", //版本号
  "minPlatformVersion": "101", //支持的最小平台版本号
  "icon": "/Common/Image/logo.png", //应用logo
  "features": [ //接口列表
    { "name": "system.prompt" },
    { "name": "system.router" },
    { "name": "system.shortcut" },
    { "name": "system.fetch" },
    { "name": "system.webview" },
    { "name": "system.storage" }
  ],
  "permissions": [
    { "origin": "*" }
  ],
  "config": { //系统配置信息
    "logLevel": "debug"
  },
  "router": { //路由信息
    "entry": "Wanandroid",
    "pages": {
      "Wanandroid": {
        "component": "index"
      },
      "Webview": {
        "component": "index"
      }
    }
  },
  "display": { //UI显示相关配置
    "titleBar": true,
    "titleBarBackgroundColor": "#24b9ff",
    "titleBarTextColor": "#ffffff",
    "titleBarText": "首页",
    "pages": {
    }
  }
}

<template>
    <div class="wanandroid-page">
      <div class="flexible-tabs">
        <tabs onchange="changeTabactive" index="{{currentIndex}}">
          <tab-content class="flexible-tab-content">
            <div class="tab-content-section">
              <home></home>
            </div>
            <div class="tab-content-section">
              <classify></classify>
            </div>
          </tab-content>
        </tabs>
        <div class="flexible-tabbar">
          <div for="{{(index, item) in tabItems}}" class="tab-item" onclick="clickTabBar(index)">
            <image class="tab-icon" src="{{item.icon[currentIndex === index ? 1 : 0]}}"></image>
            <text class="{{currentIndex === index ? 'active' : 'tab-text'}}">{{item.text}}</text>
          </div>
        </div>
      </div>
    </div>
  </template>
  <import name="home" src="../Home/index"></import>
  <import name="classify" src="../Classify/index"></import>
    <script>
    import router from '@system.router'
    export default {
      data() {
        return {
          currentIndex: 0,
          tabItems: [
            {
              text: '首页',
              icon: ['../Common/Image/icon_home.png', '../Common/Image/icon_home_select.png']
            },
            {
              text: '体系',
              icon: ['../Common/Image/icon_classify.png', '../Common/Image/icon_classify_select.png']
            }
          ]
        }
      },
      changeTabactive (evt) {
        this.changeCurrent(evt.index)
      },
      clickTabBar (index) {
        this.changeCurrent(index)
      },
      changeCurrent(index) {
        this.$page.setTitleBar({ text: this.tabItems[index].text })
        this.currentIndex = index
      }
    }
  </script>

<list-item type="banner">
    <swiper class="banner" autoplay="true" interval="4000">
        <stack class="banner" for="{{bannerlist}}">
            <image class="banner-image" src="{{$item.imagePath}}" onclick="openArticle($item.url, '', $item.title)"></image>
            <text class="banner-title">{{$item.title}}</text>
        </stack>
    </swiper>
</list-item>

<!-- 文章 -->
<block for="articleList">
  <list-item type="article" class="article-item" onclick="openArticle($item.link, $item.projectLink, $item.title)">
    <div>
      <text class="tag" show="{{$item.fresh}}">新</text>
      <text class="text-title">{{$item.title}}</text>
    </div>
    <div class="article-tip">
        <text class="tip">分类: {{$item.superChapterName}}/{{$item.chapterName}}</text>
    </div>
    <div class="article-tip">
      <text class="tip">作者: {{$item.author}}</text>
      <text class="time">{{$item.niceDate}}</text>
    </div>
  </list-item>
</block>

<!-- 加载更多，type属性自定义命名为loadMore -->
<list-item type="loadMore" class="load-more">
  <progress type="circular" show="{{hasMoreData}}"></progress>
  <text show="{{hasMoreData}}">加载更多</text>
  <text show="{{!hasMoreData}}">没有更多了~</text>
</list-item>

<web src="{{ url }}" id="web"></web>

<script>
  import fetch from '@system.fetch'
  ...
  getBanner() {
      fetch.fetch({
        url:"http://www.wanandroid.com/banner/json",
        success:function(data){
          this.bannerlist = JSON.parse(data.data).data;
        }.bind(this),
        fail: function(data, code) {
          console.log("handling fail, code=" + code);
        }
      })
    }
   ...