quickapp_概论

官网

概述

在这里插入图片描述

从上述可以看出快应用的覆盖面比较窄，仅支持10种手机型号，像iPhone、三星等都是不支持快应用的～。但是快应用的优势还是比较明确的无需安装、即点即用，用完即走，简单来说就是比较方便，可以提升用户体验度。用户可以在 URL 链接、全局搜索、应用商店、浏览器、负一屏、系统桌面、PUSH、语音助手、安全中心、垃圾清理、信息助手、天气、短信模板、日历、个性主题、文件管理等等任何地方作为入口打开快应用…

在这里插入图片描述

开发前提

[1] 安装IDE

开发快应用的前提就是安装快应用开发工具

问题-IDE打开是英文

第一次打开时显示为英文是因为配置还没有加载好，关闭之后重新打开显示的就是中文了。

[2] 创建项目

在这里插入图片描述
点击如上新建项目打开新建工程界面

新建工程界面展示如上，可以选择快应用、快应用卡片、 快应用(Webview) 三类项目

选择某一模版，点击下一步，项目创建完成。

[3] 运行项目

如果您基于官方模版，创建新项目，需要先安装依赖，才能正常运行。您可以使用 yarn 或 npm i 命令，在终端运行来安装依赖，然后运行项目。

也可点击下图的 安装依赖，重新启动编译来启动项目(其实就是快捷键)。
在这里插入图片描述

[4] 项目结构

> └── src
│ ├── assets # 公用的资源(Images/Styles/字体...)
│ │ ├──images # 存储 png/jpg/svg 等公共图片资源
│ │ └──styles # 存放 less/css/sass 等公共样式资源
│ ├── helper # 项目自定义辅助各类工具
│ ├── pages # 统一存放项目页面级代码
│ ├── app.ux # 应用程序代码的入口文件
│ └── manifest.json # 配置应用基本信息
└── package.json # 定义项目需要的各种模块及配置信息

开发调试

在开发过程中，快应用运行效果，会在主界面右侧的模拟器中显示。

但是模拟器中运行的效果和真机存在差异

UI: 很多UI在模拟器上显示正确但是在真机上显示错乱
API: 模拟器尚未支持全部 API

因此实际开发过程中还需要使用真机来预览，来调试快应用的实际运行情况。

USB真机调试

前提：准备一台安卓手机，确保手机处于开发者模式

若是不确定手机是否处于开发者模式：设置 -> 关于手机 -> 软件版本 -> 多次点击软件版本号至提示“您已处于开发者模式，无需进行此项操纵”为止
步骤

[1] 使用数据线连接电脑与手机

确保数据线可以传输数据而不是只能用于充电；否则会报错–> 找不到Android

[2] 点击 IDE 工具栏的「USB 调试」开始调试

每次运行调试时，开发者工具会检测您的手机是否安装了【快应用预览版】【快应用调试器】。如果未安装，开发者工具将自动安装。若是已安装会自动打开快应用预览版进入快应用首页进行调试，与此同时电脑端会打开调试页面。

扫码调试

[1]在快应用调试器下载地址: 官网->开发支持->开发工具->帮助中心->资源下载下载快应用调试器与快应用预览版；
[2] 点击如下二维码icon打开二维码并使用快应用调试器扫描二维码可正常在手机上进行调试

上传发布

步骤

打包：点击顶部工具栏的打包按钮

若无签名，会索引您添加签名

点击完成之后会自动在项目根目录生成一个sign文件里面存储签名。

若是存在签名：快应用开发工具将自动生成 release 签名的包，既可以直接使用rpk包上传至官网也可上传包管理平台，如下：
包管理平台：在打包完成之后可以点击上传包管理平台上传本次rpk文件，上传成功之后会出现一个二维码和包管理平台的链接，您可使用调试器的扫码功能，打开此快应用
上传至官网：在开发完成之后，若您想发布上线该快应用，可以通过快应用开发工具的「上传」功能，将其上传至官网的开发者中心，后续可在官网按照流程填写相关信息后，发布上线快应用（当然，您也可以在后台，手动提交 RPK 包）

error: 版本号必须高于上一个版本的

问题: 在更新版本上传rpk文件时，提示版本号必须高于上一个版本。

原因：出现这个问题的原因是快应用官方以配置 manifest.json 的属性versionCode的值来确认版本更新，官方要求每次上架更新需要将该值手动自增1。很多同学会误以为修改 versionName 来更新版本，versionName 应该是属于那种显示在应用商店的版本号！

我就是在版本迭代时只是修改了versionName属性值但是没有修改versionCode属性的值，因此在发布时一直提示“版本号必须高于上一个版本”。

页面(文件)

现在回想一下Vue页面构成

<template>
  <!-- template里只能有一个根节点 -->
  <!-- 可以是原生html，或是基于html封装的一些组件-->
