最近几个月公司添加了快应用功能开发。这里把快应用遇到的一些开发上的技巧和大家分享一下。 分别从 文件路径、样式、组件、api、运行测试、发布 这几个来说
文件路径
根路径为 /src/....
样式
- px 快应用优先使用px 尽量不要使用百分比，不然会有怪异情况出现。不同机型问题，百分比有的机器不支持。官方已经对px做了适配 750px 对等 100vw；屏幕100%；所以优先使用px单位；
- position 定位并不能通过z-index 调整 所以解决层级问题的方法是调整html结构位置，受定位影响的结构是不能被父级show直接控制，需要单独给show控制显示隐藏，或者父级给if
层级问题 <div></div> <div></div> 两个div都有定位的情况下这个div显示在上面div上面 <div show="{{false}}" > //父级控制隐藏 // 子元素并不会隐藏 ，解决方案有给父级if控制或者给字元素一个show和父级一样 <div sytle='position:fixed;left:100px;top:100px' > </div> </div> - border-radius 圆角 父子边缘都需要设置 所以推荐给每一个角设置，由于快应用overflow：hidden 并不能用父级盖住子元素，所以在多层结构里面，父级给了圆角子元素没给的情况下，圆角并不能生效，需要给子元素再设置
- overflow:hidden 很多机型并不能兼容。所以不推荐使用该属性
- background 背景 除渐变 不支持缩写，官方也说明了。颜色需要单独使用background-color img 等也是单独使用。
- 盒模型 不支持切换盒模型 默认使用flex 每一个div 都是flex盒模型。
- box-sizing 默认border-box 不支持其它容器计算方式。
- 动画使用方式如下
@keyframes scl {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
div{
animation-name: scl;
animation-duration: 2s;
animation-iteration-count: infinite;
}
组件
- 组件基本参考小程序写法 在顶部引入 在结构内部使用 不需要单独注册
- 组件父子传参建议全小写 小驼峰必须变成 a-b 方式才能接收。
- 使用组件方法 优先推荐 this.$child('组件id').组件方法() 使用
官方API
- 微信充值 如果只想实现其中的一种，请勿配置另外一种支付方式的参数。同时配置两种参数，并且设备都支持的情况下，默认会选择 app 支付。
- push 推送 regid 建议每次应用就获取，短时间获取不会变动，过久了需要跟换
- ad 广告 巨巨巨巨坑点。vivo推荐使用模板广告，vivo有单独的广告组件 apex的ad组件支持 小米 oppo 华为
- 桌面图标 强烈推荐使用官方添加桌面组件。不推荐使用api。api可能丢失添加的用户。
运行测试
- 测试特殊机型 vivo 华为 vivo部分机型不支持推送
- 华为样式兼容最差。不能使用太骚的样式写法
- 华为测试需要下载快应用加载器，需要在加载器里面测试。快应用加载器可以非华为手机安装。详情
- 广告测试快应用预览版需要切换到快应用才能使用
打包上架
- 快应用上架可以自己去各大厂商单独提交也可以使用开发工具提交 ，工具提交的话会有延迟。需要快应用联盟审核一次然后再给厂商审核。急某个厂商可以单独去改厂商单独提交。
- 发布版本推荐使用1100+ 不然不能使用$nextTick 有一些异步情况不能不好处理。setTimeout 并不能代替nexttick
