Comment créer un projet d'applet mpvue

Cette fois, je vais vous montrer comment construire un projet d'applet mpvue, et quelles sont les précautions lors de la construction d'un projet d'applet mpvue. Ce qui suit est un cas pratique, jetons un coup d'œil.

Avant-propos

mpvue est un framework front-end open source développé par Meituan qui a la même syntaxe que vue.js et peut se développer rapidement petits programmes. Presse Le site officiel indique qu'un ensemble de codes peut être utilisé pour réaliser des mini programmes et des interfaces H5. Grâce à ce framework, les développeurs bénéficieront d'une expérience complète de développement Vue.js, tout en offrant des capacités de réutilisation de code pour les programmes H5 et mini. Si vous souhaitez transformer un projet H5 en petit programme, ou si vous développez un petit programme et souhaitez le convertir en H5, mpvue sera une solution très adaptée.

Site officiel de Mpvue : http://mpvue.com/
Adresse de démonstration : https://github.com/ccwyn/mpvuedemo/tree/master/my-project

Pourquoi utiliser mpvue

Tout d'abord, l'applet WeChat recommande une méthode de développement concise pour compléter les fonctions légères du produit grâce à une agrégation de plusieurs pages. Le mini-programme est téléchargé localement sous forme de package hors ligne, chargé et démarré via le client WeChat. Les spécifications de développement sont simples, la technologie est soigneusement encapsulée et il dispose de son propre système de développement. Il est positionné comme un simple cadre de couche de vue logique. n'est pas officiellement recommandé pour le développement d'applications complexes, mais les exigences métier sont difficiles à simplifier. Les applications complexes ont des exigences plus élevées en matière de méthodes de développement, telles que les composants et la modularisation, la construction et l'intégration automatiques, la réutilisation du code et l'efficacité du développement, etc. Cependant, les petites spécifications de développement de programmes limitent considérablement ces capacités. Par conséquent, afin de résoudre les problèmes ci-dessus, d'améliorer l'efficacité du développement et d'offrir une meilleure expérience de développement, l'applet WeChat est développée à l'aide du framework mpvue basé sur Vue.js.

Caractéristiques de mpvue

1. Capacités approfondies de développement de composants : améliorer le code

2. Expérience complète de développement Vue.js

3. Solution pratique de gestion de données Vuex : facile à créer des applications complexes

4. Construction rapide de webpacks Mécanisme : construction personnalisée stratégie, hotReload pendant la phase de développement

5. Prend en charge l'utilisation des dépendances externes npm

6. Utilisez rapidement l'outil de ligne de commande Vue.js vue-cli Projet d'initialisation

7. La possibilité de convertir le code H5 en code cible d'un petit programme

projet Build

Composition du projet

1. Utilisez l'échafaudage officiel mpvue pour construire la structure sous-jacente du projet
2. Utilisez Fly.js comme requête http. bibliothèque
3. Utilisez le stylet comme outil de prétraitement CSS du projet.

Structure et fichiers du cadre du projetStructure des répertoires

Concentrez-vous principalement sur le répertoire src où se trouve le code de l'application

├── src // 我们的项目的源码编写文件
│ ├── components // 组件目录
│ │ └── head //导航组件
│ ├── config //公共配置
│ │ └── tips // 提示与加载工具类
│ ├── http //http请求配置文件
│ │ └── api // 接口调用文件
│ │ └── config //fly 配置文件
│ ├── pages //项目页面目录
│ ├── store //状态管理 vuex配置目录
│ │ └── actions.js //actions异步修改状态
│ │ └── getters.js //getters计算过滤操作
│ │ └── mutation-types.js //mutations 类型
│ │ └── mutations.js //修改状态
│ │ └── index.js //我们组装模块并导出 store 的地方
│ │ └── state.js //数据源定义
│ ├── stylus //stylus css处理器目录
│ │ └── common.styl // 全局css样式
│ │ └── index.styl // stylus 出口
│ │ └── mixin.styl //mixin 方法
│ │ └── reset.styl //reset css
│ ├── untils //工具函数目录
│ │ └── index.js
│ ├── App.vue // APP入口文件
│ ├── main.js // 主配置文件

