vue2quickapp 踩坑記錄

公司的項目，記錄開發快應用中踩的坑。

版本：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>
複製代碼

子元素的引入和獲取

在 vue 中能夠用子組件是這樣引入和獲取的：

<template>
    <div>
        <child ref="child-component"></child>
    </div>
</template>

<script> import child from './components/child.vue'; export default { components: { child }, created(){ console.log(this.$refs['child-component']); // child component } } </script>
複製代碼

在快應用中能夠用子組件是這樣引入和獲取的：

<template>
    <div>
        <child id="child-component"></child>
    </div>
</template>

<import name="child" src="./components/child.ux"></import>

<script> export default { onInit(){ console.log(this.$child('child-component')); // child component } } </script>
複製代碼