快应用开发踩坑文档

 

项目构建：

``` bash

## 参考网址

- [快应用官网](https://www.quickapp.cn/)

- [快应用开发文档](https://doc.quickapp.cn/)

- [快应用开发圈资源汇总](https://github.com/quickappdev/awesome-quickapp)

# 克隆代码到本地

git clone https://e.coding.net/xue/miniMallApp.git

# 安装相关依赖

npm install

# 运行本地开发项目，

npm run watch

# 启动浏览器调试server

npm run server

# 打包生成上线的rpk包

npm run build

# 生成签名文件

npm run release

```

 

## 快应用环境搭建及安装

- 环境搭建

  - PC安装toolkit工具

- 踩坑整理

  1. 修改日志输出等级

  2. console.dir 无法使用 

  3. 安装项目依赖必须用 npm install , cnpm和yarn安装都有问题

  4. 远程调试必须保证手机和PC处于同一局域网

## 快应用项目开发过程

- 文件目录结构优化

  - 所有需要用到的api,统一在 app.ux 声明后导出使用(this.$app.$def.)

- 踩坑集锦

  - fetch.fetch 请求返回的数据必须 JSON.parse() 处理一下

  - storage 数据存储的时候，必须保证 value 的值是 字符串格式

  - 自定义组件传参props, 不可以有大写

## 组件使用

- 组件

  - div 最多不能超过2个text,会存在重复渲染问题

  - span 格式化的文本，只能作为<text>与<a>的子组件

  - text 文本的溢出隐藏 lines 行数 text-overflow 超出的处理

  - input 没有 tel 类型

  - label 没有子组件 ，属性只有 target 到目标id, 不是 for

  - 所有与大小相关的样式（例如width、font-size）均以基准宽度（默认750px）为基础

  - border-(top,bottom,left,right) 样式无效，需要分开设置

  - input 获取value ，e.value "<input attr={"placeholder":"请输入手机号","id":"phone","type":"number","value":"1"} style={"flex":1,"paddingLeft":"10px","fontSize":"32px","color":"#686868"}></input>"

  - 文字必须在text标签里，放在div里不显示

  - 弹层超过一平时用list组件，否则滑屏没有效果，但是效果是吸顶

  - list在使用下拉刷新加载数据时会出现闪退，可以使用onappear事件代替

- 事件

  - 通用事件： click, longpress, focus, blur, appear, disappear, swipe

  - 使用方法： 事件前 + on, 例如：onclick, onblur...

- 属性

  - background-color

  - border-bottom-width

  - border-radius 百分比无效，必须用具体数值