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

网友投稿 416 2023-11-09

前言

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

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

Mpvue官网：http://mpvue.com/

demo地址 ：https://github.com/ccwyn/mpvuedemo/tree/master/my-project

为什么要用mpvue

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

mpvue的特点

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

项目搭建

项目构成

1、采用mpvue 官方脚手架搭建项目底层结构

2、采用Fly.js 作为http 请求库

3、采用stylus作为项目css预处理工具。

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
├── 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 // 主配置文件

搭建过程

一、通过官方文档 快速创建一个小程序http://mpvue.com/mpvue/

?
1
2
3
4
5
6
7
8
9
10
11
# 全局安装 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

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

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

2、config.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//引入 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

?
1
2
3
# npm安装 flyio
$ npm install stylus --save-dev
$ npm install stylus-loader --save-dev

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

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

2、mixin.stylus

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 单行显示省略号
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

?
1
2
3
@import "./mixin.styl"
@import "./reset.styl"
@import "./common.styl"

4、引入

在 app.vue 中引入

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

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

五 配置 config目录

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

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

2、tips.js

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

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

?
1
2
import Tips from ./config/tip
Vue.prototype.$tips=Tips

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/**
* 提示与加载工具类
*/
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目录 目录结构为：

?
1
2
3
4
5
6
7
│ ├── 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对象。

?
1
2
import store from ./store
Vue.prototype.$store=store;

3、state.js

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

?
1
2
3
4
const state={
test: 0,
}
export default state

4、mutation-types.js

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

?
1
export const TEST = TEST // 这是测试的

5、mutations.js

在mutations.js中写处理方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import * as types from ./mutation-types
const matations={
/**
* state:当前状态树
* data: 提交matations时传的参数
*/
//是否有渠道
[types.TEST] (state,data) {
state.TEST = data;
},
}
export default matations

6、使用方法

?
1
2
3
4
5
6
7
8
9
10
11
12
# 在 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）

?
1
2
# 安装vuex-persistedstate
$ npm install vuex-persistedstate --save

在 store index.js 引入

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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地址 ：https://github.com/ccwyn/mpvuedemo/tree/master/my-project

您可能感兴趣的文章:mpvue小程序仿qq左滑置顶删除组件浅谈使用mpvue开发小程序需要注意和了解的知识点详解基于mpvue的小程序markdown适配解决方案使用Vue.js开发微信小程序开源框架mpvue解析mpvue中配置vuex并持久化到本地Storage图文教程解析mpvue跳转页面及注意事项

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 小程序 代码 解析 root
上一篇:Python 作为小程序后端的三种实现方法(推荐)
下一篇:开源一个微信小程序仪表盘组件过程解析
相关文章

 发表评论

暂时没有评论，来抢沙发吧~