快应用搭建
从20号快应用的发布到现在已经过去三四天了,简单的学习了一下快应用,今天来分享一下,微信小程序刚刚发布的时候,我不是特别的看好,主要是开发小程序的厂商并不多,而且微信刚开始支持的力度比较一般。随着近期“跳一跳”、“答题”、“H5游戏”的火爆,现在身边的人越来越多的开始关注微信小程序了。20号,9大厂商发布快应用,颇有“9大门派围攻光明顶之势”。所以就来学习一下,html + css
1.环境搭建之前,需要准备node,我相信关注快应用的小伙伴,应该在自己的机器上都有了node的环境,没有环境的请去下载: https://nodejs.org/en/download/ 。
2. 创建项目前,请先安装toolkit工具和调试器。
首先需要安装 hap-toolkit.
windows应用可以直接执行下面的命令, mac用户请先“su - root”,切换到root用户再执行安装 。
npm install -g hap-toolkit
安装完成之后,需要执行下面命令:
hap -V
注意:v需要大写,大写。输出版本号,则表示小伙伴安装成功了。下面开始搭建喽。
3. 安装toolkit工具后,可通过全局
hap
命令创建一个项目模板,如下所示:
hap init <ProjectName>
其中<ProjectName>
为自定义的项目名称。
敲黑板喽:要回车,不然会等哭的。
命令执行后,会在当前目录下创建<ProjectName>
文件夹,作为项目根目录
├── sign rpk包签名模块
│ └── debug 调试环境
│ ├── certificate.pem 证书文件
│ └── private.pem 私钥文件
├── src
│ ├── Common 公用的资源和组件文件
│ │ └── logo.png 应用图标
│ ├── Demo 页面目录
│ | └── index.ux 页面文件,可自定义页面名称
│ ├── app.ux APP文件,可引入公共脚本,暴露公共数据和方法等
│ └── manifest.json 项目配置文件,配置应用图标、页面路由等
└── package.json 定义项目需要的各种模块及配置信息
目录的简要说明如下:
src :项目源文件夹
sign:签名模块,当前仅有debug
签名,如果内测上线,请添加release
文件夹,增加线上签名。
4.安装依赖,执行npm install。
5.运行一下吧,执行npm build。
估计会有小伙伴和我一样,怎么报错了,是不是我哪里操作的有问题,小伙伴们不要慌。执行下面的命令。
请重新执行一次hap update --force。这是由于高版本的npm在npm install时,会校验并删除了node_modules下部分文件夹,导致报错。而hap update --force会重新复制hap-toolkit文件夹到node_modules中。 开始敲黑板了啊,注意是两个--,敲成一个的去面壁。
安装之后再次执行npm run build。dist打包成功,现在你有了自己的rpk。
rpk已经有了,为什么看不到界面呢,小伙伴不要着急,我们还需要调试工具。
手机安装调试器
调试器是一个Android应用程序,点击
https://statres.quickapp.cn/quickapp/quickapp/201803/file/201803221213415527241.apk。
安装之后,我相信99%的小伙伴,看到的都是这个界面。
这是什么鬼,搞什么,都是灰色的按钮啊,不能点击啊,为什么让我升级系统,我的系统就是最新的啊。什么破玩意儿,我不玩了。哈哈,我当时是这么想的,淡定一些,这都是废话,可以跳过哈。可以直接看下面的。
手机安装平台预览版
安装预览版。地址:https://statres.quickapp.cn/quickapp/quickapp/201803/file/20180322121456491785.apk。
安装之后再来看。
手机会有两个应用,重新打开快应用调试器。
这下终于可以调试了,开始我们的调试吧。
- 扫码安装:配置HTTP服务器地址,下载rpk包,并唤起平台运行rpk包
- 本地安装:选择手机文件系统中的rpk包,并唤起平台运行rpk包
- 在线更新:重新发送HTTP请求,更新rpk包,并唤起平台运行rpk包
- 开始调试:唤起平台运行rpk包,并启动远程调试
预览效果
启动HTTP服务器
在终端中新建一个窗口,进入项目的根目录运行如下命令,启动本地服务器(默认端口为12306)
npm run server
自定义端口(如:8080)
npm run server -- --port 8080
ok,终于要结束了,小伙伴打开打开调试器 --> 点击"扫码安装"
,扫描终端窗口中的二维码即可完成配置(若扫描不成功,可在浏览器中打开页面:http://localhost:<your port>
,扫描页面中的二维码)。
嗯,现在可以看到自己的快应用了哦。
退出重新打开调试器,点击开始调试,有惊喜哦,你就可以手机电脑同屏调试了。
暂时说到这里喽,有问题的小伙伴可以联系我,一起学习,一起进步。
题外话:觉得科技更新的速度很快,既然做了程序员就要时时刻刻准备接受新的科技,新的知识的洗礼,路漫漫其修远兮,吾辈仍需努力呀。
更多推荐
所有评论(0)