快应用开发心得——新手入门指南
本期作者:任婧宇
一
介绍
1、关于快应用
快应用采用前端技术栈,是native渲染,可以调起丰富的系统api,性能体验还不错。
2. 快应用入口
(1)应用商店
(2)桌面图标
(3)全局搜索
(4)浏览器搜索
(5)网页跳转
(6)负一屏
(7)智能推送
(8)智慧识屏
(9)场景化入口(短信按钮、应用卸载替换、二维码、传送门)
各个不同品牌手机,入口各不相同,具体在论坛搜索『快应用入口合集』,帖子内有详细介绍。
3. 快应用优点
(1)轻松调起更多系统api
(2)各厂商的流量扶持
(3)native渲染,deeplink入口,原生桌面入口,push能力
二
工具
本次开发使用了官方提供构建工具hap-toolkit
1. 环境
(1)需安装6.0以上版本的NodeJS
(2)安装hap-toolkit
2. 手机调试工具
(1)在调试手机上,需要安装快应用调试器和平台预览版。我通过电脑上下载调试器的apk,通过USB方式发送到手机,在手机上直接点击安装。
下面是一个开发过程中,发现容易被忽略的很好用的功能:
a.打开调试器,点击右上角三个点,选择“设置”
b.点击“应用更新策略”,根据自己需求选择相应策略
c.若是调试一个新写的页面,选择“仅刷新页面”即可,默认选中“重启应用”
d.若当前调试的页面路由层级较深,且当前调试的功能不需要重启应用的话,建议选择为“仅刷新页面”,会方便很多
(2)在手机调试器上首次点击右下角“开始调试”,手机会提醒下载“快应用调试器内核”,这里,不同品牌不同型号的手机,下载的调试器内核是不同的,建议点击右上角里的平台下载,下载相对应的调试器预览版。
3. 编辑器
因为快应用支持的css样式局限,在开发过程中,使用我们普通的编辑器,不容易看到错误提示。这里推荐官方IDE,同步支持快应用最新版本语法标准,自动完成、提示和补全,以及全面准确的代码校验。还可以直接创建签名,一键生成发布联盟标准rpk包。新增的插件市场也还不错。开发者也可以根据个人需求选择相应编辑器。
三
项目文件
1. 目录结构
安装toolkit工具后,可通过全局hap命令创建一个项目模板,如下所示:
hap init <ProjectName>
命令执行后,会在当前目录下创建<ProjectName>文件夹,作为项目根目录
项目根目录主要结构如下:
目录的简要说明如下:
src:项目源文件夹
sign:签名模块(当前仅有debug签名,如果内测上线,请添加release文件夹,增加线上签名)
2. 配置文件配置
manifest.json为快应用项目配置文件,根据一个示例(官方示例)简单介绍下相关配置
{ "package": "com.company.unit", 应用包名 "name": "appName", 应用名称 "icon": "/Common/icon.png", 应用图标 "versionName": "1.0", 应用版本名称 "versionCode": 1, 应用版本号 "minPlatformVersion": 1000, 支持的最小平台版本号 "features": [{ "name": "system.network" }], 接口列表 "permissions": [{ "origin": "*" }], "config": { 统配置信息 "logLevel": "off" }, "router": { 路由信息 "entry": "Hello", "pages": { "Hello": { "component": "hello", "path": "/", "filter": { view": { "uri": "https?://.*" } } } } }, "display": { UI 显示相关配置 "backgroundColor": "#ffffff", "fullScreen": false, "titleBar": true, "titleBarBackgroundColor": "#000000", "titleBarTextColor": "#fffff", "pages": { "Hello": { "backgroundColor": "#eeeeee", "fullScreen": true, "titleBarBackgroundColor": "#0000ff", "titleBarText": "Hello" } } } }
四
调试
1.WIFI 调试
如果手机与 PC 在同一局域网,可以使用 WIFI 调试,步骤如下:
(1)在项目根目录下执行如下命令,启动 HTTP 调试服务器
npm run server
服务启动成功后,命令行终端和调试服务器主页可以看到提供扫描的二维码
(2)手机快应用调试器中关闭开启USB调试
手机快应用调试器点击扫码安装按钮,扫码安装待调试的 rpk 文件
手机快应用调试器中点击开始调试按钮,开始调试
2.USB 调试
USB 调试模式不需要手机与 PC 在同一局域网,需要在调试过程中手机通过 USB 连接 PC,步骤如下:
(1)在项目根目录下执行如下命令,启动 HTTP 调试服务器:
npm runserver
(2)手机开启设置 --> 开发者选项--> USB调试
(3)手机快应用调试器选中开启USB调试,手机USB 连接到 PC
(4)手机快应用调试器中点击在线更新按钮,安装待调试的 rpk 文件
(5)手机快应用调试器中点击开始调试按钮,开始调试
3.实时预览更新效果
需要同时打开两个终端,一个执行npm run watch,另一个启动服务npm run server,默认端口为12306
也可以自定义端口,例如:npm run server -- --port 8080
五
开发
现在可以开始愉快的踩坑之路了~
1.template篇
(1)标签使用受限,其中,div等标签中不能直接输入文本,文本必须写在span或text标签中
(2)如果组件的props使用驼峰定义,那么在传递数据时要使用-连接。eg:testProp,使用时,要写成test-prop,否则无法传值
(3)tabs组件不允许嵌套使用,若需两级tab,需自己编写
(4)list组件中,list-item组件需要设置type属性,需要注意的是,如果是不同的item,要设置不同的type属性,否则会出现DOM结构错乱
官方文档中也提到了要慎用if指令
2.style篇
(1)快应用的单位是px,该单位已实现各种屏幕自适应,比如默认设计稿宽度750px,则此时样式1px=设计稿1px
(2)最不方便之处,就是css样式支持的太有限,下面列出较常用典型的几点,更多可自行查阅官方文档:
a.由于快应用默认为flex布局,而flex的默认值方向为水平,所以,div套div布局,其中的子元素都是水平排列的,如需垂直排列,须自行另外设置
eg:除了颜色没写任何样式,结构和显示效果请看图
b.颜色:如果要写16进制色值的话,遇到可简写的色值需要写成完整的6位,不建议3位简写,比如要写成: #999999;不能写成:#999
c.单边框:光写border-top的简写不起作用,但是可以分开写:border-style、border-top-color、border-top-width
d.position仅支持none|fixed两个值,且父容器为<list>、<swiper>时不生效
e.display仅支持flex|none两个值
3.script篇
(1)数据请求方法,成功时返回的不是json对象,需要用JSON.parse转换一下,否则取不出值
(2)input输入框使用时,不能直接取value,需要通过event.text获取
(3)this.key= value / this.$set(‘key’, value)区别
eg:在初始的data中,只设置了info为空对象,点击按钮时,设置info.aa
如下图两种写法:
a.直接写this.info.aa,页面上没有变化,仍然是undefined
b.写成this.$set(‘info.aa’,‘aaa’),页面上显示出了aaa
其实也就是vue官方文档的那句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。所以需要使用$set方法去添加属性
(4)picker组件,改变选项值做操作的话,需要重新更新数组才能触发视图更新,例如:使用concat方法
(5)写个选中状态功能,数据层级太深的话,不起作用
(6)全局方法,写在app.ux中,其他地方调用时,用this.$app.方法名 就可以了
(7)比如我们需要实现一些dom操作,可以使用this.$element(id名称)方法,注意仅可以通过id获取DOM,且获取到的元素,跟我们传统的DOM不一样。例如,想要动态加样式,不能通过这种方式
(8)调用父组件的某个方法,可通过this.$parent().方法名 调用
(9)页面之间传递参数,用官方给的方法就挺好用
(10)通常CMD引入模块(import)时,多处引用,模块只初始化一次,快应用中会多次初始化,导致多处引用同一个模块但指针指向不同对象
六
打包及发布
1.编译工具
(1)编译打包工程
在工程的根目录下运行
npm runbuild
编译后的工程目录在/build
生成的应用路径为/dist/.rpk
(2)增加 release 签名
通过 openssl 命令等工具生成签名文件private.pem、certificate.pem,例如:
opensslreq -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -outcertificate.pem
在工程的 sign 目录下创建 release 目录,将私钥文件 private.pem 和证书文件 certificate.pem 拷贝进去
(3)发布程序包
发布程序包前需要增加release签名,然后在工程的根目录下运行
npm runrelease
生成的应用路径为/dist/.release.rpk
如果需要临时使用 debug 签名,可以使用
npm runrelease -- --debug
2.IDE发布
(1)生成证书。点击快应用面板的【生成证书】按钮, 按提示输入相关信息
(2)生成发布用 RPK。点击【发布 rpk包】按钮, 生成成功的话会弹出对应的文件夹
写在最后
在去年的开发者大赛征文中,我们通过多个社区联合活动收集了很多优质文章,有入坑指南、开源项目、开发模板、常见问题总结等多个方面,这些内容为很多开发者提供了参考,感谢大家的支持和参与,今年的我们的征文活动还在继续,感兴趣的开发者可以点阅读原文查看详情哦!
快应用生态平台
赋能开发者
拓展场景未来
快来关注我们吧
快应用开发心得——新手入门指南相关推荐
- python pip-什么是pip?Python新手入门指南
什么是 pip ?pip 是 Python 中的标准库管理器.它允许你安装和管理不属于 Python标准库 的其它软件包.本教程就是为 Python 新手介绍 pip. 通过本教程,你将学到: 1. ...
- 新手入门指南之玩转蓝桥云课
新手入门指南之玩转蓝桥云课 文档1 你好,蓝桥云课 实验1 Linux 桌面环境使用指南 本实验采用的就是图形界面的 Linux 桌面环境.图形界面使用的是非常优秀的 Ubuntu Linux 操作 ...
- Apache Kylin新手入门指南
Apache Kylin新手入门指南 文章目录 Apache Kylin新手入门指南 1 Apache Kylin是什么 2 为什么使用Apache Kylin 3 Apache Kylin的易用性如 ...
- mac 删除分区 command r 选择网络_Mac使用必看基础篇,Mac快捷键大全,mac新手入门指南...
你是Mac新手吗?你对使用Mac电脑有疑问吗?你还不知道mac有哪些快捷键吗?别着急,来看看小编给大家准备的Mac使用必看基础篇--Mac快捷键大全,对于新手用户很有帮助哦!! 一.开机相关命令快捷键 ...
- Neo4j 新手入门指南
Neo4j 新手入门指南 前言: 前段时间在公司实习有用到图数据库做一个小项目,就想着记录一下当时找到的比较有用的资料. 纯属入门学习啦,新手当作一个大纲来学习也可以! 感谢关注! 所有链接均在文章结 ...
- 蓝桥云课之新手入门指南
这是蓝桥云课学习人数最多的课程: 新手入门指南之玩转蓝桥云课 460896 人学过 27739 次评价 作者: 云课管理员 难度: 初级 综合评分: 9.4 复习一遍,里面共有3中课程模式: 第一种, ...
- rust油桶用什么打_腐蚀rust新手入门指南 游戏新萌拿好不谢!
川北在线核心提示:原标题:腐蚀rust新手入门指南 游戏新萌拿好不谢! 如何开始游戏? 巴拉巴拉那么多现在开始步入正轨吧! 点击find game 就进入了服务器列表,在这里你可以加入官方的服务器(热 ...
- 从零开始学黑客:网络黑客新手入门指南(转)
从零开始学黑客:网络黑客新手入门指南(转) (一)系统基本知识 1.a.什么是IP:要是真的想说清楚什么是IP,那是一项很繁重的工作.简单的来说,IP就是所有Internet或是局域网上的主机的身份证 ...
- 阿里云机器学习怎么玩?这本新手入门指南揭秘了!
想知道我是怎样免费在阿里云上玩机器学习的吗? 不慌,这就告诉你答案~ 它来了--阿里云向个人免费开放云端深度学习开发环境DSW(DataScienceWorkshop),还有免费GPU资源可以使用,实 ...
最新文章
- linux同步工具rsync​
- 使用SSH框架实现用户登录验证
- 计算机搞定44年几何难题,原来这2个人25年前猜对了
- 不同类的方法 事务问题_深入理解 Spring 事务原理
- ML之FE:数据处理—特征工程的简介、使用方法、案例应用之详细攻略
- html复制文件到目录,复制指定目录下的全部文件到另一个目录中
- 给array添加元素_前囧(06篇)Array 方法详解
- 前端学HTTP之字符集
- Linux 命令(三)--用户管理
- Spring依赖注入–字段vs设置器vs构造函数注入
- netif_start_queue/netif_wake_queue/netif_stop_queue
- 处理 JavaScript 异步操作的几种方法总结
- 一般软件工程师怎样拥有更多的资产
- python资料-100G Python从入门到精通全套资料!
- Process相关函数
- BZOJ2428[HAOI2006] 均分数据
- Java中String类的常用方法
- 2021年高压电工考试及高压电工考试题
- spss25 等待服务器响应出现问题,spss打开配置服务器失败
- 人类dna信息量_如果有一个人的DNA序列等遗传信息数据,理论上能否克隆出这个人?需多少MB(兆字节)的信息量?...
热门文章
- 电脑开不了机怎么办?如何解决?
- 小程序内嵌webview实现支付
- GitHub 颜值这么高的播放器,太爱了!
- 计算机科学计算的方面,计算机的科学计算功能在工程领域中的应用.doc
- PHP开发网易云FM音乐试听程序源码+支持下载功能
- 使用Chrome DevTools的Timeline分析页面性能
- for...in 与 for...of 的用法与区别
- 如何通过CRM系统获取更多销售线索?
- Linux积累 - scp 远程复制 加端口
- Java8新特性之- Lambda表达式和函数式接口