基於mpvue的微信小程式專案搭建

YangTL發表於2019-03-03
Vue微信小程式

[TOC]

1. 建立專案

參照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==資料夾（新的模板可能是dist/wx），該目錄就是生成的小程式相關程式碼。這時，只需要啟動微信開發者工具，建立小程式專案，並除錯即可。

專案預覽如下：

image

2. mpvue-entry

github

集中式頁面配置，自動生成各頁面的入口檔案，優化目錄結構，支援新增頁面熱更新

此處有兩種使用方式：

方式一： 直接使用基於mpvue-entry的模板

vue init F-loat/mpvue-quickstart my-project
複製程式碼

方式二：手動安裝mpvue-entry並修改相關的webpack打包程式碼

# 安裝mpvue-entry
npm i mpvue-entry -D
複製程式碼
const MpvueEntry = require(`mpvue-entry`)

module.exports = {
  entry: MpvueEntry.getEntry({
    pages: `src/pages.js`,
    dist: `dist/wx/`   // 注意!!!!此處的配置應與congig/index.js中的build.assetsRoot保持一致
  }),
  ...
  plugins: [
    new MpvueEntry(),
    ...
  ]
}

複製程式碼
// 官方模板生成的專案請務必去除以下配置
module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: `**/*.json`,
      to: ``
    }], {
      context: `src/`
    }),
    ...
  ]
}
複製程式碼
// pages.js
module.exports = [
  {
    path: `pages/news/list`, // 頁面路徑，同時是 vue 檔案相對於 src 的路徑，必填
    config: { // 頁面配置，即 page.json 的內容，可選
      navigationBarTitleText: `文章列表`,
      enablePullDownRefresh: true
    }
  }
]
複製程式碼

3. mpvue-router-patch

github

在 mpvue 中使用 vue-router 相容的路由寫法

# 安裝
npm i mpvue-router-patch -S
複製程式碼
// main.js
import Vue from `vue`
import MpvueRouterPatch from `mpvue-router-patch`

Vue.use(MpvueRouterPatch)
複製程式碼
// 新建`src/router`資料夾
src
├─router
    ├─routes.js       // 頁面配置，同時用於mpvue-entry的配置
    ├─components.js  // 頁面對應的元件（component）
    ├─index.js       // 整個vue-router的配置
......

複製程式碼
// webpack.base.conf.js
// 修改mpvue-entry的配置
module.exports = {
  entry: MpvueEntry.getEntry({
    pages: `src/router/routes.js`,   // 與vue-router共用路由配置
    dist: `dist/wx/`
  }),
  ........
}
複製程式碼

至此，我們可以在專案中使用 this.$router和this.$route物件的方法和屬性了，具體支援哪些方法和屬性，mpvue-router-patch

4. 狀態管理

vuex

vuex-persistedstate

# 安裝 vuex，使用mpvue模板建立專案時已選了vuex的，此處可省略
npm install vuex --save

# 安裝vuex-persistedstate，使vuex狀態持久化
npm install vuex-persistedstate --save
複製程式碼
// 建立src/store資料夾
src
├─store
    ├─index.js       // 組裝模組並匯出store的地方
    ├─mudule.const.js   // 業務常量定義在這裡，這樣就可以在template、script中同時使用了
    ├─其他需要分割的模組檔案
......

複製程式碼
// src/store/index.js
import Vue from `vue`
import Vuex from `vuex`
import createPersistedState from `vuex-persistedstate` // state資料持久化
import appConst from `./module.const`

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      paths: [    // 需要被持久化的state
        `token`
      ],
      storage: window.sessionStorage  // 持久化儲存方式
    })
  ],
  state: {
    token: ``,
    counter: 0
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    appConst
  }
})

複製程式碼
// src/store/module.const.js
// vuex模組：常量管理
export default {
  state: {
    ORDER_STATUS_PAID: `paid`
  }
}

複製程式碼
// src/main.js
import store from `./store/index`

const app = new Vue({
  store,
  ...App
})
複製程式碼

5. Vant Weapp

Vant Weapp 是有贊移動端元件庫 Vant 的小程式版本，兩者基於相同的視覺規範，提供一致的 API 介面，助力開發者快速搭建小程式應用。

Vant Weapp

小程式npm支援

小程式自定義元件

step 1 安裝vant weapp元件

# 安裝vant weapp

cd your/path/to/dist
npm init 
npm i vant-weapp -S --production
複製程式碼

==注意==：此處安裝vant weapp儘量使用npm安裝，不要用cnpm安裝。因為cnpm安裝會在node_modules目錄中生成_vant-weapp@0.4.7@vant-weapp目錄，這樣去進行第二步的構建npm時，會在miniprogram_npm目錄中生成對應的_vant-weapp@0.4.7@vant-weapp目錄，元件宣告需要寫成這樣:

"usingComponents": {
    "van-button": "/miniprogram_npm/_vant-weapp@0.4.7@vant-weapp/button/index"
  }
複製程式碼

無疑，這樣後期如果需要元件升級的話會是個大麻煩。

step 2 微信開發者工具構建npm

點選開發者工具中的選單欄：工具 –> 構建 npm

勾選“使用 npm 模組”選項：設定-專案設定

此時，會在node_modules父目錄中生成miniprogram_npm目錄，這就是我們引用第三方元件的路徑

step 3. 使用vant weapp元件

