快应用与微信小程序的区别
一、区别
1. 开发前准备
| 微信小程序 | 快应用 | |
|---|---|---|
| 开发账号准备 | （发布前非必需） 微信公众平台注册申请微信小程序账号 |
（发布前非必需） 快应用官网注册， 需要绑定厂商开发者账号（至少一家） |
| 开发环境 | PC端：需要下载微信小程序IDE，进行预览小程序 手机端：需要下载微信APP |
PC端：需要安装10.0+版本的nodejs、hap-toolkit，快应用开发IDE（非必需） 手机端：需要下载快应用调试器APK，多个快应用需要下载快应用预览版 |
| 开发语言 | wxml、wxss、js脚本、wxs |
html、css、js脚本 开发规范与vue相近 |
| 调试预览 | 微信小程序IDE中进行预览和调试 | 快应用开发IDE中进行预览和调试 或在其他IDE中开发完成通过命令行进行编译后使用浏览器打开生成的预览地址，通过浏览器开发者模式进行调试 或使用手机连接USB进行预览 |
补充
快应用账号申请流程图
hap-toolkit安装：
npm install -g hap-toolkit
hap -v // 查看当前版本，安装成功后会有版本号快应用项目调试（安装rpk包）：
1.启动HTTP服务器(默认端口为8000)
npm run server自定义端口
npm run server -- --port 88882.打开手机扫码安装（pc端和手机端在同一个局域网内，否则用USB连接）
打开手机上的快应用调试器 –> 点击扫码安装
扫描启动服务器生成的http链接上的二维码进行安装
点击在线更新唤起平台运行rpx包
注意
快应用：hap-toolkit@0.3及其以后的版本不再支持 NodeJS v8.0 以下的版本)
2. 开发框架
(1)创建项目
微信小程序：微信小程序IDE中创建项目
快应用：快应用开发IDE中创建项目，或命令行创建初始化项目
快应用项目命令行初始化
// 初始化项目
hap init <projectName>
// 安装依赖
cd projectName
npm install
// 编译项目
npm run build
// 自动编译项目
npm run watchbuild：临时产出，包含编译后的页面js、图片等
dist：最终产出，包含rpk文件
快应用发布前打包
npm run build增加release签名
通过openssl命令等工具生成签名文件private.pem、certificate.pem
openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem在工程的 sign 目录下创建 release 目录，将私钥文件 private.pem 和证书文件 certificate.pem 拷贝进去
发布程序包
发布程序包前需要增加release签名，然后在工程的根目录下运行
npm run release生成的应用路径为/dist/.release.rpk
如果需要临时使用 debug 签名，可以使用
npm run release -- --debug注意: debug 签名由于是公开的，安全性无法保证，一定不要使用 debug 签名签发正式上线的应用
(2)项目结构
微信小程序：
├── pages 页面文件夹
│ └── index 页面文件目录，页面名和文件名相同
│ ├── index.js 页面脚本逻辑文件，需要和页面名相同
│ ├── index.json 页面配置文件，需要和页面名相同
│ ├── index.wxml 页面模板文件，需要和页面名相同
│ └── index.wxss 页面样式文件，需要和页面名相同
├── utils
│ ├── util.js 公用的资源
├── app.js 小程序公共脚本逻辑
├── app.json 小程序全局配置
├── app.wxss 小程序全局样式
└── package.config.json 小程序工具配置注意
wxml文件：由标签、属性等等完成页面结构，类似于
html，但有特殊标签、组件和属性wxss文件：完成页面的样式，具有
css大部分的特性，新增了rpx尺寸单位
快应用：
├── sign rpk包签名模块
│ └── debug 调试环境
│ ├── certificate.pem 证书文件
│ └── private.pem 私钥文件
├── src 项目源文件夹
│ ├── Common 公用的资源和组件文件
│ └── logo.png 应用图标
│ ├── Demo 页面目录
│ └── index.ux 页面文件，可自定义页面名称
│ ├── Doc
│ └── Layout 页面目录，存放各自页面私有的资源文件和组件文件
│ └── index.ux 页面文件，文件名不必与父文件夹相同（推荐index.ux）
│ ├── app.ux APP文件，可引入公共脚本，暴露公共数据和方法等
│ └── manifest.json 项目配置文件，配置应用图标、页面路由等
└── package.json 定义项目需要的各种模块及配置信息注意
sign：签名模块，当前仅有
debug签名，如果内测上线，请添加release文件夹，增加线上签名；签名生成方法详见文档使用命令行，发布前打包ux文件：文件中代码的书写方式类似于
vue，<template>标签中写html页面结构，<script>标签中写js逻辑部分，<style>标签中写css样式部分，使用less需要在<style>标签中声明lang="less"
| 微信小程序 | 快应用 | |
|---|---|---|
| 代码结构 | 页面代码是分开的，页面的结构、逻辑和样式在不同的文件中 | 页面代码是在一个ux文件中，支持import和require |
| 页面配置 | app.json全局配置和page.json页面配置 |
manifest.json配置文件中进行全局配置和页面配置 |
| 框架指令 | wx:if、wx:elif、wx:else、wx:for、wx:show |
if、elif、else、for、show |
| 组件 | 有模板和自定义组件两种方式 引入模板的方式： import和include引入组件的方式：在 page.json中声明后使用 |
有模板和自定义组件两种方式 两者都需要使用 <import>标签导入后使用 |
| 组件通信 | 父组件通过属性的方式将数据传递给子组件 子组件的触发事件使用 triggerEvent方法传递数据和父组件监听子组件事件传递数据 |
父组件通过属性和$broadcast()的方式将数据传递给子组件 子组件通过$dispatch()或通过$emit()节点绑定的事件进行通信 |
| 组件样式 | :host选择器指定组件所在节点的默认样式组件样式隔离，在 options中配置styleIsolation选项 |
可以设置css作用域 |
| 事件触发 | bind-*属性、catch-*属性绑定响应事件 |
on-*绑定响应事件 |
| 事件监听 | $on 用于监听自定义事件；$off移除对应的事件监听；$emitElement()完成事件的动态触发 |
|
| 页面跳转 | 通过api进行页面跳转 | 使用组件<a>进行跳转，或通过router进行跳转 |
| API | 可以直接使用api | 需要在配置文件manifest.json中声明后，在页面文件中进行import或require导入才能使用 |
| async | 原生不支持async |
支持使用ES6语法 |
相同部分：
数据绑定方式相同，都有<block>组件，动态修改样式方式相同，组件的slot
注意
微信小程序：
- 自定义组件中，接受一个
Object类型的参数。
快应用：
自定义变量表示 for 指令的数组索引和数组元素时，变量名不可以用
$或_开头。快应用中
mainfest.json中widgets为负一屏卡片概念，但是每个厂商的样式和规格不同要有所区别。快应用中有
public、protected、private概念，注意不能和data属性同时使用。子组件中只能使用data。子组件中的数据名称避免和父组件中的数据名称相同，可能会父组件覆盖子组件的数据出现错误。if/elif/else 节点必须是相邻的兄弟节点。
子组件数据传递属性名称使用驼峰方式定义，父组件传递时使用“-”连接。
组件通信：
父组件向子组件传递数据：父组件通过属性传递数据；父组件通过
$broadcast()方式传递数据。子组件向父组件传递数据：子组件通过
$dispatch()完成事件触发，父组件通过$on()绑定的事件并响应（适用于祖孙组件传递数据）；子组件通过$emit()触发在节点上绑定的事件来执行父组件的方法。双向事件传递：
向下传递：父组件触发，子组件响应；调用
parentVm.$broadcast()完成向下传递，
向上传递：子组件触发，父组件响应；调用childVm.$dispath()完成向上传递。触发时传递参数，再接收时使用
evt.detail来获取参数；当传递结束后，可以调用
evt.stop()来结束传递。组件
a还提供调起电话、短信、邮件的功能和加载网页的能力。router使用前需要导入模块import router from '@system.router'页面跳转：若希望参数允许被应用外部请求传递的数据覆盖，请在页面的
ViewModel的public属性中声明使用的属性
(3)生命周期
微信小程序：
APP生命周期：
onLaunch、onShow、onHide、onError页面生命周期：
onLoad、onReady、onShow、onHide、onUnload、onPullDownRefresh、onReachBottom、onShareAppMessage、onPageScroll、onResize、onTabItemTap
快应用：
APP 的生命周期：
onCreate、onDestroy页面的生命周期：
onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress
(4)样式与布局
| 微信小程序 | 快应用 | |
|---|---|---|
| 盒模型 | 默认content-box | 框架使用 border-box 模型， 暂不支持 content-box 模型与 box-sizing 属性 |
| 长度单位 | rpx: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 1rpx = 0.5px = 1物理像素 |
框架目前仅支持长度单位px和%。与传统 web 页面不同，px是相对于项目配置基准宽度的单位，已经适配了移动端屏幕，其原理类似于rem设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度 |
| 选择器 | 内联样式、tag选择器、class选择器、id选择器、并列选择、:after选择器、:before选择器 |
内联样式、tag选择器、class选择器、id选择器、并列选择、后代选择器 |
| 预编译 | 不支持预编译 | 支持less、postcss，需要相应的环境配置 |
注意
微信小程序：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
快应用：项目配置基准宽度：项目的配置文件（<ProjectName>/src/manifest.json）中config.designWidth的值，默认为 750
3.其他
| 微信小程序 | 快应用 | |
|---|---|---|
| 打开方式 | 微信中打开 小程序之间跳转 微信中服务通知打开 |
应用商店打开 通过连接从外部打开应用 H5 页面中可以通过调用接口跳转到应用（注意兼容） |
| 分包加载 | 同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。 | 整个快应用的所有分包大小不超过 4M 单个分包/基础包大小不能超过 1M |
注意
快应用：分包注意低版本兼容，推荐采用编译时兼容方式。
二、参考链接
微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/
快应用官网：https://doc.quickapp.cn/