What is Weex?

Weex is a framework for developing high performance native applications using popular Web development experiences.

Weex is dedicated to enabling developers to build Android, ios and Web applications based on common cross-platform Web development languages and development experience. In short, with the WeexSDK integrated, you can use the JavaScript language and front-end development experience to develop mobile applications.

The Weex rendering engine is separate from the DSL syntax layer and Weex is not strongly dependent on any particular front-end framework. At present, vue. js and Rax front-end frameworks are widely used in Weex page development, and Weex also provides the most complete support for these two front-end frameworks. Weex’s other main goal is to follow popular Web development technologies and combine them with native development technologies to achieve a high degree of unity in development efficiency and operational performance. In the development phase, a Weex page is just like a normal web page; At runtime, Weex pages take full advantage of native components and capabilities of various operating systems.

Why Weex?

Weex revenue

• Fast iteration speed, fast online
• Native experience in Weex environment
• Bundle resource size is much smaller than H5
• Rich interactive experience, good long list performance
• Quick and simple, one time to write three compatible

Weex development trample

General style

1, the picture

1, Weex provides the image component, but only supports remote image links (in the new Weex SDK has been resolved). Images must have width and height attributes or they will not be displayed. 2. Avoid using V-for on image tags, otherwise it will result in abnormal image rendering on Android (e.g. Slider).

  <slider class="activity" :autoPlay="true" interval="4000" @change="sliderChange">
    <div class="activity-cell"
      v-for="(item, index) in bannerList" :key="index"
      @click="clickInBanner(item)">
      <image class="activity-wrap-bg" resize="cover" :src="imageRes.bannerBgImg"></image>
      <image class="activity-wrap-image" :src="item.pictureUrl"></image>
    </div>
  </slider>
Copy the code

2, border

Weex does not support the use of border to create triangles. A border can be displayed on the Web, but a rectangle is displayed on ios and Android. You are advised to use a picture instead

web	Ios, android,

3. Scale is set to 0

Transform: Scale (0) causes all events in the document flow to spread throughout the HTML structure, invalidating all document flow events. Only elements out of the document flow (absolute, etc.) can be clicked; You can often set transform: scale(0,1) and hide the element.

4. Input tag height problem

On Android, when the input height is set to less than 60px, the cursor in the input box will not be displayed. (Ios and Web are normal)

5. V-if problem

When performing some operations to switch the state (such as turning the button gray), avoid using V-IF and add class instead

6. Transparency

Currently, only ios supports the box-shadow attribute, but Android does not support it. You can use images instead. Only one shadow effect can be set for each element. Multiple shadows cannot be applied to an element at the same time. And in daily development, it is best to use images instead of shadows to avoid unknown problems. The following is a list of transparency support for properties related to color

7. Weex does not support style shorthand

.border { margin: 0 10px; // error margin-right: 10px; margin-left: 10px; // Correct border: 1px solid# 000; / / error
    border-width: 1px;
    border-style: solid;
    border-color: # 000; / / right
  }
Copy the code

8. Click state

The most common clicking state of a project is the change of transparency, such as buttons, lists, links, etc. CSS adds a pseudo-class (:active), which is also supported in Weex, but Weex needs to add opacity:1 in the original style, otherwise it will not return to the initial state after clicking. In addition,background-image is invalid on ios when :active is used.

