对标小程序 ? "快应用"开发入门指南

本文已在个人公众号：hongyangAndroid原创首发。

1、快应用的出现

3月20日，中国通讯院等协会联合包括小米、华为、OPPO等手机厂商，共同在北京正式发布名为「快应用」的新型应用形态协议。

原本没怎么关注，不过就在今天，意外在小米、华为在看到了快应用的身影。当看到饿了么的快应用的时候，才为之震惊，体验至关好，仔细查看布局也为原生布局。

咱们一块儿看一下，在小米应用商店，搜索饿了么：

能够看到下面的秒开，打开后我录制了一个gif:

基本上已经能知足快速的须要了，整理体验很是不错，特地开了下布局看了下：

原生控件，底部的列表，你还能够看到是个RecyclerView...

固然饿了么的微信小程序作的也不错，不过微信小程序并不是转化为原生组件。

并不是只有饿了么，已经上线了很多快应用，恰好身边还有部华为，华为的快应用入口为：

华为应用市场，搜索:快应用。

点击查看更多：

能够看到一批应用的快应用已经上线了。

关键是体验至关不错，体积也很小。

以前小米称之为“直达服务”，先官网已经修改其名称为快应用https://dev.mi.com/console/app/newapp.html

虽然你们多数都为Android开发者，所幸的是开发一个快应用并不复杂，下面咱们带你们一块儿入门一个玩Android的快应用。

2、上手开发快应用

官网：https://www.quickapp.cn/ 开发文档：https://doc.quickapp.cn/

既然是入门教程，重点实际上是环境搭建和基础的使用，因此咱们的形态是：

• 显示一个文字列表，支持上拉加载
• 点击单个文章，跳转到详情页

2.1 搭建环境

环境搭建能够直接参考开发文档，基本同样

2.1.1 安装nodejs

因为本人是MAC，如下教程针对MAC。

首先须要安装nodejs，注意官网上提示版本须要6.0以上，8.0如下。

我装了个7.0，你能够点击这里下载安装：

https://nodejs.org/en/blog/release/v7.0.0/

2.1.2 安装hap-toolkit

npm install -g hap-toolkit
复制代码

安装完成后，能够经过

hap -V
复制代码

查看是否安装成功，成功的话会输出0.0.26相似版本号。

到这里恭喜你完成了环境搭建。

2.2 建立HelloWorld

选择一个合适的文件夹，输入：

hap init <ProjectName>
复制代码

为你的项目名称。

完成后会显示：

prompt: Init your Project:  (helloworld) 
复制代码

继续输入你的项目命名的目录名称，别傻傻等着。

而后等待建立完毕。

能够看到：

而后，切到helloword目录，执行命令行：

npm install

复制代码

运行以下命令安装依赖包（webpack，babel等）。

再执行：

npm run build

复制代码

便可在dist目录下生成rpk包。

官网提示：若是报错遇到Cannot find module '.../webpack.config.js'，请从新执行一次hap update --force。这是因为高版本的npm在npm install时，会校验并删除了node_modules下部分文件夹，致使报错。而hap update --force会从新复制hap-toolkit文件夹到node_modules中

有了rpk包以后，你确定要想怎么安装呀！！！

2.3 安装生成的包

你须要安装：

2.3.1 手机安装调试器

https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803200129552999556.apk

点击后是个apk，安装到手机上：

你会发现，你安装上以后，什么也干不了，颜色都是灰的。很正常，你还须要安装一个平台。

若是你发现你按钮均可以点击，那么忽略下面的安装平台步骤。

2.3.2 手机安装平台预览版

别担忧，依赖是个apk。

点击下载：https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803200130021102030.apk

安装完成后是：

你安装完成后应该是个白板，啥也没有，正常。

此时，你回到以前的安装调试器apk，会发现按钮均可以点击了。

2.3.3 第一次安装

还记得刚才helloworld生成的rpk包么，能够

adb push xxx.rpk  /sdacrd/
复制代码

push到手机根目录，而后选择本地安装，选择rpk包便可。

你还能够...选择扫码安装，不过我没成功，本身参考官网吧。

安装完成后是这个样子：

到这里，恭喜你已经开发了第一个块应用了~

你能够打开布局边界看看是不是原生的。

3、本身开发一个快应用

3.1 基础配置

想要本身开发一个快应用，首先应该有个IDE来用。

你能够选择webstorm，vscode，或者sublime，固然若是你都没有，用记事本吧...

我这里使用的是vscode，不过和sublime体验差很少...

首先咱们修改src/manifest.json：

修改下logLevel为debug，这个很关键，一会看不见日志会很痛苦。

而后咱们修改了包名，应用名和icon，这些无所谓.

此时你能够运行：

npm run build
复制代码

而后就会生成新的rpk文件了，接下来安装。

3.2 文章列表页

咱们直接用他的Demo/index.ux

3.2.1

先编写一下布局，布局为一个list和一个上拉加载组件：

