基于mpvue的小程序項(xiàng)目搭建的步驟

更新時間：2018年05月22日 14:00:32 作者：王阿王

mpvue 是美團(tuán)開源的一套語法與vue.js一致的、快速開發(fā)小程序的前端框架，這篇文章主要介紹了基于mpvue的小程序項(xiàng)目搭建的步驟，非常具有實(shí)用價值，需要的朋友可以參考下

前言

mpvue 是美團(tuán)開源的一套語法與vue.js一致的、快速開發(fā)小程序的前端框架，按官網(wǎng)說可以達(dá)到小程序與H5界面使用一套代碼。使用此框架，開發(fā)者將得到完整的 Vue.js 開發(fā)體驗(yàn)，同時為 H5 和小程序提供了代碼復(fù)用的能力。如果想將 H5 項(xiàng)目改造為小程序，或開發(fā)小程序后希望將其轉(zhuǎn)換為 H5，mpvue 將是十分契合的一種解決方案。

Mpvue官網(wǎng)：http://mpvue.com/
demo地址：https://github.com/ccwyn/mpvuedemo/tree/master/my-project

為什么要用mpvue

首先微信小程序推薦簡潔的開發(fā)方式，通過多頁面聚合完成輕量的產(chǎn)品功能。小程序以離線包方式下載到本地，通過微信客戶端載入和啟動，開發(fā)規(guī)范簡潔，技術(shù)封裝徹底，自成開發(fā)體系，本身定位為一個簡單的邏輯視圖層框架，官方并不推薦用來開發(fā)復(fù)雜應(yīng)用，但業(yè)務(wù)需求卻難以做到精簡。復(fù)雜的應(yīng)用對開發(fā)方式有較高的要求，如組件和模塊化、自動構(gòu)建和集成、代碼復(fù)用和開發(fā)效率等，但小程序開發(fā)規(guī)范較大的限制了這部分能力。所以為了解決上述問題，提高開發(fā)效率，提供更好的開發(fā)體驗(yàn)，通過使用基于 Vue.js 的mpvue框架來開發(fā)微信小程序。

mpvue的特點(diǎn)

徹底的組件化開發(fā)能力：提高代碼
完整的 Vue.js 開發(fā)體驗(yàn)
方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload
支持使用 npm 外部依賴
使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目
H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

項(xiàng)目搭建

項(xiàng)目構(gòu)成

1、采用mpvue 官方腳手架搭建項(xiàng)目底層結(jié)構(gòu)
2、采用Fly.js 作為http 請求庫
3、采用stylus作為項(xiàng)目css預(yù)處理工具。

項(xiàng)目框架結(jié)構(gòu)和文件目錄結(jié)構(gòu)

主要關(guān)注應(yīng)用程序代碼所在的src目錄

├── src // 我們的項(xiàng)目的源碼編寫文件
│ ├── components // 組件目錄
│ │ └── head //導(dǎo)航組件
│ ├── config //公共配置
│ │ └── tips // 提示與加載工具類
│ ├── http //http請求配置文件
│ │ └── api // 接口調(diào)用文件
│ │ └── config //fly 配置文件
│ ├── pages //項(xiàng)目頁面目錄
│ ├── store //狀態(tài)管理 vuex配置目錄
│ │ └── actions.js //actions異步修改狀態(tài)
│ │ └── getters.js //getters計(jì)算過濾操作
│ │ └── mutation-types.js //mutations 類型
│ │ └── mutations.js //修改狀態(tài)
│ │ └── index.js //我們組裝模塊并導(dǎo)出 store 的地方
│ │ └── state.js //數(shù)據(jù)源定義
│ ├── stylus //stylus css處理器目錄
│ │ └── common.styl // 全局css樣式
│ │ └── index.styl // stylus 出口
│ │ └── mixin.styl //mixin 方法
│ │ └── reset.styl //reset css
│ ├── untils //工具函數(shù)目錄
│ │ └── index.js
│ ├── App.vue // APP入口文件
│ ├── main.js // 主配置文件

搭建過程

一、通過官方文檔快速創(chuàng)建一個小程序http://mpvue.com/mpvue/

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

# 創(chuàng)建一個基于 mpvue-quickstart 模板的新項(xiàng)目
$ vue init mpvue/mpvue-quickstart my-project

# 安裝依賴
$ cd my-project
$ npm install
# 啟動構(gòu)建
$ npm run dev

二、微信開發(fā)者工具打開dist目錄，查看頁面是否顯示。

三、配置 fly

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

1、在src下創(chuàng)建 http目錄目錄結(jié)構(gòu)為：

 │ ├── http       //http請求配置文件
 │ │  └── api.js      // 接口調(diào)用文件
 │ │  └── 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}
// //設(shè)置超時
// fly.config.timeout=10000;
// //設(shè)置請求基地址
// 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實(shí)例掛在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下創(chuàng)建 stylus目錄目錄結(jié)構(gòu)為：

 │ ├── stylus //stylus css處理器目錄
 │ │ └── common.styl // 全局css樣式
 │ │ └── index.styl // stylus 出口
 │ │ └── mixin.styl //mixin 方法
 │ │ └── reset.styl //reset css

2、mixin.stylus

考慮到將來可能要復(fù)用到h5項(xiàng)目中所以這里寫了一個單位轉(zhuǎn)換的方法【px2rem】，并沒有使用存在平臺差異的rpx，以后即便遷移到web 端, 只需要處理【px2rem】的單位轉(zhuǎn)換邏輯就好

// 單行顯示省略號
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轉(zhuǎn)換 $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文件中單獨(dú)引用 mixin.stylus

五配置 config目錄

1、在src下創(chuàng)建 config目錄目錄結(jié)構(gòu)為：

│ ├── config      //公共配置 
│ │  └── tips.js     // 提示與加載工具類

2、tips.js

考慮到將來可能要復(fù)用到h5項(xiàng)目中所以這里將微信提供的提示與加載框封裝成工具類，以后即便遷移到web 端, 只需要刪除tips.js的wx api就可以了。

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

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

在頁面中 this.$tips.alert("請輸入手機(jī)號")調(diào)用

/**
 * 提示與加載工具類
 */
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);
  });
 }
 }

 /**
 * 彈出確認(rèn)窗口
 */
 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);

 // 隱藏結(jié)束回調(diào)
 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
 });
 };
}

/**
 * 靜態(tài)變量，是否加載中
 */
Tips.isLoading = false;

六、配置vuex

1、在src下創(chuàng)建 store目錄目錄結(jié)構(gòu)為：

│ ├── store      //狀態(tài)管理 vuex配置目錄
│ │  └── actions.js    //actions異步修改狀態(tài)
│ │  └── getters.js    //getters計(jì)算過濾操作
│ │  └── mutation-types.js    //mutations 類型
│ │  └── mutations.js    //修改狀態(tài)
│ │  └── index.js    //我們組裝模塊并導(dǎo)出 store 的地方
│ │  └── state.js    //數(shù)據(jù)源定義

2、main.js中引入store, 并綁定到Vue構(gòu)造函數(shù)的原型上，這樣在每個vue的組件都可以通過this.$store訪問store對象。

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

3、state.js

在數(shù)據(jù)源文件中定義變量：

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:當(dāng)前狀態(tài)樹
  * data: 提交matations時傳的參數(shù)
  */
 //是否有渠道
 [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中的數(shù)據(jù)持久化到本地（使用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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: