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


Posted in Javascript onMay 22, 2018

前言

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的特点

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

搭建过程

一、通过官方文档 快速创建一个小程序http://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

二、微信开发者工具打开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地址 :https://github.com/ccwyn/mpvuedemo/tree/master/my-project

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

Javascript 相关文章推荐
JavaScript toFixed() 方法
Apr 15 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
js捕获鼠标滚轮事件代码
Dec 16 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
React中的refs的使用教程
Feb 13 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
安装vue-cli的简易过程
May 22 #Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 #Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 #Javascript
Vue页面骨架屏的实现方法
May 22 #Javascript
Angular网络请求的封装方法
May 22 #Javascript
vue input输入框模糊查询的示例代码
May 22 #Javascript
vue 中swiper的使用教程
May 22 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
js编写简易的计算器
2020/07/29 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
医学专业毕业生个人的求职信
2013/12/04 职场文书
往来会计岗位职责
2013/12/19 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书