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里面的,如果你想还在浏览器可以访问,那就自己加个特定的标识符判断下