小程式開發-mpvue構建小程式專案-1-踩坑

LucaLJX發表於2018-08-01
Vue

mpvue-entry 外掛引入

  • mpvue的坑

    • mpvue新增頁面或者模組的時候必須重新npm run dev才可以進行更新，不支援熱更新
    • mpvue所有頁面模組.vue檔案都需要寫main.js，重複工作

  • 用途

    • 支援小程式熱更新
    • 重新定義mpvue小程式頁面配置

參考文件： npm-mpvue-entry

重點參考文件： github.com/F-loat/mpvu…

參考配置文件： mpvue-issue-F-loat的回答

  • npm安裝mpvue-entry依賴包
npm i mpvue-entry --save
複製程式碼

操作了半天，mpvue-entry的作者為了方便大家使用，開源了基於mpvue-entry的模版，大家可以直接使用這個quickStart進行構建專案

mpvue-entry-quickStart 專案地址： mpvue-entry-quickStart

  • mpvue-entry-quickStart 構建專案
 $ npm install -g vue-cli
 $ vue init F-loat/mpvue-quickstart my-project
 $ cd my-project
 $ npm install
 $ npm run dev
複製程式碼

mpvue-entry-quickStart模版使用方式

新增頁面

  • 在 **src/pages/**目錄下新增.vue檔案
  • src/pages.js 檔案新增頁面路徑
  • 支援熱更新，無需重啟

參考文件： github.com/F-loat/mpvu…

// pages.js
module.exports = [
 {
   path: 'pages/news/list', // 頁面路徑，同時是 vue 檔案相對於 src 的路徑，必填
   config: { // 頁面配置，即 page.json 的內容，可選
     navigationBarTitleText: '文章列表',
     enablePullDownRefresh: true
   }
 }
]
複製程式碼

mpvue-entry 使用注意事項

分包與主包的配置

  • 主包的頁面必須放在專案預設 src/pages/ 資料夾下面
  • 分包的頁面配置，必須加上subPackage引數
module.exports = [
  // 主包
  {
    path: 'pages/cardList/index', // 頁面路徑，同時是 vue 檔案相對於 src 的路徑
  }, {
    path: 'pages/card/index'
  }, 
  // 分包
  {
    path: 'packageA/logs',
    subPackage: true,
    config: { // 頁面配置，即 page.json 的內容
      navigationBarTitleText: '檢視啟動日誌'
    }
  }
]
複製程式碼

小程式預設tabBar配置

參考文件： 小程式文件-配置

用途

  • 小程式提供的預設展示在底部的tab選單欄

配置方式

  • src/main.js 檔案中新增config
// 主 main.js 檔案
import Vue from 'vue'
import App from '@/App'
import store from '@/store'

Vue.config.productionTip = false
App.store = store
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

export default {
  // 這個欄位走 app.json
  config: {
    pages: [],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    // tabBar 配置
    tabBar: {
      backgroundColor: "#fafafa",
      borderStyle: "white",
      selectedColor: "#b4282d",
      color: "#666",
      list: [
        {
          pagePath: "pages/cardList/index",
          iconPath: "static/images/ic_menu_choice_nor.png",
          selectedIconPath: "static/images/ic_menu_choice_pressed.png",
          text: "cardlist"
        },
        {
          pagePath: "pages/card/index",
          iconPath: "static/images/ic_menu_choice_nor.png",
          selectedIconPath: "static/images/ic_menu_choice_pressed.png",
          text: "card"
        },
      ]
    }
  }
}
複製程式碼

BY-Luca_LJX(git地址

相關文章