// app.json或頁面json檔案中
"usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index"
  }
複製程式碼
// vue中直接使用
<div class="demo-container">
    <div class="demo-title">按鈕</div>
    <div class="demo-row">
        <label><van-button type="default">預設按鈕</van-button></label>
        <label><van-button type="primary">主要按鈕</van-button></label>
    </div>
    <div class="demo-row">
        <label><van-button type="warning">警告按鈕</van-button></label>
        <label><van-button type="danger">危險按鈕</van-button></label>
    </div>
</div
複製程式碼
image

==注意：== 需要修改忽略檔案，設定dist/wx/package.json檔案為不忽略檔案

#.gitignore

dist/wx/*
!dist/wx/package.json

複製程式碼

6. flyio

Fly.js 是一個基於 promise 的，輕量且強大的Javascript http 網路庫。目前Fly.js支援的平臺包括：Node.js 、微信小程式 、Weex 、React Native 、Quick App 和瀏覽器。

fly

// 安裝
npm install flyio -S
複製程式碼
// 建立介面相關的目錄src/api，方便介面統一管理
// 因我們的程式需要訪問不同的業務介面，這些業務介面基礎地址、請求格式、返回格式各有區別
//故建立了不同的業務介面模組，如若介面單一、標準，這裡的多個介面模組是不需要的
src
├─api
    ├─index.js    // fly物件建立和統一配置
    ├─branch.js   // 不同的業務介面模組
    ├─order.js
    ├─其他業務介面模組
......

複製程式碼
// src/api/index.js
// 注意：小程式需要使用的是flyio/dist/npm/wx；h5需要使用的是flyio/dist/npm/fly
import Fly from `flyio/dist/npm/wx`;

/**
 * 建立一個預設配置的請求例項
 * 對不同的介面提供者發起請求時，在對應的業務介面檔案中進行具體的配置即可
 */
export default function () {
  return new Fly();
}

複製程式碼
// src/api/branch.js
import createHttp from `./index`;

let api = createHttp();
api.config.baseURL = `https://your/api/base/path/`;  // 注意：小程式只支援https、wss協議
api.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (err) => {
    return Promise.resolve(err);
  }
)

const getBranchList = function () {
  return api.get(`/branch.json`);
}

export {
  getBranchList
}

複製程式碼
// 業務程式碼XX.vue
import {getBranchList} from `@/api/branch`;

// .....
getBranchList().then(data => {
    this.branches = data || [];
    this.branchesLoading = false;
}).catch(err => {
    console.error(err);
    this.branchesLoading = false;
})
複製程式碼

7. css

css前處理器

微信小程式支援大部分的css，但是對於css選擇器支援有限，本專案中已引入vant weapp，css工作量大大減少，因此暫不使用css前處理器。以後有必要引入的時候再來補充吧。

字型圖示

本專案使用了阿里巴巴向量圖示庫（iconfont）中的Ant Design 官方圖示庫，引入過程如下：

step 1. 選好圖示後下載到本地

step 2. 將下載的程式碼中的iconfont.css 和 iconfont.ttf拷貝到專案中的src/style/icon下

step 3. 修改iconfont.css檔案，定義字型的部分src只保留ttf就好

/*iconfont.css*/

@font-face {font-family: "iconfont";
  src: url(`iconfont.ttf?t=1543540389274`) format(`truetype`); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:25px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-minus-circle-fill:before { content: "e844"; }

.icon-plus-circle-fill:before { content: "e845"; }
複製程式碼

step 4. 使用

<icon class="iconfont icon-minus-circle-fill" style="font-size: 40px;color: #ccc"></icon>
複製程式碼

==備註==：網上說的下載的字型檔案需要轉base64不知是為何，目前沒轉換，在開發者工具中沒有問題，以後有問題的話再來補充。

8. 其他

wx模組化

將wx物件模組化，給以後的h5留坑

打包程式碼調整

主要有兩點調整

  • 除錯程式碼和生產程式碼打包到不同的資料夾

原打包程式碼 npm run dev 和 npm run build都將小程式的程式碼編譯到了dist資料夾，不便於區分，調整後將除錯程式碼編譯到dist資料夾，生產環境程式碼打包到weapp資料夾

  • npm包的支援

在npm run build時將dist/miniprogram_npm程式碼拷貝到weapp,用來支援小程式對第三方包的依賴。

9. 整體目錄結構

經過以上工作後，整體目錄結構如下：

mall
├─build      // 構建程式
├─congfig    // 環境配置
├─dist       // 小程式程式碼（除錯程式碼）
    ├─wx
        ├─......
        ├─mpvue編譯後的小程式程式碼   
        ├─......
        ├─miniprogram_npm   // 小程式依賴
        ├─package.json
├─src
    ├─api         // 介面
    ├─components  // 元件
    ├─config      // 配置引數
        ├─params.js
    ├─pages   // 頁面
    ├─router  // 路由
    ├─store   // vuex
    ├─style   // 全域性樣式
        ├─icon
            ├─iconfont.css
            ├─iconfont.ttf
        ├─common.css
    ├─utils    // 工具方法
        ├─index.js
        ├─wx.js
    ├─app.json
    ├─App.vue
    ├─main.js
├─static      // 靜態資源
├─weapp      // 小程式程式碼（生產環境）
├─index.html
├─package.json
├─......

複製程式碼

相關文章