<template>
  <div class="btn"</text> </div> </template> <style scoped>. BTN {opacity: 1; // Must add}. BTN :active {opacity: 0.5; } </style>Copy the code

9. Text truncation

Lines :0 can be used to control text from restricted to unrestricted;

<template>
  <text class="text" @click="onClickText" :style="textStyle"> this is a test text, text, this is a test this is a test text, text, this is a test this is a test text, text, this is a test this is a test text, text, this is a test this is a test text, text, this is a test this is a test text, text, this is a test this is a test text, This is a test text, this is a test text, this is a test text, this is a test text, this is a test text,  </text> </template> <style scoped> .text { text-overflow: ellipsis; lines: 1; } </style> <script>export default {
   data () {
     return {
       textStyle: {},
     };
   },
   methods: {
     onClickText() {
       this.textStyle = {
         lines: 0,
       };
     },
   },
 }
</script>
Copy the code

Display of HTML sequence on different devices

For example, there are four layers of a, B, C, and D, where A, B, and C are absolute,z-index is from large to small, and D is a common structure. We know that in the CSS, layer A is at the top and layer D is at the bottom. How does weeX perform?

< the template > < div > < div > A (green) < / div > < div > B (blue) < / div > < div > C (purple) < / div > < div > D (red) < / div > < / div > < / template >Copy the code

web	Ios, android,

You can see that the performance of Web is inconsistent with that of ios and Android. In ios and Android, dom is added in the code in sequence, regardless of z-index. The view loaded later overwrites the previous view. To ensure the same performance on the Web, ios, and Android terminals, change the DOM writing sequence.

< the template > < div > < div > D (red) < / div > < div > C (purple) < / div > < div > B (blue) < / div > < div > A (green) < / div > < / div > < / template >Copy the code

11, Android under occlusion problem

Under Android, if the container is set to width and height, then the child element cannot be outside the container

12. When the input box of wechat environment is out of focus, the view offset of the current page does not return to its initial position.

When the input box of wechat environment is folded up, the dom structure layout of the page will be changed. You can capture the out-of-focus event by executing window.scrollto (0, 0).

13. Long pictures with more than one screen in the wechat environment cannot be rendered when loading

You can set a background color on the image’s parent container (scroller, list) to load successfully.

14 and the gradient

Weex does not support radial gradient-gradient, but only linear gradients. Only two color gradients are supported. The gradient direction is as follows:

• To Right: Gradient from left to right
• To left: Gradient from right to left
• -Penny: To bottom
• To top: Gradient from bottom to top
• To bottom right: Gradient from top left to bottom right
• To Top left: Gradient from the bottom right to the top left

Pay attention to

• Background-image has a higher priority than background-color. This means that if you set both background-image and background-color, the latter will be overwritten.
• Background does not support abbreviations.

15. Rich text

Weex added a new label richText in version 0.20. However, in previous versions, WEEX does not support the rich text function. The basic rich text function is represented by pictures, because the WEEX font label only has text, and all weeX label structures are flexible layout. However, WEEx also provides a solution, that is, the space in WEEX also takes up a certain amount of space, so it can support some special rich text functions.

The rich text

<template>
  <div>
    <image class="tag-image" :src="data.userType | typeImg" :style="{ top: `The ${getEnvValue (17,18,13)}px`}"></image>
    <text class="item-title"> {{' ' + getEnvValue(' '.' '.' ')+ data.title}}</text>
  </div>
</template>
<script>
exportDefault {methods: {// getEnvValue(webValue, iOSValue, androidValue) {if (this.isWeb) {
        return webValue;
      } else if (this.isIos) {
        return iOSValue;
      } else if (this.isAndroid) {
        return androidValue;
      }
      return iOSValue;
    },
  }
}
</script>
Copy the code

Input events

1. The input box cannot be emptied

When you want to empty the input field, you cannot empty the bound value directly. Instead, you should hide the values displayed in the input field and then empty them after a rendering.

<template>
  <div class="input-wrap">
    <wxs-icon name="search" size='40px' color='#b2b2b2'></wxs-icon>
    <input
      :value="searchKeyWord"
      returnKeyType="search"
      @focus="onInputFocus"
      @blur="onInputBlur"
      @input="onInputInput"
      @return="onInputReturn"
      class="input-hint"
      ref="input"
      placeholder-color="#cccccc"
      :singleline="true"
      :lines="1" />
    <div class="erase" @click="onClickErase">
      <wxs-icon v-if="isInputFocus || isWeb" name="erase" size='36px' color='#b2b2b2' ></wxs-icon>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchKeyWord: ' '}; }, methods: {onClickErase() {
      this.searchKeyWord = ' ';
      this.$nextTick(() => {
        this.searchKeyWord = ' ';
      });
    },
  }
}
</script>
Copy the code

