Wepy framework it is a vUe-like framework, in the code style borrowed from Vue, itself has nothing to do with Vue.

MpVue framework is a framework formed from the core code of the whole Vue through secondary development, which is equivalent to empowering Vue itself and increasing the ability to develop wechat small programs.

The difference diagram of the three:

Points to note when using mpVue:

1. The V-HTML directive that dynamically inserts HTML is not available in the template

The interface of the applet is not based on the BOM/DOM of the browser, so it cannot be displayed dynamically by inserting HTML fragments into the interface template.

As an aside, what if there is a need to insert HTML snippets into applets? You can use components or wxParse(github.com/icindy/wxPa…

2. In templates, expressions in the {{}} syntax for data binding have many limitations

In Vue’s own template double parenthesis syntax, we can do richer things with bound variables, such as:

  • Functions under methods can be called, for example:
<template>
  <div>{{ formatMessage(msg) }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello,World"
    }
  },
  methods: {
    formatMessage(str) {
      return str.trim().split(',').join('#')
    }
  }
}
</script>
Copy the code
  • You can also call a member method of an object if the variable is an object

<div>{{ msg.trim().split(',').join('#') }}</div>

  • You can use filters to process variables, and the most useful scenario is formatting data

<div>{{ msg | format }}</div>

Above these good functions, in MPvue, remember that all can not use oh!!

We can only use some simple operators in double parentheses (+ – * %? :! == === > < [].) .

Consider using computed attributes to do this.

3. In the template, functions under methods cannot be called anywhere except for event listeners

Alternative: Evaluate properties

4. It is not possible to directly bind an object to a style or class attribute in a template

The best solution: calculate the properties

<template>
  <div :class="classStr"></div>
</template>

<script>
export default {
  data() {
    return {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  },
  computed: {
    classStr() {
      let arr = []
      for (let p in this.classObject) {
        if (this.classObject[p]) {
          arr.push(p)
        }
      }
      return arr.join(' ') 
    }
  }
}
</script>
Copy the code

5. In the template, if v-for is nested, you must specify index

In general, when we nested the loop rendering array in the Vue template, it would look like this:

<template>
  <ul v-for="category in categories">
    <li v-for="product in category.products">{{product.name}}</li>
  </ul>
</template>
Copy the code

In mpVUE, however, the v-FOR of this nested structure must be indexed on each layer of the V-FOR with a different name:

<template>
  <ul v-for="(category, index) in categories">
    <li v-for="(product, productIndex) in category.products">{{product.name}}</li>
  </ul>
</template>
Copy the code

6. Points to note in event handling

In MPVue, events can be bound using the DOM event name of the Web. Mpvue maps the Web event name to the corresponding applet event name, which is listed as follows:

{click: 'tap', touchStart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touchend: 'touchend', tap: 'tap', longtap: 'longtap', input: 'input', change: 'change', submit: 'submit', blur: 'blur', focus: 'focus', reset: 'reset', confirm: 'confirm', columnchange: 'columnchange', linechange: 'linechange', error: 'error', scrolltoupper: 'scrolltoupper', scrolltolower: 'scrolltolower', scroll: 'scroll' }Copy the code

In addition to the above, the change events of the Web form components and

Then, keyboard events like keyDown and keyPress are gone, because the applet doesn’t have a keyboard, so it doesn’t need them.

7. For forms, use the form components native to the applet directly

Other Matters needing attention

In addition, vue-Router is usually used for page routing when Vue develops Web applications. But in mpvue applet development, can not use this way, please use tag and applet native API wx.navigateTo, etc., to do routing function.

There is a request for back-end data, we usually use axiOS and other Ajax libraries in Web development to achieve, but it is not available in small program development, please also use the native API wx.request and other small programs to carry out.

Wechat applet UI component library

  • WeUI
  • iView
  • ZanUI
  • MinUI
  • Wux
  • ColorUI