<template>
  <list class="main-page" onscrollbottom="loadMoreData">
    <block for="articleList">
      <list-item type="article-item" class="article-item" onclick="loadUrl($item.link)">
        <text class="title">{{$item.title}}</text>
        <div style="display:flex;flex-direction:row;margin-top:12px;">
          <text class="author">{{$item.author}}</text>
          <text class="date">{{$item.niceDate}}</text>
        </div>

      </list-item>
    </block>

    <list-item type="loadStatus" class="load-status" style=" justify-content: center;padding:20px;">
      <progress type="circular" show="{{hasMoreData}}"></progress>
      <text show="{{hasMoreData}}">加载更多</text>
      <text show="{{!hasMoreData}}">没有更多了~</text>
    </list-item>
  </list>
</template>
复制代码

能够参考官方文档：https://doc.quickapp.cn/tutorial/widgets/list-tutorial.html

大体说一下，list标签设置了一个onscrollbottom，即滚动到底部会触发loadMoreData.

渲染会遍历读取articleList数组，而后经过{{$item.title}}的方式取单个对象的属性值，此例为取title属性。

咱们还给list-item加了一个onclick时间，触发loadUrl.

3.2.2 编写js

编写JS

<script>
  import webview from '@system.webview'
  import router from '@system.router'
  var url = 'http://www.wanandroid.com/article/list/$pageId/json';
  export default {
    data: {
      title: '文章列表',
      articleList: [],
      hasMoreData: true,
      // 每次渲染的商品数
      size: 20,
      // 是否正在fetch请求数据
      isLoadingData: false,
      curPage: 0
    },
    onInit() {
      this.$page.setTitleBar({ text: '文章列表' }),
      this.loadArticlesJson();
    },
    async loadArticlesJson() {
      // 成功示例
      const ret1 = await natives.fetch({
        url: 'http://www.wanandroid.com/article/list/0/json',
      })
      console.info('fetch成功结果: ', JSON.stringify(ret1));

      var returnCode = ret1.data.code ;

      if(returnCode == 200){
        var articlesJson = JSON.parse(ret1.data.data);
        this.articleList = this.articleList.concat(articlesJson.data.datas);
      }else{
        // failed !!!
        console.error('load article list failed!');
      }
    },
    async loadMoreData() {
      if (this.isLoadingData) {
        return;
      }
      this.isLoadingData = true;
      this.curPage = this.curPage + 1;
      
      console.info("loadurl ", url.replace("$pageId", this.curPage));
      const ret1 = await natives.fetch({
        url: url
      })
      var articlesJson = JSON.parse(ret1.data.data);
      this.articleList = this.articleList.concat(articlesJson.data.datas);
      this.isLoadingData = false;
    },
    loadUrl(url) {
      webview.loadUrl({
        url: url
      });
    }

  }
</script>
复制代码

data中定义了一些数据结构，当发生修改时会触发渲染。

在onInit的时候咱们设置了标题，并调用了this.loadArticlesJson方法，这里会直接去访问：

http://www.wanandroid.com/article/list/0/json

访问json数据，而后咱们加入到this.articleList中渲染界面。

当拉到底部时，会触发loadMoreData，同样是加载数据并渲染。

当点击单个条目时，触发loadUrl，即经过webview去加载页面。

此时你还不能运行，由于使用了await natives去访问，还须要一些配置。

来到src/app.ux设置一些全局配置，在里面添加：

// 脚本：regenerator.js
// 全局引用
const globalRef = global.__proto__ || global
// global注入regeneratorRuntime
globalRef.regeneratorRuntime = require('babel-runtime/regenerator')

// asyncNatives.js
import nativeFetch from '@system.fetch'

const natives = {
/** * 网络请求 * @param options * @return {Promise} */
async fetch (options) {
  const p1 = new Promise((resolve, reject) => {
    options.success = function (data, code) {
      resolve({ data, code })
    }
    options.fail = function (data, code) {
      resolve({ data, code })
    }
    nativeFetch.fetch(options)
  })
  return p1
}
}
globalRef.natives = natives
复制代码

便可。

固然运行过程当中，最好打开日志查看，能够开启一个命令行，执行：

adb logcat | grep JsConsole
复制代码

便可看到每一个页面建立、启动、销毁等日志。

你也能够在AS的logcat中查看。

你在写代码时，也能够经过console.info()打印日志。

到这里，一个入门教程就完毕了，你能够打包、安装看效果了。

4、最后

这只是个入门教程，用于激发你的兴趣。

若是想要更好的开发：

1. 务必仔细读官方文档，了解各类配置，页面生命周期，各类组件等；
2. 好好学习flex布局，讲道理咱们Android也有；
3. 须要学习下js，以及其渲染页面机制
4. 还须要良好的耐心...

整体而言和小程序相似，学习成本没那么高，若是须要，管他呢，反正咱也学得会~

源码地址：github.com/hongyangAnd…

推荐一下：个人我的网站

欢迎关注个人微信公众号，学习更多文章：