apicloud的開發方式太古老了，官方出的那個cli也不咋地，分享一下基於vue-cli3開發apicloud的方式。
因為apicloud裡面有window和frame的概念,所以肯定是多頁面才能發揮出apicloud的優勢。
不熟悉vue-cli3的，建議先看下文件
建立專案
vue create vue-for-apicloud
複製程式碼然後選擇 Manually select features
功能根據自己的喜好選,不要選Router,因為vue-router跳轉頁面的效果相比window和frame相比差太多了
當前結構如圖
在根目錄建立一個vue.config.js,程式碼如下
publicPath一定要使用相對路徑, pages就是我們的多頁面設定, 因為是app所以不需要SourceMap
const pages = require('./build/pages')
module.exports = {
publicPath: './',
pages: pages,
productionSourceMap: false // 是否生成sourceMap檔案
}
複製程式碼在根目錄新建build資料夾,在build裡面新建一個pages.js,程式碼如下
這裡面的程式碼就是遍歷頁面檔案然後再給檔案指定檔名稱
const glob = require('glob')
console.log('獲取頁面檔案中...')
const files = glob.sync('**/views/**/main.js')
const pages = {}
files.forEach(item => {
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下面新建index,order,mine資料夾,然後在每個資料夾裡面建立一個main.js和App.vue,因為我們是多頁面,並不需要src根目錄裡面的main.js和App.vue,在apicloud裡面開啟window或frame都需要在apiready完成之後才能執行,但是在每個vue的模板裡面每次都要寫apiready這個方法感覺非常醜(你們也可以自己試下就在模板裡面寫apiready方法),所以我把apiready放在了main.js裡面,apiready之後再去初始化vue
在index的App.vue寫如下程式碼
特別要注意兩點
1.就是template元素下面的第一個根元素一定要加一個名為app的id
2.openWin或者openFrame的url一定要帶.html的字尾,檔案的名稱就是你目錄的名稱,當然檔名稱的規則你可以自定義,不過要修改build裡面的pages.js的邏輯
可能有人不懂為啥字尾一定要帶.html，我們執行如下命令打包看下,這就是打包後生成的檔案,所以一定要帶字尾
npm run build
複製程式碼
我們肯定會開啟frame的需求,那我們在order資料夾下面新建一個frame資料夾,檔案內容還是App.vue和main.js
order資料夾的App.vue程式碼如下,frame的檔名稱的規則是父頁面的檔名稱+Frame,當然你也可以自行修改
接下來,我們啟一個服務,會得到一個ip地址
npm run serve
複製程式碼
然後我們把這個ip地址複製到一個新建的apicloud專案的config.xml裡面去(最好有兩個專案,一個負責vue的方式開發,一個只負責apicloud打包), 啟動地址一定要帶上你的首頁地址
然後我們就可以真機執行了,而且修改程式碼後會自動熱更新,也不用每次那麼麻煩都去wifi自動同步了,要注意的是這種方式,在我們開發的時候開啟一個window或者frame會有一段時間的黑屏,這個我也沒解決的,如果有人解決了這個問題求解決方案。
開發完成後,肯定要上傳apicloud進行雲端打包,打包就更簡單了,還記得我們剛才打包的dist資料夾麼,直接複製到apicloud的專案裡面,然後修改啟動地址就可以了
講的很粗糙,只大體說了下整體思路,裡面還有很多可以調整的地方,比如現在這樣做,我們在瀏覽器就沒法訪問了,因為vue的初始化是放在apiready裡面的,如果你想還在瀏覽器可以訪問,那就自己加個特定的識別符號判斷下