Company’s project to record potholes in the development of fast apps.

Version: 1030

Updated at: 2019-07-10

PS: Because the version will be updated quickly and the mobile phone will be replaced quickly, maybe the problem mentioned here will not be a problem on the mobile phone, so it is only for reference.

html+css

UI pit too many, too many unsupported, feel that the list is too much. Let me just write it down.

The selector

Quick application too many selectors are not supported, see the official document: quick application – style style

The rules

Too many rules are not supported, and it is recommended not to omit style definitions, which can cause unexpected problems.

<!--The original way of writing it-->
.a..b {
    color: red;
}
.a {
    font-size: 14px;
}
.b {
    font-size: 20px;
}

<!--Suggest writing-->
.a {
    color: red;
    font-size: 14px;
}
.b {
    color: red;
    font-size: 20px;
}
Copy the code

Including animation, if 0% and 100% are exactly the same, also separate. Because… Just don’t support.. Editor OK phone not OK…

layout

It is recommended to use some kind of layout tool, like the Flex layout tool our company uses.

If the layout of the page is all Flex layout, it is convenient, the original layout does not need to change much, the default div elements need to be added

flex-grow: 1;
flex-direction: column;
Copy the code

That’s kind of like a block, occupying the entire row, from top to bottom.

Also, the positioning element had better be set to a height, otherwise it could take up 100% of the screen height.

Ui-switched classes

There is a bug on the phone. In general, we will define some styles for an element block, and then use.active to define some new styles to update the UI after clicking or modifying the class for an action, for example:

<div class="test-div">
    <h1>hello</h1>
</div>

<div class="test-div active">
    <h1>hello</h1>
</div>

<style>
<!--Normal condition-->
.test-div {
    background-color: red;
}
.test-div h1 {
    font-size: 12px;
    color: # 000;
}

<!--activeIn the case-->
.test-div.active {
    background-color: gray;
}
.test-div.active h1 {
    font-size: 20px;
    color: red;
}
</style>
Copy the code

So what we usually do is, we give the element active to switch the UI.

But the magic of fast application is that when switching UI class names, only the rules of the current element are in effect, not those of its descendants.

That is, in normal H5, adding an active to div.test-div changes the background color, and then its child h1 changes the font size and color.

In a quick application, add an active to div.test-div, which changes the background color, and… The h1 style doesn’t work…

So, without knowing when a fix will be made, the above example suggests changing to something like this (just write active CSS) :

<div class="test-div">
    <h1>hello</h1>
</div>

<div class="test-div div-active">
    <h1 class="h1-active">hello</h1>
</div>

<style>
<!--activeIn the case-->
.test-div.div-active {
    background-color: gray;
}
.test-div h1.h1-active {
    font-size: 20px;
    color: red;
}
</style>
Copy the code

JS

JS part, common methods can be shared, but for the page, the structure of the part of fast application and VUE still have some different places, so the use of some hack methods to simulate the vUE development structure, the biggest adaptation to their programming habits.

File structure

Because the life cycle and methods of fast application are all at the same level, in order to keep the habit of VUE development, the file is divided as follows:

  • Data.js: the data part of a page/component, where data, props, and other data are defined. Example:
const BASE_URL = '/Common/img';

export default {
  props: {
    list: {
      default: []
    }
  },

  data() {
    return {
      iconXXX: BASE_URL + '/xxxxx.png'}; }};Copy the code
  • Computed. Js: Computed properties, the next chapter explains how to use computed properties
export default {
  // This is the method to mount computed properties, as explained in the next section
  initComputed() {
    let _this = this;
    let computed = _this.computed();
    for (let key of Object.keys(computed)) {
      Object.defineProperty(_this, key, {
        get() {
          returncomputed[key].call(_this); }}); }},// Function as data
  computed() {
    return {
      a() {
        // code ...
      },

      b() {
        // code ...}}; }};Copy the code
  • Life.js: life cycle, put the life cycle function here
export default {
  onInit() {}
};
Copy the code
  • Methods. js: custom methods
export default {
  funcA() {},
  funcB() {}
};
Copy the code

If used, introduce and concatenate in ux files:

import dataMixin from './mixin/data';
import computedMixin from './mixin/computed';
import methodsMixin from './mixin/methods';
import lifeMixin from './mixin/life';

export default {
  ...dataMixin, / / data. computedMixin,// Calculate attributes. methodsMixin,/ / method. lifeMixin// Lifecycle
};
Copy the code

Computed attribute computed

1030 does not support computed attributes, and computed is not compatible with 1050, so I changed the notation.

In fast application, computed writing:

<script>
 export default {
  data(){
    return {
      a: 1.b: 2
    }
  },

  computed(){
    return {
      // Write like data
      data1(){
        // some code...}}},// Calculate the property initialization
  initComputed() {
    let _this = this;
    let computed = _this.computed();
    for (let key of Object.keys(computed)) {
      Object.defineProperty(_this, key, {
        get() {
          returncomputed[key].call(_this); }}); } }, onInit(){this.initComputed(); // Perform calculation property initialization}}</script>
Copy the code

Communication between parent and child components

The child $emit element, which listens on the outer layer, cannot be humped and returns in the detail of the object.

In view of the above situation, an auxiliary method is written to introduce.

// 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); }}};Copy the code

Hang inside the.ux file into the main object.

import proxyEvent from './proxyEvent';
export default {
  ...proxyEvent
}
Copy the code

In the child component, all methods that use this.$emit are changed to this.proxyEmit. The first argument is the name of the event to fire and the parent element function to fire. In the parent component, you just need @proxy-on=”proxyOn” on the component.

Example:

  • Child component: sayHello.ux
<template>
    <div>
      <text @click="proxyEmit('sayHelloEvent', { value: 'hello~' })">Click on the trigger</text>
    </div>
</template>

<script>
import proxyEvent from './proxyEvent';

export default {
  ...proxyEvent
}
</script>
Copy the code
  • The parent component:
<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>
Copy the code

The introduction and acquisition of child elements

Subcomponents can be imported and retrieved in VUE like this:

<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>
Copy the code

Subcomponents that can be used in fast applications are introduced and acquired like this:

<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>
Copy the code