基於vue-cli3多頁面開發apicloud應用

以前開發項APP項目直接用APICloud+原生js的方式進行編寫，整個項目下來發現開發慢，頁面代碼多且複雜，維護起來相對困難，並且文件大打包以後的APP會比較大，apicloud的框架也很差用，支持部分es67(像let、const、import等es6新特性不支持寫的太難受了)

採用vue-cli+APIcloud的方式寫解決以上痛點，開發靈活，而且打包以後體積更小速度更快

環境依賴

• vue
• webpack
• vue-cli3
• nodeJS

基本流程

項目開發最好準備兩個項目，一個打包APP，一個項目開發，也會減小不少沒必要要的麻煩

建立項目並初始化

cd到項目想要建立的位置，執行：

vue create vue-for-apicloud
複製代碼

選擇Manually select features

根據本身需求選擇模塊（不要Router,由於vue-router跳轉頁面的效果相比window和frame相比差太多了），按空格鍵選中，按回車完成選擇：

選擇css預處理器語言，選擇以後能夠得到預處理語言支持：

選擇eslint：

剩下的配置根據本身狀況來設定，等待項目建立完成。

項目結構

項目結構如圖：

多頁面配置

項目根目錄下建立vue.config.js

const pages = require('./build/pages')

module.exports = {
  publicPath: './',
  pages: pages,
  // 是否生成sourceMap文件
  // 開發環境配置true，方便快速定位錯誤（APICloud控制檯輸出真的很難受）
  // 生產環境配置false，構建速度更快，打包以後體積更小
  productionSourceMap: true
}
複製代碼

項目根目錄下建立build文件夾，bulid文件夾下建立page.js

const glob = require('glob')

// 循環獲取文件並打包
console.log('獲取頁面文件中...')
// 讀取src/views下全部main.js,可根據本身的狀況更改
const files = glob.sync('**/views/**/main.js')
const pages = {}
files.forEach(item => {
  // 默認輸出到dis文件夾下,輸出格式爲文件夾名（若是文件夾名爲frame則爲父文件夾名+frame）.html
  const items = item.split('/')
  let page = items[items.length - 2]
  const pageParent = items[items.length - 3]
  if (page === 'frame') {
    page = `${pageParent}Frame`
  }
  pages[page] = item
})
console.log('文件獲取結束')

module.exports = pages
複製代碼

src文件夾下建立views文件夾，用於存放開發頁面的源碼；src文件夾下的main.js、App.vue無關緊要，由於打包時並不會打包這兩個頁面，因此可根據本身的喜愛刪除或保留

命令說明

打包：

npm run build
複製代碼

運行項目虛擬服務器

npm run serve
複製代碼

若是你用的是webstrom可把這兩個命令配置成運行命令，參考:blog.csdn.net/q649381130/…

頁面開發

根據上面的配置，實際打包的項目應該是以下結構：

咱們能夠注意到不管你的項目結構有多深，打包以後都在dist目錄下(若是不喜歡能夠更改配置)

根據本身的需求建立文件夾，文件夾名稱即爲頁面名稱，若是文件夾下面有frame文件夾，則frame爲文件夾下的文件打包後爲文件夾名稱+frame.html

每一個文件夾下必須有main.js和App.vue（入口和頁面文件）,能夠有多個拆分紅組件（這一點和vue開發無異）

頁面跳轉

頁面初始化打開win或者frame放在main.js中，也能夠放在App.vue中,我習慣放在main.js中

import Vue from 'vue'
import App from './App.vue'

window.apiready=function () {
  new Vue({
    render: h => h(App)
  }).$mount('#app')
  window.api.openFrame({
    name: 'waringFrame',
    url: 'waringFrame.html',
    bgColor: '#ffffff',
    rect: {
      x: 0,
      y: document.getElementsByTagName('header')[0].clientHeight,
      w: 'auto',
      h: 'auto'
    },
    bounces: true,
    overScrollMode: 'scrolls'
  })
}

複製代碼

app.vue中打開頁面(若是在App.vue中必定要用window.api.openWin，由於vm對象中沒有api對象)：

methods: {
    openWin (name) {
      window.api.openWin({
        name: name,
        url: `./${name}.html`,
        bgColor: '#fff'
      })
    }
  }
複製代碼

經過APICloud調試

開發階段跑的項目是本地虛擬服務，可在APICloud的config.xml中配置爲本地虛擬服務器路徑：

打開wifi自動同步，因爲vue的熱更新，開發項目會自動同步到APP項目中

生產環境下將項目打包，將打包以後的文件拷貝到APICloud項目html文件夾下（根據本身習慣），路勁改成APICloud項目路徑便可。

須要注意的是APICloud Studio沒法外部拷貝到項目文件夾下，只能打開本地文件夾替換文件，每次替換完成以後，須要重啓APICloud Studio或者從新添加項目文件夾。不得不說這真是一個讓人很難受的事情，APICloud Studio並無刷新項目或者文件夾的選項。

經過上面的流程就能夠實現打開win或者frame了，其餘的和APICloud開發差很少

須要注意的地方

• App.vue中調用APICloud的方法須要採用window.api.openWi的方式(APICloud的其餘方法同理），App.vue的this本質上是vm對象
• App.vue中方法或者回調儘可能使用箭頭函數，保證this必定是vm對象
• APICloud的模塊加載最好放在main.js中的window.apiready方法中
• APICloud Studio沒法外部拷貝到項目文件夾下，只能打開本地文件夾替換文件，每次替換完成以後，須要重啓APICloud Studio或者從新添加項目文件夾

說明

• 以上流程已經在正式項目中實踐
• 參考文章：juejin.im/post/5c500c…
• github地址：github.com/maihuochai/…