</tempalte>
<script>
  export default{
    // 配置项
  }
</script>
<style lang='less/scss'>
  css/less/scss
</style>

ux文件与vue文件结构完全相同，但是语法有所区别

[1] 快应用不支持原生HTML(若是使用原生html直接不显示！)，开发快应用只能使用快应用组件和基于快应用组件封装的组件；
[2] 快应用的样式使用的也是css，但是存在很多样式兼容问题，需要后面一一记录->常见的兼容性问题

兼容性问题产生的原因是：每个快应用组件支持的样式不一样，我们如果一直按照使用原生HTML的思维去使用快应用组件，就会感觉某些样式不起作用了，就会感觉存在某些兼容性问题！
[3] 快应用的逻辑使用也是ECMAScript，不包含BOM与DOM

举例说明：error:window is not defined

问题描述：在快应用中使用window对象在预览时并没有报错，但是在真机调试时报错 window is not defiend

原因：window对象是相对于Web浏览器而言的，它并不是ECMAScript内置对象，它是浏览器的Web API。

而快应用并不是在浏览器中打开而是在node环境中打开，因此不能使用window以及window的属性/对象。

快应用只使用js的语法只能使用ECMSSCript，不能使用BOM、DOM。

script脚本

基础语法

[1]this–vm实例化对象

this指向的是vm实例化对象(使用与vue2.x中相同)

[2]数据定义

定义数据时：页面级组件定义数据时可以根据需要将数据定义在data、public、protected、private属性中(data不可与public、protected、private同时存在)
在这里插入图片描述

自定义组件中数据模型只能使用data 属性
在这里插入图片描述
无论是定义在data、public、protected、private、props中定义的变量，都会平铺在实例化对象身上，在script中可以直接通过this.属性名去使用，在template模版中通过{ {}}去使用。

[3] 定义函数

函数和配置项在同一级别！声明的函数会直接平铺在实例化对象身上，在script中可以直接通过this.方法名去使用，在template模版中通过{ {}}去使用。

[4]事件

在快应用上进行事件绑定与vue2.x中相同(唯一的区别是在vue2.x中是将方法定义在methods配置项中，定义在methods配置项中的方法会被平铺在实例化对象上；而快应用中是直接将定义的方法平铺在实例化对象上–不定义在methods配置项中)
在这里插入图片描述

[5]for循环

列表渲染-for循环

[6]if判断

if判断

[7]计算属性

计算属性的使用与vue2.x中相同。

生命周期

全局数据

公共对象

$app

应用对象$app

[1]退出快应用-$app.exit

this.$app.exit() // 退出开应用，结束应用生命周期

manifest配置文件

manifest配置文件1-配置信息
 manifest配置文件2

应用包名-package

应用包名，是区别于其他应用的唯一标识。

推荐采用 com.company.module 的格式，示例如下：

{
    
    
  "package": "com.example.demo"
}

应用名称-name

应用名称，6 个汉字以内，与应用商店保存的名称一致；框架提供保存到桌面的功能，桌面上显示的应用名即为此属性；示例如下：

{
    
    
  "name": "发票小助手"
}

应用图标-icon

规则为正方形（不能是圆角），且务必无白边；

{
    
    
  "icon": "/assets/images/logo.png"
}

在上传时显示的图标img即为此处的图标。

应用版本名称、应用版本号- versionName、versionCode

应用版本名称、版本号为开发者的应用包维护的版本信息；

应用版本名称为主版本.次版本格式；

应用版本号为整数，从 1 开始，每次更新上架请自增 1；

示例如下：

{
    
    
  "versionName": "1.0",
  "versionCode": 1
}

在上传时版本以versionCode为准，在应用商店展示的版本号以versionName为准

接口-features

绝大部分系统接口调用之前需要在这里先声明，否则不能调用。

 "features": [
    {
    
    
      "name": "system.prompt"
    }
 }

路由配置-router

路由

display

display用于设置UI 显示相关的配置。

titleBar

MenuBar配置-右上角胶囊配置

"display": {
    
    
  // 此处配置为全局页面配置，若是想进行私有配置---> 在pages中进行配置！
   "menuBarData": {
    
    
     "menu": true, //是否显示MenuBar(1000-1060)
     "menuBar": true, //是否显示MenuBar(1070+)
     "shareTitle": "测试分享标题", // 分享标题
     "shareDescription": "测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述", // 分享秒杀
     "shareIcon": "/assets/images/shareIcon.png", // 分享展示图标
     "shareParams":{
    
    ”channel“: “default”}, // 分享携带参数(是否能成功接收未验证)
     "usePageParams": true // 是否携带当前页面的参数
   },
   "pages": {
    
    
     "pages/Demo": {
    
     }
   }
 }

目录

官网

概述