从20号快应用的发布到现在已经过去三四天了,简单的学习了一下快应用,今天来分享一下,微信小程序刚刚发布的时候,我不是特别的看好,主要是开发小程序的厂商并不多,而且微信刚开始支持的力度比较一般。随着近期“跳一跳”、“答题”、“H5游戏”的火爆,现在身边的人越来越多的开始关注微信小程序了。20号,9大厂商发布快应用,颇有“9大门派围攻光明顶之势”。所以就来学习一下,html + css + js,如果做过vue或react的话,学习小程序和快应用的成本没有多大,一两天应该就可以上手了,各位看客,下面简单介绍一下快用的搭建。
    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>,扫描页面中的二维码)。


嗯,现在可以看到自己的快应用了哦。

退出重新打开调试器,点击开始调试,有惊喜哦,你就可以手机电脑同屏调试了。

暂时说到这里喽,有问题的小伙伴可以联系我,一起学习,一起进步。



题外话:觉得科技更新的速度很快,既然做了程序员就要时时刻刻准备接受新的科技,新的知识的洗礼,路漫漫其修远兮,吾辈仍需努力呀。

Logo

智屏生态联盟致力于大屏生态发展,利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