Processus de construction

1 Créez rapidement un petit programme via des documents officielshttp://mpvue. com/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

2. Ouvrez le répertoire dist avec les outils de développement WeChat et vérifiez si la page est affichée.

3. Configurez fly

# npm安装 flyio
$ npm install flyio --save

1. Créez le répertoire http sous src. >2 , config.js

 │ ├── http       //http请求配置文件
 │ │  └── api.js      // 接口调用文件
 │ │  └── config.js     //fly 配置文件

3, api.js

//引入 fly
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly;
//配置请求基地址
// //定义公共headers
// fly.config.headers={xx:5,bb:6,dd:7}
// //设置超时
// fly.config.timeout=10000;
// //设置请求基地址
// fly.config.baseURL="https://wendux.github.io/"
//添加拦截器
fly.interceptors.request.use((config,promise)=>{
 //给所有请求添加自定义header
 config.headers["X-Tag"]="flyio";
 return config;
})
// Vue.prototype.$http=fly //将fly实例挂在vue原型上
export default fly

4. Stylet de configuration

import fly from './config'
import qs from 'qs'
// 配置API接口地址
let root ='接口域名';
/**
 * 接口模版====post
 *
 * export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))};
 *
 * 接口模版====get
 *
 * export const test1 = function(){return fly.get(`${root}/api/getNewsList`)}
 *
 *
 * 用法：
 * 在 页面用引入 test
 * import {test} from '../../http/api.js'
 *
 * test(params).then(res=>{ console.log(res) })
 */
export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))};

1 . Créez le répertoire stylet sous src. La structure du répertoire est :

# npm安装 flyio
$ npm install stylus --save-dev
$ npm install stylus-loader --save-dev

2. Dans les projets h5 à l'avenir, une méthode de conversion d'unités [px2rem] est donc écrite ici, et rpx, qui présente des différences de plate-forme, n'est pas utilisé. Même s'il est migré vers le Web à l'avenir, il suffit de le gérer. la logique de conversion d'unité de [px2rem]

 │ ├── stylus //stylus css处理器目录
 │ │ └── common.styl // 全局css样式
 │ │ └── index.styl // stylus 出口
 │ │ └── mixin.styl //mixin 方法
 │ │ └── reset.styl //reset css

3. index.stylus

// 单行显示省略号
no-wrap()
 text-overflow: ellipsis
 overflow: hidden
 white-space: nowrap
// 多行显示省略号
no-wrap-more($col)
 display: -webkit-box
 -webkit-box-orient: vertical
 -webkit-line-clamp: $col
 overflow: hidden
//rem转换 $px / 75 *1rem
px2rem($px)
 $px * 1rpx

4. 🎜> dans app.vue et introduisez

**Si vous souhaitez utiliser les méthodes de mixin.stylus, vous devez référencer mixin.stylus séparément dans le fichier stylet de la page

@import "./mixin.styl"
@import "./reset.styl"
@import "./common.styl"

Cinq répertoires de configuration

1. Créez le répertoire de configuration sous src. La structure du répertoire est :

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
 @import "stylus/index.styl"
</style>

.

│ ├── config      //公共配置 
│ │  └── tips.js     // 提示与加载工具类

2、tips.js

考虑到将来可能要复用到h5项目中 所以这里将微信提供的提示与加载框封装成工具类，以后即便迁移到web 端, 只需要删除tips.js的wx api就可以了。

可以在 main.js中引入，绑定到原型上

import Tips from './config/tip'
Vue.prototype.$tips=Tips

在页面中  this.$tips.alert("请输入手机号")调用

/**
 * 提示与加载工具类
 */
