应公司业务需要，开始研究快应用的开发，在边学边开发过程中，发现有很多与 微信小程序不同的地方。现暂时总结一二，供以后避坑指南。往后遇到新问题，会继续更新！
List组件
在快应用中，如果页面高度超过2000Px时或者页面高度太高时，真机手机调试器会闪退，这个问题困扰了我好长时间，在不段的删减代码排除问题时，才找到这个原因。故解决方法是。把长页面中的内容添加到 <list>组件中，长页面中每个模块放入 <list-item>中。
示例代码：
<list class="container" onscroll="move">
<!--广告图片展示-->
<list-item type="getCePing">
<div class="flex-column">
<div class="pic" for="{{AdList}}">
<image class="img" src="{{$item.adimg}}"></image>
</div>
</div>
</list-item>
</list>
//滚动触发
move(e){
scrollY = scrollY + e.scrollY //每次触发时获取到滚动数相加，就得到总滚动数据。
console.info(scrollY)
}
scrollTop
在JS中我们获取滚动条位置时（滚动位置距离顶部的位置）只需要用scrollTop 方法就可以，但在快应用中不是这样的。快应用中 scrollTop 方法是判断只否滚动到顶部位置时触发这个方法。
快应用中 获取 当前位置距离顶部位置时用 onscroll 属性获取到的 e.scrollY 属性相加获得。
示例代码：
// onscroll="move" 滚动触发
move(e){
scrollY = scrollY + e.scrollY //每次触发时获取到滚动数相加，就得到总滚动数据。
console.info(scrollY)
}animation 动画
在快应用中，animation 动画 不能像H5一样简写，一定要全写。
示例代码：
/*跳动动画*/
.blink{
animation-name: big; //动画名称
animation-duration: 500ms; //动画速度 ms毫秒
animation-iteration-count: infinite; //是否循环
animation-timing-function:linear; //动画方法
}
@keyframes big {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
100% {transform: scale(1);}
}flex布局
因为快应用最后编译时不是编译成H5页面，而是会根据源代码逻辑转换成 原生代码再编译完成，所以在页面布局上，不能用H5的逻辑来。只能用flex弹性布局来完成。
.container {
display: flex; //flex 布局声明
flex-direction: column; // 排列方式 : row 横向排列、column 纵向排列。
justify-content: center; // 横向对齐方式 flex-start 左对齐//flex-end 右对齐//center居中对齐 //space-between 左右均分 //space-around 居中均分
align-items: center; //纵向对齐方式
}公共方法调用
项目中 app.ux 为初始化公共调用文件；其中编写的调用方法为：
// $app信息
console.info(`获取：manifest.json的config.data的数据：${this.$app.$data.name}`)
console.info(`获取：APP文件中的数据：${this.$app.$def.globalData.APIUrl}`)
console.info(`执行：APP文件中的方法`, this.$app.$def.testGetApp())camera 组件
在调用相机camera 拍照时，camera的尺寸有限制，不能 100%全屏铺满。其最宽度为750px时，最高尺寸为1000px；不然拍出的相片位置是便宜的。（这个坑，折腾了我两天时间，才找到原因。）所以，设置相机尺寸时，按照苹果原生相机的 9：6 尺寸设定。
.canvas{
width: 100%;
height: 1000px;
}自定义组件
在自定义组件中，子组件传递给父级页面参数或事件时，需要在父级页面中 初始化绑定事件。
示例：
onInit() {
//绑定自定义事件
this.$on('initdone',this.initdone)
},
//初始化完成
initdone(){
console.info('初始化完成')
},
//子组件中触发的事件
hideToast() {
this.$dispatch("initdone", {});
}暂时总结这几个坑，往后的开发工作中，遇到新的问题，会及时总结，并更新！（2020/01/07）
上传下载 request
在快应用中使用 Face++ 的人脸识别接口时，用到 request接口 @system.request
//1，导入模块
import request from '@system.request'
//2，接口示例：
requestFace(){
let that = this
request.upload({
url: 'https://api-cn.faceplusplus.com/facepp/v3/detect', //face++ API接口地址
files:[{
uri: that.src, //拍照后获取的相片路径
filename: 'image_file',
name: 'image_file',
type: 'multipart/form-data'
}],
data: [{
name: 'api_key',
value: that.$app.$def.globalData.api_key
},{
name: 'api_secret',
value: that.$app.$def.globalData.api_secret
},{
name: 'return_attributes',
value: 'gender,age,beauty,skinstatus'
}],
success: function(res) {
//数据成功返回
console.info('face++:', res)
let data = JSON.parse(res.data)
//没有检测到人脸，返回首页
if (!data.faces.length) {
that.photoUrl = ''
return false
}
//成功结果
that.$app.$def.cache.skinData = data.faces[0]
//跳转测试结果页
that.toSkin()
},
fail: function(err) {
console.info('fail//', err)
}
})
},
face++官方提供的API接口文档是这样：
调用URL
https://api-cn.faceplusplus.com/facepp/v3/detect
调用方法
POST
请求体格式
multipart/form-data
请求参数
api_key
api_secret
image_file
1、api_key 和 api_secret 参数要放在 request 接口的 data: [] 中，data: []是一个数组，具体示例为：
参数名 类型 必填 说明 name String 是 form 元素的名称。 value String 是 form 元素的值。
name 为请求的参数名，value 为请求的参数值。
示例：
data: [{
name: 'api_key',
value: '1234567890abcde'
},{
name: 'api_secret',
value: '1234567890abcde'
}]
image_file 参数不要放在 data:[] 中，需要加在 files: [] 中，具体示例为：
files 参数是一个 file 对象的数组，file 对象的结构如下：
参数名 类型 必填 说明 filename String 否 multipart 提交时，header 中的文件名 name String 否 multipart 提交时，表单的项目名,默认 file uri String 是 文件的本地地址 type String 否 文件的 Content-Type 格式,默认会根据 filename 或者 uri 的后缀获取
- 其中，uri为图片路径；filename,name为face++ 图片请求参数：image_file；type为 post 方式。
- 所有的图片上传接口，图片请求参数必须放在 files:[] 数组中，数组中每个对象为一个图片参数，多图上传，多个对象。
- files:[] 中的图片参数:image_file 在请求时会自动加到 face++请求参数中，无需在 data:[]中添加。
files:[{
uri: that.src, //拍照后获取的相片路径
filename: 'image_file',
name: 'image_file',
type: 'multipart/form-data'
}],
总结：request.upload 上传图片API中，files:[] 为需要上传图片的参数；data:[] 为上传图片时身份和权限验证的参数；
其中微信小程序中上传接口为：
//AI接口查询
requestFace: function(){
var that = this;
wx.uploadFile({
url: app.globalData.APIUrl + aiURL,
filePath: app.cache.tempFilePaths,
name: 'image_file',
formData: {
'api_key': app.globalData.api_key,
'api_secret': app.globalData.api_secret,
'return_attributes': 'gender,age,beauty,skinstatus'
},
success: function (res) {
//数据成功返回
console.log(res);
var data = JSON.parse(res.data);
//没有检测到人脸，返回首页
if (!data.faces.length) {
return flase;
}
//成功结果
app.cache.skinData = data;
that.toSkin();
},
fail: function (err) {
console.log(err);
}
})
},
- 接口中 filePath 为上传的图片地址；
- name 为上传图片的参数名。face++ 中参数：image_file;
- formData对象中为上传图片的身份和权限验证的参数。
- filePath和name在请求face++时，会自动加到 formeData 参数中，无需在formeData中添加。
2020/1/30 总结：今天是年初六，因为肺炎疫情特别严重，所以宅在家里好几天了；本次更新是关于face++的人脸识别接口在快应用中的使用时遇到了问题，放假前在公司已经解决了，但是没有总结出来，今天特地总结出来。并把接口原理搞明白了。
快应用源码Git
快应用源码项目中自带依赖（node_modules）项。通常我们备份源码或者Git源码时，是不需要 node_modules中的依赖项的，因为依赖项资源文件太大。所以在备份源码或Git源码时把工程依赖（node_modules）删掉。这样整个源码项目只有1-5M左右。
需要打开快应用项目时，IDE会根据项目中的 package.json、package-lock.json 两个文件自动重新下载并安装依赖（node_modules）。所以源码中 package.json、package-lock.json至关重要，不要删掉。连同源码一起备份或Git。
package.json的作用：
package-lock.json 是在 npm install 时候生成一份文件，用来记录当前状态下实际安装的各个npm package（node_modules中的依赖项）的具体来源和版本号。
package-lock.json的作用： 版本锁定
- 当我们安装依赖时，package-lock.json 文件会自动生成。里面会描述上一次更改后的确切的依赖管理树，包含了唯一的版本号和相关的包信息。之后的 npm install 会根据 package-lock.json 文件进行安装，保证不同环境、不同时间下的依赖是一样的。
- 由于 package-lock.json 文件中记录了下载源地址，可以加快我们的 npm install 速度。
2020/2/2总结：今天是年初九，因为肺炎疫情严重的原因，已经在家办公几天了，今天把快应用项目完善了一下。并把之前遇到的Git源码的问题研究了一番，基本搞懂了快应用源码node_modules依赖项的原理。
