How to build a small program with mpvue

This time I will show you how to use mpvue to build a small program, and what are the precautions for building a small program with mpvue. The following is a practical case, let's take a look.

mpvue is a front-end framework that uses Vue.js to develop small programs (an open source project of Meituan). The framework is based on the core of Vue.js, and mpvue has modified the runtime and compiler implementations of Vue.js so that it can run in a small program environment, thereby providing convenience for small programs. Program development introduces a complete Vue.js development experience.

mpvue You can use the vue framework syntax that you are familiar with. Two-way binding means that you no longer need to use this.setData of wx. You can use npm to easily introduce third parties. It is really poverty that limits me. imagination. Personally, I feel that mpvue is simpler than wepy and more convenient to get started. The mpuve five-minute tutorial is quick to build.

Project git address: mpvue-demo (code comments are complete, it is very simple to build a small program using mpvue, expand)

step1: View the documentation to quickly build a simple mpvue project

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

Here I canceled vuex (state management) and ESlint (code inspection), because I personally don’t like the specification of detecting spaces and;, you can configure it according to your needs.

#step2: Modify the code and open the dist directory with the WeChat developer tools to check whether changes have occurred.

step3: Encapsulate api and http requests (flyio is used here. Except for request cancellation, other functions are basically similar to axios. The size is only 4kb, one-third of axios)

package. Add dependencies to json or npm install flyio

var Fly=require("../lib/wx") //wx.js为您下载的源码文件
// var Fly=require("flyio/dist/npm/wx") //npm引入方式
var fly=new Fly(); //创建fly实例
//添加拦截器
fly.interceptors.request.use((config,promise)=>{
  //给所有请求添加自定义header
  config.headers["X-Tag"]="flyio";
  return config;
})
//配置请求基地址
fly.config.baseURL="https://wendux.github.io/"
...
Page({
 //事件处理函数
 bindViewTap: function() {
  //调用
  fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
   //输出请求数据
   console.log(d.data)
   //输出响应头
   console.log(d.header)
  }).catch(err=>{
   console.log(err.status,err.message)
  })
  ...
 })
})

step4: Mount the request and project api encapsulated by flyio as a component library on the prototype object, so that you don’t need to import the encapsulated js for each vue single page, use this directly .$http call method. (flyio official document)

httpUtil.js

var Fly=require("../lib/wx") //wx.js为您下载的源码文件
// var Fly=require("flyio/dist/npm/wx") //npm引入方式
var fly=new Fly(); //创建fly实例
//添加拦截器
fly.interceptors.request.use((config,promise)=>{
  //给所有请求添加自定义header
  config.headers["X-Tag"]="flyio";
  return config;
})
//配置请求基地址
fly.config.baseURL="https://wendux.github.io/"
...
Page({
 //事件处理函数
 bindViewTap: function() {
  //调用
  fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
   //输出请求数据
   console.log(d.data)
   //输出响应头
   console.log(d.header)
  }).catch(err=>{
   console.log(err.status,err.message)
  })
  ...
 })
})

apiUtil.js

/**
 * Created by yuchen on 2018/4/2.
 */
//封装httpApi
import request from './httpUtil'
const host = "https://XXX.cn"
const api = {
 // test地址
 authorList:() => request.get(`${host}/index/list_author_recommend.html`)
}
// export default api
export default { //作为组件库(install)
 install: function(Vue,name="$http") {//自定义名字(vue-resource也使用$http)
  Object.defineProperty(Vue.prototype, name, { value: api });//将组件库挂载在原型对象上
 }
}

step5:vue component (the card component is created in the mpvue official project, pay attention to the class requirement here Write it inside the component, otherwise it will not be rendered)

step6: Page jump and parameter transfer (mpvue does not support vue-router here)

Use WeChat’s page jump method, and then jump Go to the page and use this.$root.$mp.query to get the parameters.

step7: Introduce weui and test the effect (introduce the UI library according to your needs, elementUI is not supported, or not used).

Download weui.css and put it into the project, import the css, such as: import '../static/weui/weui.css'

Additional points that need to be paid attention to when using mpvue (refer to the official documentation for details)

1. New pages require npm run dev to be restarted.

2. All BOM/DOM in the mini program cannot be used, which means that the

v-html command cannot be used.

3. The use of Class and Style binding on components is not currently supported and needs to be written inside the component.

4.mpvue can support native components of mini programs, such as:

picker, map, etc. It should be noted that event binding on native components needs to be done with vue event binding syntax to bind, such as bindchange="eventName" events need to be written as @change="eventName".

5.

mpvue It is recommended to use the v-model.lazy binding method to optimize performance. In addition, v-model is used in the old There may be a problem with cursor reset when inputting in the input box under the basic library.

6. When writing a page jump, pass in dynamic parameters, which need to be written as: url, such as:

7. Use

this.$root.$mp.query to obtain the options passed by the applet during page onLoad. Use this.$root.$mp.appOptions to obtain the options passed by the mini program during app onLaunch/onShow.

8. Using this.$root.$mp.query to obtain parameters needs to be obtained in monted, and Cannot read property 'query' of undefined will be reported in created.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Vue.js implementation of table addition and deletion steps detailed explanation

How to quickly solve jQuery request transmission Chinese parameter garbled

The above is the detailed content of How to build a small program with mpvue. For more information, please follow other related articles on the PHP Chinese website!