1. Rapid infrastructure construction projects

This step is explained in great detail on the official website, so here is a brief description.

# 1. Global install VUE-CLI
Sudo permission is usually required
$ npm install --global vue-cli

# 2. Create a new project based on the MPvue-QuickStart template
# Newbie press Enter to select default
$ vue init mpvue/mpvue-quickstart my-project

# 3. Install dependencies
$ cd my-project
$ npm install
$ npm run dev
Copy the code

For details, please visit mpvue’s official website

1. Build a small program development environment

Small program development needs to cooperate with wechat special development tools, of course, this step is relatively simple, the development tool will be downloaded according to the prompts to install.

Once installed, the basic applets development environment is ready, and you can preview the basic demo by pulling in the project created in the previous step in the development tool.

Ii. Development Catalogue of the project

SRC is the development directory

  • The configuration file in main.js is packaged into the app.json configuration file of the applet, so you can configure the corresponding information here, for example: configure the navigation bar
exportDefault {config: {// if there is a ^ symbol in front of the page, it will be compiled into the home page. Other pages can be optional. We will automatically add the webpack entry page into the pages: ['pages/logs/main'.'^pages/index/main'],
        window: {
          backgroundTextStyle: 'light',
          navigationBarBackgroundColor: '#61A2F3',
          navigationBarTitleText: 'applet',
          navigationBarTextStyle: '#FFF'}}},Copy the code
  • Main.js in Pages is also a configuration file. For example,
exportNavigationBarTitleText: {navigationBarTitleText: {navigationBarTitleText:'applet'}}Copy the code

Note: Local images need to be placed in the static folder, which will be automatically packaged into DIST. The image path can be displayed normally only by using the image path in DIST. (There is no single solution)

Network request

In Vue, I often use Axios, but MPvue is inherited from Vue, but there is no way to use Axios directly. Flyio is recommended online. However, I feel more comfortable using the official API of the small program. Mpvue framework with applets API, in MPvue can directly use applets components, really friendly for beginners like me.

Flyio also provides the basic configuration for a small program environment. You can go to the official website for details.

Use Flyio in wechat mini programs

Later I decided that the native API for small programs was more suitable, but I used Flyio to list how I used it. (Although there is a suspicion of making up the words)

Var Fly=require(request.js);"flyio/dist/npm/wx"// NPM const request = new Fly(); / / to the interceptor, the global config Settings / / add interceptors request. The interceptors. Request. Use ((config, promise) = > {/ / for all requests to add custom header config. The headers ["X-Tag"] ="flyio";
    return config;
})
fly.config.baseURL="url"// Basic URL configurationexportdefault request; // 2. Import request import fly from where requests need to be used'. /.. /.. /request.js'// Simply use fly.get()"url", {params: {} // query condition}). Then (response => {// perform data manipulation based on the returned result});Copy the code

The use of applets native components in MPVue

For example, the switch component’s description of the switch in the applet

It can also be used directly in MPVue, but pay attention to the event binding and switch to the event binding in MPVue.

Mapping table of MPvue and applet event bindings

// Event mapping table, left for WEB events, right for applet events {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

The event.detail shown in the corresponding applet is visible in the console output in MPvue

Now, that’s the part marked red, and you can happily use the native components of the applet.

5. Life cycle

The life cycle is an important point in VUE, as it is here. Because it is a small program framework, MPVVUE is also compatible with the small program life cycle based on vUE life cycle.

This is not a very clear point so I won’t talk too much about it

Add-on: applets life cycle

App section: onLaunch, initialize onShow, display onHide when applet is launched, or enter foreground from background, display onHide when applet is entered background page section from foreground: OnLoad, listener page loads onShow, listener page displays onReady, listener page first renders onHide, listener page hides onUnload, listener page unloads onPullDownRefresh, listener user pulls down onReachBottom, OnShareAppMessage: the user clicks onPageScroll in the upper right corner to share onPageScroll. The page scrolls onTabItemTap. When the current page is a TAB page, clicking onTabItemTap will trigger (MPvue 0.0.16 support).Copy the code

Please visit the official website for more details.

A link to the

  • mpvue-githup
  • Mpvue official website
  • Applets official website
  • vue.js