1. 程式人生 > >小程式開發-mpvue構建小程式專案-1-踩坑

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

mpvue-entry 外掛引入

  • mpvue的坑

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

    npm i mpvue-entry --save

    操作了半天,mpvue-entry的作者為了方便大家使用,開源了基於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 檔案新增頁面路徑
  • 支援熱更新,無需重啟

    // 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地址