欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于mpvue的小程序项目搭建的步骤

程序员文章站 2022-05-16 21:53:10
前言 mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架,按官网说可以达到小程序与h5界面使用一套代码。使用此框架,开发者将得到完整的 vue...

前言

mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架,按官网说可以达到小程序与h5界面使用一套代码。使用此框架,开发者将得到完整的 vue.js 开发体验,同时为 h5 和小程序提供了代码复用的能力。如果想将 h5 项目改造为小程序,或开发小程序后希望将其转换为 h5,mpvue 将是十分契合的一种解决方案。

mpvue官网:
demo地址 :

为什么要用mpvue

首先微信小程序推荐简洁的开发方式,通过多页面聚合完成轻量的产品功能。小程序以离线包方式下载到本地,通过微信客户端载入和启动,开发规范简洁,技术封装彻底,自成开发体系,本身定位为一个简单的逻辑视图层框架,官方并不推荐用来开发复杂应用,但业务需求却难以做到精简。复杂的应用对开发方式有较高的要求,如组件和模块化、自动构建和集成、代码复用和开发效率等,但小程序开发规范较大的限制了这部分能力。所以为了解决上述问题,提高开发效率,提供更好的开发体验,通过使用基于 vue.js 的mpvue框架来开发微信小程序。

mpvue的特点

  1. 彻底的组件化开发能力:提高代码
  2. 完整的 vue.js 开发体验
  3. 方便的 vuex 数据管理方案:方便构建复杂应用
  4. 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotreload
  5. 支持使用 npm 外部依赖
  6. 使用 vue.js 命令行工具 vue-cli 快速初始化项目
  7. h5 代码转换编译成小程序目标代码的能力

项目搭建

项目构成

1、采用mpvue 官方脚手架搭建项目底层结构
2、采用fly.js 作为http 请求库
3、采用stylus作为项目css预处理工具。

项目框架结构和文件目录结构

主要关注应用程序代码所在的src目录

├── 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 // 主配置文件

搭建过程

一、通过官方文档 快速创建一个小程序

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

二、微信开发者工具打开dist目录,查看页面是否显示。

三、配置 fly

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

1、在src下 创建 http目录 目录结构为:

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

2、config.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

3、api.js

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))};

四、配置 stylus

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

1、在src下 创建 stylus目录 目录结构为:

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

2、mixin.stylus

考虑到将来可能要复用到h5项目中 所以这里写了一个 单位转换的方法【px2rem】,并没有使用存在平台差异的rpx,以后即便迁移到web 端, 只需要处理【px2rem】的单位转换逻辑就好

// 单行显示省略号
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

3、index.stylus

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

4、引入

在 app.vue 中引入

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

**如果要用到mixin.stylus中的方法,需要在页面的stylus文件中 单独引用 mixin.stylus

五 配置 config目录

1、在src下 创建 config目录 目录结构为:

│ ├── 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,
})

在页面中引用

基于mpvue的小程序项目搭建的步骤

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 => {}
  }
 })
 ]
})

demo地址 :

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。