公司的项目，记录开发快应用中踩的坑。
版本：1030
更新日期：2019-07-10
PS：因为版本更新会有些快，手机的换代有些快，所以可能这里说的问题在手机上并不会出现问题，所以这里仅供参考。
html+css
UI的坑太多了，太多不支持了，感觉一时也列表出太多。简单写写吧。
选择器
快应用太多选择器不支持，详见官方文档：快应用 - style 样式
规则
太多规则不支持，并且建议不要省略样式的定义，会出现无法预料的问题。
<!-- 原本的写法 -->
.a,
.b {
color: red;
}
.a {
font-size: 14px;
}
.b {
font-size: 20px;
}
<!--建议写法-->
.a {
color: red;
font-size: 14px;
}
.b {
color: red;
font-size: 20px;
}
包括动画的，如果 0% 和 100% 是一模一样的，也要分开。。因为...就是不支持。。会出现编辑器ok手机不ok。。。
布局
建议使用某种布局的工具，像我们公司使用的一个 flex 布局的工具。。
如果页面布局都是flex布局，还算方便，原有的布局不用太大修改，默认的 div 元素需要加上
flex-grow: 1;
flex-direction: column;
这样才是类似 block，占据整行，由上至下。
另外，定位元素最好设定高度，不然它的高度很可能占据屏幕的100%。
UI切换的类
手机上有个bug，一般情况下，我们会定义某个元素块一些样式，然后使用 .active 再去定义一些新的样式，已到达在点击或者某个操作修改类而更新UI，例如：
<div class="test-div">
<h1>你好</h1>
</div>
<div class="test-div active">
<h1>你好</h1>
</div>
<style>
<!--正常的情况-->
.test-div {
background-color: red;
}
.test-div h1 {
font-size: 12px;
color: #000;
}
<!--active的情况-->
.test-div.active {
background-color: gray;
}
.test-div.active h1 {
font-size: 20px;
color: red;
}
</style>
我们一般会这样写，给元素加个 active 来切换UI。
但是快应用很神奇的地方在于，切换的UI的类名，只有当前元素的规则生效，其后代元素的不生效。
也就是，在正常的H5中，给 div.test-div 加一个 active ，它会改变背景色，然后它的子元素 h1 会改变字体大小和颜色。
快应用中，给 div.test-div 加一个 active ，它会改变背景色，然后...就没有然后了，h1 的样式不生效。。。
所以，在不知道什么时候会修复的情况下，上面的例子建议改成这样（只写一下 active 的 css）：
<div class="test-div">
<h1>你好</h1>
</div>
<div class="test-div div-active">
<h1 class="h1-active">你好</h1>
</div>
<style>
<!--active的情况-->
.test-div.div-active {
background-color: gray;
}
.test-div h1.h1-active {
font-size: 20px;
color: red;
}
</style>
JS
JS部分，普通方法大多可以共用，但是对于页面、结构的部分快应用和 vue 还是有一些不同的地方，所以使用一些 hack 方法来模拟 vue 的开发结构，最大适应自己的编程习惯。
文件结构
因为快应用的生命周期、方法都在同级，所以为了保持vue开发的习惯，对文件进行了分割，如下部分：
- data.js ：页面/组件的数据部分，包含 data 、props 等定义数据的地方，示例：
const BASE_URL = '/Common/img';
export default {
props: {
list: {
default: []
}
},
data() {
return {
iconXXX: BASE_URL + '/xxxxx.png'
};
}
};
- computed.js ：计算属性，下面一章有说讲解使用计算属性
export default {
// 这个是挂载计算属性的方法，下一节会讲解
initComputed() {
let _this = this;
let computed = _this.computed();
for (let key of Object.keys(computed)) {
Object.defineProperty(_this, key, {
get() {
return computed[key].call(_this);
}
});
}
},
// 以 data 的形式以 function 定义
computed() {
return {
a() {
// code ...
},
b() {
// code ...
}
};
}
};
- life.js ：生命周期，这里放置生命周期函数
export default {
onInit() {}
};
- methods.js ：自定义的方法
export default {
funcA() {},
funcB() {}
};
使用的话，就在 ux 文件中引入并拼接：
import dataMixin from './mixin/data';
import computedMixin from './mixin/computed';
import methodsMixin from './mixin/methods';
import lifeMixin from './mixin/life';
export default {
...dataMixin, // 数据
...computedMixin, // 计算属性
...methodsMixin, // 方法
...lifeMixin // 生命周期
};
计算属性 computed
1030不支持计算属性，而 computed 是在1050版本才出的，现在还没有兼容，所以修改了一下写法。
快应用中，computed 写法：
<script>
export default {
data(){
return {
a: 1,
b: 2
}
},
computed(){
return {
// 似 data 的写法
data1(){
// some code...
}
}
},
// 计算属性初始化
initComputed() {
let _this = this;
let computed = _this.computed();
for (let key of Object.keys(computed)) {
Object.defineProperty(_this, key, {
get() {
return computed[key].call(_this);
}
});
}
},
onInit(){
this.initComputed(); // 执行计算属性初始化
}
}
</script>
父子组件的通讯
子元素 $emit ，外层监听，不能用驼峰式，并且返回的在对象的 detail 中。
针对上面的情况，写了一个辅助方法来引入。
// proxyEvent.js
export default {
proxyEmit(f = '', p = {}) {
if (f) {
this.$emit('proxyOn', { f, p });
}
},
proxyOn({ detail: { f, p } } = {}) {
if (this[f] && typeof this[f] === 'function') {
this[f](p);
}
}
};
在 .ux 文件中以内挂在到主对象中。
import proxyEvent from './proxyEvent';
export default {
...proxyEvent
}
在子组件中，所有使用 this.$emit 的方法地方修改成 this.proxyEmit，第一个参数为要触发的事件名称，也为要触发的父元素函数。
在父组件中，组件上只需要 @proxy-on="proxyOn" 即可。
例子：
- 子组件：sayHello.ux
<template>
<div>
<text @click="proxyEmit('sayHelloEvent', { value: 'hello~' })">点击触发</text>
</div>
</template>
<script>
import proxyEvent from './proxyEvent';
export default {
...proxyEvent
}
</script>
- 父组件：
<template>
<sayHello @proxy-on="proxyOn"></sayHello>
</template>
<import name="sayHello" src="./sayHello.ux"></import>
<script>
import proxyEvent from './proxyEvent';
export default {
...proxyEvent,
sayHelloEvent(params){
console.log(params); // { value: 'hello~' }
}
}
</script>
网友评论