Detailed explanation of the steps for developing small programs in mpvue

This time I will bring you a detailed explanation of the steps to develop a small program with mpvue. What are the precautions for developing a small program with mpvue? The following is a practical case, let's take a look.

1. ExampleLife cycle

In addition to the life cycle of Vue itself, mpvue is also compatible with the life cycle of small programs. The hooks of this part of the life cycle come from WeChat Page of the mini program, except for special circumstances, is not recommended to use the life cycle hook of the mini program.

app part:

• onLaunch, initialize

• onShow, when the applet starts, or Entering the foreground from the background displays

• onHide. When the applet enters the background from the foreground,

page part:

• onLoad, monitor page loading

• onShow, monitor page display

• onReady, monitor page initial rendering completed

• onHide, monitor page hiding

• onUnload, monitor page unloading

• onPullDownRefresh, monitor user Pull-down action

• onReachBottom, handler function for page pull-down event

• onShareAppMessage, user clicks the upper right corner to share

• onPageScroll, page scrolling

• onTabItemTap, when the current tab page is clicked, triggered when tab is clicked (mpvue 0.0.16 supports)

Usage example:

new Vue({
  data: {
    a: 1
  },
  created () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  },
  onShow () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a, '小程序触发的 onshow')
  }
})
// => "a is: 1"

Note:

1. Do not use arrow functions on option properties or callbacks, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Because arrow functions are bound to the parent context, this will not be the Vue instance as you would expect, and this.a or this.myMethod will be undefined.

2. The query parameter of the WeChat applet page is obtained through onLoad. mpvue has optimized this and directly passes this.$root.$mp.query To obtain the corresponding parameter data, its call needs to be used after the onLoad life cycle is triggered, such as onShow, etc.

2. Template syntax

Does not support pure-HTML

All BOM/DOM in the mini program cannot be used, which means that the v-html command cannot be used.

Does not support some complex JavaScript rendering expressions

We will directly encode the {{}} double curly brackets in the template into the wxml file. Due to the capability limitations of the WeChat applet (Data binding), complex JavaScript expressions cannot be supported.

Currently available are - * % ?: ! == === > < [] ., and the rest need to be improved.

Filters are not supported

The rendering part will be converted to wxml. wxml does not support filters, so this part of the function is not supported.

Function not supported

Using functions in methods within template is not supported.

List rendering

Full support for official documents: list rendering

Just need to pay attention to one thing,nested list rendering must specify different index!

<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template></p>
<h3 style="text-align: left;"><strong><a href="http://www.php.cn/code/5688.html" target="_blank">Event handler</a></strong></h3>
<p style="text-align: left;">The change event in input and textarea will be converted into a blur event. </p>
<h4 style="text-align: left;"><strong>Note: </strong></h4>
<ul class=" list-paddingleft-2">
<li>
<p style="text-align: left;">#For native events not in the list, you can also use the bindregionchange event to directly change the bind to @# on the dom. ## @regionchange, at the same time, this event is also very special. It has two event types: begin and end<br>, which makes it impossible for us to distinguish what event it is in handleProxy, so you can listen to events at the same time when listening to such events. Both name and event type<br></p>
<pre class="brush:php;toolbar:false">   <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>

小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑。

事件修饰符

- .stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！

• .prevent 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面

• .capture 支持 1.0.9

• .self 没有可以判断的标识

• .once 也不能做，因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意，暂不考虑

其他 键值修饰符 等在小程序中压根没键盘，所以。。。

三、组件

有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render，和