簡(jiǎn)介：

　　mpvue框架對(duì)于從沒有接觸過小程序又要嘗試小程序開發(fā)的人員來說，無疑是目前最好的選擇。mpvue從底層支持 Vue.js 語法和構(gòu)建工具體系，同時(shí)再結(jié)合相關(guān)UI組件庫，便可以高效的實(shí)現(xiàn)小程序開發(fā)

前言：

　　本文講述如何搭建完整的小程序項(xiàng)目框架，因?yàn)槭堑谝淮问褂?，有不完善的地方?qǐng)大佬指正。

　　搭建內(nèi)容包括：

　　1、使用scss語法：依賴插件sass-loader 、node-sass

　　2、像vue一樣使用路由：依賴插件 mpvue-entry 和 mpvue-router-patch

　　3、使用ZanUI:有贊團(tuán)隊(duì)的小程序版UI組件庫（GitHub）

　　4、使用vuex進(jìn)行狀態(tài)管理

　　5、使用flyio進(jìn)行數(shù)據(jù)交互：GitHub地址

項(xiàng)目結(jié)構(gòu)：

講解：

　　一、使用scss語法

　　1、安裝依賴

　　cnpm install node-sass sass-loader --save-dev

　　因?yàn)橐恍┎恢脑驅(qū)е耼ode-sass經(jīng)常安裝失敗，所以采用cnpm方式安裝最好

　　2、在.vue文件中的style節(jié)點(diǎn)加上lang=”scss”，這樣就可以愉快地使用sass進(jìn)行開發(fā)了，無需再webpack.base.config.js中配置loader，webpack會(huì)自動(dòng)識(shí)別.scss文件以及.vue中的scss代碼。

　　二、像vue一樣使用路由

　　在使用mpvue提供的命令 vue init mpvue/mpvue-quickstart my-project 創(chuàng)建項(xiàng)目后，會(huì)發(fā)現(xiàn)每個(gè)頁面都要配置main.js 文件，不僅繁瑣而且顯得多余，所以我們是否可以改造成像vue一樣使用路由的方式呢，答案是可以的，需要用到mpvue-entry 和 mpvue-router-patch插件（集中式頁面配置，自動(dòng)生成各頁面的入口文件，優(yōu)化目錄結(jié)構(gòu)，支持新增頁面熱更新）和

　　mpvue-entry: 集中式頁面配置，自動(dòng)生成各頁面的入口文件，優(yōu)化目錄結(jié)構(gòu)，支持新增頁面熱更新

　　mpvue-router-patch: 在 mpvue 中使用 vue-router 兼容的路由寫法

　　1、安裝依賴

cnpm install mpvue-entry --save-dev
　　cnpm install mpvue-router-patch --save

　　2、項(xiàng)目src文件夾下創(chuàng)建router文件夾和router.js文件

　　3、項(xiàng)目引入src下的main.js文件　

import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)

　　注：main.js的 export default {} 不能為空，不然編譯時(shí)不生成app.json文件

　　4、修改webpack.base.conf.js配置文件

const MpvueEntry = require('mpvue-entry')
module.exports = {
  entry:MpvueEntry.getEntry('./src/router/router.js'),
  .......
}　

　　5、配置router.js 文件　

// 首個(gè)路由為首頁
module.exports = [{
  path: 'pages/index',
  name: 'Index',
  config: {
    navigationBarTitleText: '文章詳情',
　　　　//引入U(xiǎn)I組件，后面會(huì)講到
    usingComponents:{
      "zan-button": "../dist/btn/index"
    }
  }
}, {
  path: 'pages/list/list',
  name: 'List',
  config: {
    navigationBarTitleText: 'list詳情'
  }
}]

　　三、使用小程序UI組件

　　1、將UI組件庫克隆到本地

　　2、將上圖中的dist目錄拷貝到mpvue項(xiàng)目的輸出目錄中

　　3、在router.js文件中引入U(xiǎn)I組件　

module.exports = [{
  path: 'pages/index',
  name: 'Index',
  config: {
    navigationBarTitleText: '文章詳情',
    //引入U(xiǎn)I組件
    usingComponents:{
      //組件名和引用路徑
      "zan-button": "../dist/btn/index"
    }
  }
}]

　　4、頁面中使用UI組件　

<template>
  <div class="index">
    <zan-button type="primary" size="small">確認(rèn)付款</zan-button>
  </div>
</template>

　　5、

　　小程序使用自定義組件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

　　ZanUI組件庫使用講解：https://github.com/youzan/zanui-weapp/blob/dev/README.md

 　　四、使用vuex進(jìn)行狀態(tài)管理

　　1、安裝

　　　　cnpm install vuex --save

　　2、引入（main.js文件）

　　　　impotr store from './vuex/index'
　　　　Vue.prototrype.$store = store//掛在到vue原型上

　五、使用flyio進(jìn)行數(shù)據(jù)交互

　　1、安裝

　　　　cnpm install flyio --save

　　2、引入（main.js文件）　

　const Fly = require("flyio/dist/npm/wx")//引入
　　　　const fly = new Fly
　　　　Vue.prototrype.$fly = fly//掛在到vue原型上

　　3、使用　　　　  　

　add(){
        //在add方法中執(zhí)行接口請(qǐng)求
        this.$fly.get('http://******/user?id=133')
          .then(function (res) {
              //請(qǐng)求成功
              console.log('res',res);
          })
          .catch(function (err) {
            //請(qǐng)求失敗
            console.log('err',err);
          });
      } 

總結(jié)

以上所述是小編給大家介紹的基于mpvue搭建微信小程序項(xiàng)目框架的教程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論