Use mpvue to develop WeChat applet

foreword

When the 2016 Mini Program first came out, I was ready to take some time to learn it. Unfortunately, in reality, there are too many projects in hand, one after another, and there is no need to develop small programs, so it is delayed again and again.

Until last week, there was finally a small program project. If you are learning Mini Programs now, it will definitely be too late (I will give you a week). Just some time ago, I saw that Meituan has open sourced a framework mpvue that uses vue to develop WeChat applets . Because vue is usually used a lot, I decided to use mpvue for development.

Introduction to mpvue

Let's take a look at the introduction on the mpvue official website:

mpvue is a front-end framework for developing small programs using Vue.js. The framework is based on the core of Vue.js, and mpvue modifies the runtime and compiler implementation of Vue.js so that it can run in the applet environment, thus introducing a complete set of Vue.js development experience for applet development.

mpvue advantage

1. Thorough componentized development capabilities: improve code reusability
2. Complete Vue.js development experience
3. Convenient Vuex data management solution: easy to build complex applications
4. Fast webpack build mechanism: custom build strategy, hotReload in development phase
5. Support for using npm external dependencies
6. Use the Vue.js command line tool vue-cli to quickly initialize the project
7. The ability of H5 code conversion and compilation into applet object code

development process

First use vue-cli to initialize a project. If you don't know vue-cli, please move to the vue official website to learn.

Below is a project directory structure.

It is exactly the same as developing vue, but it should be noted that the applet does not support dom operation, so the ref in vue cannot be used.

For other basics, you can see the official website of mpvue, which has detailed instructions for use. The following mainly talks about a pit encountered in the development process.

Problems encountered in mpvue development

1. Routing jump

In vue, vue-router is used for routing jumps. In mpvue, you only need to use the a tag.

<a href="/page/counter/main?text=123">

At the same time, you can also use the api provided by the applet to complete the page jump

 wx.navigateTo({
   url: `/pages/counter/main?text=${this.text}`
 });

2. Input box cursor position

When entering content in the input input box, when I want to modify the text that has been entered before, move the cursor to the position that needs to be modified.
After the modification, the cursor automatically runs to the end, which is not good for the user experience.

  <input type="text" v-model="text">

Can be used v-model.lazybut lazy will only fire when the input box loses focus. You can use setTimeout to delay execution.

  <input type="text" v-model.lazy="text">
  
  setTimeout(() => {
      ...
      let ipt = this.text;
      ... 
  },100)
  

This will solve it.

3. Pop-up layer scrolling penetration

I wrote a simple pop-up window and found the content in the scrolling pop-up layer, and the content behind it also scrolled. At first I thought it was enough to stop the bubbling. I tried it, but it still doesn't work. I saw the solution provided by others in issues, tried it, and it can be used.

<scroll-view :scroll-y="scroll" style="height:200px" scroll-with-animation="true">
.....
<-- 弹出层 -->
 <div class="layer">
  ....
 </div>

</scroll-view>

When the popup button is clicked, set scroll to false. When the close button is clicked, set scroll to true again. Also set the style of the body

body{
    overflow-y: hidden;
    height: 100%;
}

4. After the introduction of echarts, the file is too large

The project needs to introduce echarts. After direct introduction, the packaged volume exceeds 2M, and there is no way to submit it. echarts provides a stripped-down version, and we can import the stripped-down version.

import echarts from "echarts/dist/echarts.simple.min";
import mpvueEcharts from "mpvue-echarts";

For specific use of echarts, please see the documentation for a detailed introduction.

5. Page Load Lifecycle

When jumping from one page to another, we cannot use created to initialize the content returned by the interface on the new page.

Because the first load of the applet will execute all the created pages.

We can use the following method

 async onLoad() {
    ....
 }

concluding remarks

If you have used vue before, then using mpvue to develop small programs is very fast and can basically be seamlessly connected.

There are still pits in mpvue, but the functions of the later iterative versions will become more and more perfect.