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 - * % ?: ! == === >

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>
        <li>
            {{item.value}}
        </li>
    </ul>
</template>

Event handler

The change event in input and textarea will be converted into a blur event.

Note:

• #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
  , 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
  

     <map><map></map></map>

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

• 事件修饰符

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

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

• .capture 支持 1.0.9

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

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

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

三、组件

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

详细的不支持列表：

• 暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例： 样式是不会生效的)，因为编译到wxml，小程序不会生成节点，建议写在内部顶级元素上。

• Slot（scoped 暂时还没做支持）

• 动态组件

• 异步组件

• inline-template

• X-Templates

• keep-alive

• transition

• class

• style

小程序组件

mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

示例代码：

<picker>
    <view>
      当前选择: {{date}}
    </view>
</picker>

四、常见问题

1. 如何获取小程序在 page onLoad 时候传递的 options

在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。

2. 如何获取小程序在 app onLaunch/onShow 时候传递的 options

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

3. 如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },
   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端中排序算法实例详解

JS中使用接口步骤详解

The above is the detailed content of Detailed explanation of the steps for developing small programs in mpvue. For more information, please follow other related articles on the PHP Chinese website!