使用vue-cli3多页面开发apicloud应用

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

解决window和frame打开黑屏的问题是用了一个插件,webpack-dev-server-output这个插件可以将内存文件转为文件，这样就不会黑屏了,代码如下

const WebpackDevServerOutput = require('webpack-dev-server-output')

module.exports = {
    configureWebpack: {
        plugins: [
          new WebpackDevServerOutput({
            path: 'D:/Code/apicloud/haixingzixun/dist',
            isDel: true
          })
        ]
   }
}

然后只要在config.xml配置你上面设置的那个路径就可以了

<content src="dist/home.html"/>

使用vue-cli3多页面开发apicloud应用

创建项目

特别要注意两点

demo地址