export default class Tips {
 constructor() {
 this.isLoading = false;
 }
 /**
 * 弹出提示框
 */
 static success(title, duration = 500) {
 setTimeout(() => {
  wx.showToast({
  title: title,
  icon: "success",
  mask: true,
  duration: duration
  });
 }, 300);
 if (duration > 0) {
  return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve();
  }, duration);
  });
 }
 }
 /**
 * 弹出确认窗口
 */
 static confirm(text, payload = {}, title = "提示") {
 return new Promise((resolve, reject) => {
  wx.showModal({
  title: title,
  content: text,
  showCancel: true,
  success: res => {
   if (res.confirm) {
   resolve(payload);
   } else if (res.cancel) {
   reject(payload);
   }
  },
  fail: res => {
   reject(payload);
  }
  });
 });
 }
 static toast(title, onHide, icon = "success") {
 setTimeout(() => {
  wx.showToast({
  title: title,
  icon: icon,
  mask: true,
  duration: 500
  });
 }, 300);
 // 隐藏结束回调
 if (onHide) {
  setTimeout(() => {
  onHide();
  }, 500);
 }
 }
 /**
 * 弹出加载提示
 */
 static loading(title = "加载中") {
 if (Tips.isLoading) {
  return;
 }
 Tips.isLoading = true;
 wx.showLoading({
  title: title,
  mask: true
 });
 }
 /**
 * 加载完毕
 */
 static loaded() {
 if (Tips.isLoading) {
  Tips.isLoading = false;
  wx.hideLoading();
 }
 }
 static share(title, url, desc) {
 return {
  title: title,
  path: url,
  desc: desc,
  success: function(res) {
  Tips.toast("分享成功");
  }
 };
 }
 static alert (text, ok) {
 if (ok === void 0) { ok = function (res) { }; }
 if (!text) {
  return;
 }
 wx.showModal({
  content: text,
  showCancel: false,
  confirmColor: '#000000',
  cancelColor: '#000000',
  success: ok
 });
 };
}
/**
 * 静态变量，是否加载中
 */
Tips.isLoading = false;

六、配置vuex

1、在src下 创建 store目录 目录结构为：

│ ├── store      //状态管理 vuex配置目录
│ │  └── actions.js    //actions异步修改状态
│ │  └── getters.js    //getters计算过滤操作
│ │  └── mutation-types.js    //mutations 类型
│ │  └── mutations.js    //修改状态
│ │  └── index.js    //我们组装模块并导出 store 的地方
│ │  └── state.js    //数据源定义

2、main.js中引入store, 并绑定到Vue构造函数的原型上，这样在每个vue的组件都可以通过this.$store访问store对象。

import store from './store'
Vue.prototype.$store=store;

3、state.js

在数据源文件中定义变量：

const state={
 test: 0,
}
export default state

4、mutation-types.js

在mutation-types.js中定义你的Mutation的名字

export const TEST = 'TEST' // 这是测试的

5、mutations.js

在mutations.js中写处理方法

import * as types from './mutation-types'
const matations={
 /**
  * state:当前状态树
  * data: 提交matations时传的参数
  */
 //是否有渠道
 [types.TEST] (state,data) {
  state.TEST = data;
 },
}
export default matations

6、使用方法

# 在 store index.js 中引入
import Vue from 'vue';
import Vuex from 'vuex';
import state from './state'
import mutations from './mutations'
Vue.use(Vuex);
export default new Vuex.Store({
 state,
 mutations,
})

在页面中引用

7、将vuex中的数据持久化到本地 （使用vuex-persistedstate）

# 安装vuex-persistedstate
$ npm install vuex-persistedstate --save

在 store index.js 引入

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state'
import mutations from './mutations'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
export default new Vuex.Store({
 state,
 mutations,
 plugins: [
 createPersistedState({
  storage: {
  getItem: key => wx.getStorageSync(key),
  setItem: (key, value) => wx.setStorageSync(key, value),
  removeItem: key => {}
  }
 })
 ]
})

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

推荐阅读：

Vue.js实现表格增删步奏详解

如何使用PHP实现微信小程序人脸识别刷脸登录

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!