為什么80%的碼農都做不了架構師？>>> ??

前言

mpvue小程序框架搭建很容易，官網提供vue init mpvue/mpvue-quickstart my-project, 很迅速的創建項目，但是想要結合業務等，還是要廢一番功夫，今天來學學wx.request的封裝，mpvue的重構，如何搭建好用的mpvue小程序架構吧

創建項目

由于國內npm鏡像慢的原因，考慮先把npm切到淘寶鏡像。

npm set registry https://registry.npm.taobao.org/

全局安裝vue-cli

npm install --global vue-cli@2.9

創建一個基于 mpvue-quickstart 模板的新項目, 一路回車選擇默認就可以了

vue init mpvue/mpvue-quickstart mpvue-project

安裝依賴

cd mpvue-project npm install npm run dev

到這里，你的項目已經能跑起來了，可以打開小程序調試工具預覽效果，但是僅僅是能玩兒而已，下面更精彩。

<!--more-->

全局圖片，接口配置

找到項目（mpvue-project）下方的config->index.js文件，里面有兩個對象，build和dev，分別對應生產環境和開發環境，意思是你運行npm run dev讀的就是dev里面變量，npm run bulid讀的就是build的變量 這里我增加了3個變量，后續用到（這里的圖片端口就是上圖中的port） 接口請求地址（如：baseApi: 'http://www.javanx.cn/rest'） 圖片訪問地址（如：imgPath: 'http://localhost:8070'） web-view地址（如：baseUrl: 'http://www.javanx.cn/'）

來到項目（mpvue-project）下方的build->utils.js文件，添加下方代碼

var config = require('../config') const fs = require('fs');var imgUrlPrefix = process.env.NODE_ENV === 'production'? config.build.imgPath: config.dev.imgPath var cssImgStr = `$imgUrlPrefix = '` + imgUrlPrefix + `';`;fs.writeFileSync(`./src/css/imgUrlPrefix.styl`, cssImgStr);const BASE_API = process.env.NODE_ENV === 'production'? config.build.baseApi: config.dev.baseApi; const BASE_URL = process.env.NODE_ENV === 'production'? config.build.baseUrl: config.dev.baseUrl;fs.writeFileSync(`./src/commons/baseApi.js`, `module.exports = {IMG_API: '`+imgUrlPrefix+`', BASE_API: '`+BASE_API+`', BASE_URL: '`+BASE_URL+`'}\r\n`);

process.env.NODE_ENV是判斷你輸入的命令是什么（構建到dev還是生產），然后寫入兩個文件，一個是styl文件，一個是js文件，分別存放根據環境的全局變量 用到的地方之間引入這兩個文件，如：

index.styl中需要用到一個圖片

@require "./imgUrlPrefix.styl" .icon-more-rightposition absolutedisplay blockwidth px2rpx(44px)height px2rpx(44px)right 0top 50%margin-top px2rpx(-22px)background url($imgUrlPrefix + "/images/right.png") center no-repeatbackground-size 100% 100%

index.js中需要用到BASE_API，如

import {BASE_API} from './baseApi'

圖片這樣的好處是，圖片都不用打包到項目里面了，減少了小程序的體積，本身小程序體積有限。 所以就可以去掉打包static到dist的配置了 來到項目（mpvue-project）下方的build->webpack.base.conf.js文件，去掉下方代碼

new CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: path.resolve(__dirname, '../dist/static'),ignore: ['.*']} ])

封裝wx.request

取名叫http.js

