Comment construire un petit programme avec mpvue

Cette fois, je vais vous montrer comment utiliser mpvue pour construire un petit programme. Quelles sont les précautions pour construire un petit programme avec mpvue. Voici un cas pratique, jetons un oeil.

mpvue est un framework front-end qui utilise Vue.js pour développer de petits programmes (un projet open source de Meituan). Le framework est basé sur le Vue.js noyau et mpvue modifie les implémentations d'exécution et du compilateur de Vue.js afin qu'il puisse s'exécuter dans un environnement de mini-programme, introduisant ainsi un ensemble complet d'Vue.js expérience de développement pour le mini-programme développement.

mpvue, vous pouvez utiliser la syntaxe familière du framework vue. La liaison bidirectionnelle signifie que vous n'avez plus besoin d'utiliser this.setData de wx. Vous pouvez utiliser npm pour introduire facilement des tiers. .imagination. Personnellement, je pense que mpvue est plus simple que wepy et plus pratique pour démarrer. Le didacticiel mpuve de cinq minutes peut être rapidement construit.

Adresse git du projet : mpvue-demo (le code est entièrement commenté, il est très simple de construire un petit programme en utilisant mpvue, développez)

étape 1 : Consultez la documentation pour construire rapidement un simple projet mpvue

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

Ici, j'ai annulé vuex (gestion de l'état) et ESlint (inspection du code), car personnellement, je n'aime pas la spécification de détection des espaces et ;, vous pouvez la configurer en fonction de vos besoins.

étape 2 : Modifiez le code, ouvrez le répertoire dist avec les outils de développement WeChat et vérifiez si des modifications ont eu lieu.

étape 3 : Encapsuler les requêtes api et http (flyio est utilisé ici, à l'exception de l'annulation des requêtes, les autres fonctions sont fondamentalement similaires à axios, la taille n'est que de 4 Ko, un tiers d'axios)

package. Ajoutez des dépendances à json ou 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)
  })
  ...
 })
})

étape 4 : Montez l'API de requête et de projet encapsulée par flyio en tant que bibliothèque de composants sur l'objet prototype, afin que vous n'ayez pas besoin d'importer l'API encapsulée. js pour chaque page vue, utilisez directement this.$http pour appeler la méthode. (document officiel flyio)

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 });//将组件库挂载在原型对象上
 }
}

composant step5:vue (le composant carte est créé dans le projet officiel mpvue , Notez ici que la classe doit être écrite à l'intérieur du composant, sinon elle ne sera pas rendue)

étape 6 : Saut de page et transfert de paramètres (mpvue ne prend pas en charge vue-router ici)

Utilisez la méthode de saut de page WeChat, puis accédez à la page et utilisez this.$root.$mp.query pour obtenir les paramètres.

étape 7 : Introduisez weui et testez l'effet (introduisez la bibliothèque UI en fonction de vos besoins, elementUI n'est pas pris en charge, ou n'est pas utilisé).

Téléchargez weui.css et mettez-le dans le projet, importez le CSS, tel que : import '../static/weui/weui.css'

Points supplémentaires auxquels il faut prêter attention lors de l'utilisation de mpvue (reportez-vous à la documentation officielle pour plus de détails)

1 Les nouvelles pages doivent être redémarrées par npm run dev. .

2. Tous les BOM/DOM du mini programme ne peuvent pas être utilisés, ce qui signifie que la commande v-html ne peut pas être utilisée.

3. L'utilisation de la liaison de classe et de style sur les composants n'est actuellement pas prise en charge et doit être écrite à l'intérieur du composant.

4.mpvue peut prendre en charge les composants natifs de mini-programmes, tels que : picker,map, etc. Il convient de noter que la liaison d'événements sur les composants natifs doit être liée à la syntaxe de liaison d'événements de vue. Par exemple, les événements bindchange="eventName" doivent être écrits sous la forme @change="eventName"。

5 mpvue Il est recommandé d'utiliser la méthode de liaison v-model.lazy pour optimiser les performances. un curseur lors de la saisie dans la zone de saisie sous l'ancienne bibliothèque de base. v-model