2. Weex Input box component input event BUG in Android

When using a V-Model binding value, the input event cannot be triggered when reverting to the original state of the binding value, which also affects the V-Model binding. On Android, it listens to the input event of the input box; Open the page to select the input box, input a string of text to the input box, then successfully trigger the input event. Pressing delete on the keyboard initially successfully triggers the input event, which does not fire when the last character is deleted. The same thing happens if you use v-model instead of value to set values. Through consulting data, found this to be weex a hole of the existence of the android SDK point (the author didn’t contact with the android development) segmentfault.com/q/101000001… There is a way to modify the source code to solve the BUG. The main problem is that in WXInput’s subclass AbstractEditComponent, the mIgnoreNextOnInputEvent variable was set to TRUE during component initialization, causing the first input to fail. The method used in the previous problem can also be used to solve the problem, or the initial value of the searchKeyWord can be set to undefined to avoid the problem.

component

The command

Avoid the JS keyword, reserved keyword, and component name provided by WEEX. If loading is used as a component name, the component name will be blank on ios and Android.

<template> <div> <Loading></Loading> /* Use a different name */ </div> </template>Copy the code

Custom Slider component

The WEEx provides the Slider, but the indicator can only change the color and position, but not the size, so you need to customize the Slider

<template> <! --> <div class="activity-wrap" :style="{ top: (topSafeAreaHeight + 123) + 'px' }">
    <slider class="activity" :autoPlay="true" interval="4000" @change="sliderChange">
      <div class="activity-cell"
        v-for="(item, index) in bannerList" :key="index"
        @click="clickInBanner(item)">
        <image class="activity-wrap-bg" resize="cover" :src="imageRes.bannerBgImg"></image>
        <image class="activity-wrap-image" :src="item.pictureUrl"></image>
      </div>
    </slider>
    <div class="slider-indicator-wrap" v-if="bannerList && bannerList.length > 1">
      <div
        v-for="(icon, index) in bannerList"
        :key="index"
        ref="activeSliderKey"
        class="slider-indicator"
        :class="[index === 0 ? 'slider-indicator-left' : '']"
      ></div>
    </div>
  </div>
</template>
<script>
exportdefault { ... Const self = this; const self = this;if (self.bannerList.length > 0) {
        for (let i = 0; i < self.bannerList.length; i += 1) {
          animation.transition(self.$refs.activeSliderKey[i], {
            styles: {
              backgroundColor: 'rgba (255, 255, 255, 0.3)',
            },
            delay: 0,
          });
        }
        animation.transition(self.$refs.activeSliderKey[index], {
          styles: {
            backgroundColor: 'rgba(255, 255, 255)',
          },
          delay: 0,
        });
      }
    },
  },
}
</script>
Copy the code

animation

Weex does not support frame animation, but its own Transition can be passed in a style and controlled by setInterval

animation.js

const animation = weex.requireModule('animation');

export function transition(el, opts, dd) {
  const duration = dd || 400;
  if(! el) {return Promise.resolve();
  }
  return new Promise((resolve) => {
    animation.transition(el, {
      duration,
      timingFunction: 'linear', delay: 0, ... opts, }, resolve); }); }export function run(el) {
  transition(el, {
    styles: {
      transform: 'scale (1.02)',
    },
  }, 100).then(() => {
    transition(el, {
      styles: {
        transform: 'scale (1.08)',}}, 200); }).then(() => { transition(el, { styles: { transition:'scale(1)',}}, 300); }); }Copy the code

page.vue

<template>
  <div ref="btn"></btn>
</template>
<script>
export default {
  ...
  mounted() {
    setTimeout(() => {
      setInterval(() => {
        animation.run(this.$refs.btn);
      }, 600);
    }, 300);
  },
}
</script>
Copy the code

Refer to the link

• Penguin e-sports WEEX Practice – UI development
• The Android V-Model bidirectional binding in WEEX does not respond when the first character is entered