import Loading from './gloading' import {BASE_API} from './baseApi'const gloading = new Loading({sync: true }) function request (options) {return new Promise((resolve, reject) => {// 遮罩，默認不顯示菊花if (options.mask) {// 這里寫菊花轉gloading.start()// delete options.mask;}const headers = (options.header = options.header || {})// 是否要設置tokenif (!options.noToken && options.token !== false) {// headers['x-auth-token'] = 'ad6b5cbd-010e-4dee-aabc-884790d1e288';headers['x-auth-token'] = wx.getStorageSync('x-auth-token')delete options.token}// 對所有request請求中的OBJECT參數對象統一附加時間戳屬性options.timestamp = +new Date()let url = options.url// 簡化類型設置if (options.json === false) {headers['content-type'] ='application/x-www-form-urlencoded; charset=UTF-8'delete options.json}url = BASE_API + urlwx.request({url: url,data: options.data,header: headers,method: options.method,success: (res) => {if (options.mask) {gloading.stop()}if (res.statusCode === 200) {resolve(res)} else {// 判斷錯誤碼// 比如這里1003是用戶登錄過期，token是否失效switch (res.data.code) {case 1003:console.log('------------token變更，重新授權-----------')var pages = global.getCurrentPages() // 獲取加載的頁面var currentPage = pages[pages.length - 1] // 獲取當前頁面的對象var url = currentPage.route // 當前頁面url// 調用授權登錄接口，獲取新的tokenauthorize(() => {// 獲取用戶信息，驗證新tokengetUserInfo((data) => {// 成功代表成功，跳轉到之前的頁面console.log('------------獲取用戶信息成功-----------')wx.redirectTo({url: '/' + url + ''})}, (err) => {// 失敗跳回登錄頁面console.log('-----------獲取用戶信息失敗------------')if (url !== 'pages/user/login' && err.data.code === 1003) {wx.showToast({icon: 'none',mask: true,title: res.data.message,duration: 3000})wx.redirectTo({url: '/pages/user/login'})}})})breakdefault:let message = res.data.messagewx.showToast({icon: 'none',mask: true,title: res.data.message,duration: 3000})}reject(res)}},fail: (res) => {reject(res)},complete: (res) => {if (options.mask) {gloading.stop()}}})}) }request.all = (arr) => {return Promise.all(arr.map(n => request(n))) } export default request

這里的authorize和getUserInfo方法需要自己去寫具體業務，同時上面用到的wx.getStorageSync('x-auth-token')是在authorize方法成功后，返回的token，存在Storage里面了wx.setStorageSync('x-auth-token', res.header['x-auth-token']) 上面用到了一個gloading插件

gloading插件

取名gloading.js

class Loading {constructor (options) {this.queueNum = 0options = this._options = options || {}if (!options.title) {options.title = '請等待...'}}start () {if (this._options.sync) {this.queueNum += 1}this._start()return this}_start () {wx.showLoading({title: this._options.title,mask: true})}stop (force) {if (this._options.sync) {this.queueNum -= 1}if (this.queueNum <= 0 || force) {this.queueNum = 0this._stop()}return this}_stop () {wx.hideLoading()} } export default Loading

去掉目錄的main.js

mpvue每個頁面必須對應一個main.js，導致每個頁面都需要建一個目錄，目錄下方建一個main.js，感覺非常的繁瑣 有大神開發了mpvue-entry插件

安裝插件

npm install mpvue-entry

來到項目（mpvue-project）下方的build->webpack.base.conf.js文件

const MpvueEntry = require('mpvue-entry')module.exports = {entry: MpvueEntry.getEntry('src/pages.js'),...plugins: [new MpvueEntry(),...] }

src目錄下新建pages.js

module.exports = [{path: 'pages/news/list', // 頁面路徑，同時是 vue 文件相對于 src 的路徑，必填config: { // 頁面配置，即 page.json 的內容，可選navigationBarTitleText: 'Javan的博客',enablePullDownRefresh: true} }]

這樣就沒有建n個目錄，n個main.js了

公告

喜歡小編的可以點擊關注，也可在下方評論留言，你喜歡什么內容，小編根據大家喜歡的內容嘗試更新，更多內容請點擊：Javan的博客

轉載于:https://my.oschina.net/javanx/blog/1994354

總結

以上是生活随笔為你收集整理的mpvue小程序架构搭建详细介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。