对标小程序 _ _ 快应用 _ 开发入门指南，移动应用开发课程设计
环境搭建可以直接参考开发文档，基本一样
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.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.isLoadingDat
a) {return;}
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论