之前开发项APP项目直接用APICloud&＃43;原生js的方式进行编写&＃xff0c;整个项目下来发现开发慢&＃xff0c;页面代码多且复杂&＃xff0c;维护起来相对困难&＃xff0c;而且文件大打包之后的APP会比较大&＃xff0c;apicloud的框架也不好用&＃xff0c;支持部分es67(像let、const、import等es6新特性不支持写的太难受了)

采用vue-cli&＃43;APIcloud的方式写解决以上痛点&＃xff0c;开发灵活&＃xff0c;并且打包之后体积更小速度更快

环境依赖

• vue
• webpack
• vue-cli3
• nodeJS

基本流程

项目开发最好准备两个项目&＃xff0c;一个打包APP&＃xff0c;一个项目开发&＃xff0c;也会减少很多不必要的麻烦

创建项目并初始化

cd到项目想要创建的位置&＃xff0c;执行&＃xff1a;

vue create vue-for-apicloud


选择Manually select features

项目结构

项目结构如图&＃xff1a;

多页面配置

项目根目录下创建vue.config.js

const pages &＃61; require(&＃39;./build/pages&＃39;)module.exports &＃61; {publicPath: &＃39;./&＃39;,pages: pages,// 是否生成sourceMap文件// 开发环境配置true&＃xff0c;方便快速定位错误&＃xff08;APICloud控制台输出真的很难受&＃xff09;// 生产环境配置false&＃xff0c;构建速度更快&＃xff0c;打包之后体积更小productionSourceMap: true
}


项目根目录下创建build文件夹&＃xff0c;bulid文件夹下创建page.js

const glob &＃61; require(&＃39;glob&＃39;)// 循环获取文件并打包
console.log(&＃39;获取页面文件中...&＃39;)
// 读取src/views下所有main.js,可根据自己的情况更改
const files &＃61; glob.sync(&＃39;**/views/**/main.js&＃39;)
const pages &＃61; {}
files.forEach(item &＃61;> {// 默认输出到dis文件夹下,输出格式为文件夹名&＃xff08;如果文件夹名为frame则为父文件夹名&＃43;frame&＃xff09;.htmlconst items &＃61; item.split(&＃39;/&＃39;)let page &＃61; items[items.length - 2]const pageParent &＃61; items[items.length - 3]if (page &＃61;&＃61;&＃61; &＃39;frame&＃39;) {page &＃61; &＃96;${pageParent}Frame&＃96;}pages[page] &＃61; item
})
console.log(&＃39;文件获取结束&＃39;)module.exports &＃61; pages


src文件夹下创建views文件夹&＃xff0c;用于存放开发页面的源码&＃xff1b;src文件夹下的main.js、App.vue可有可无&＃xff0c;因为打包时并不会打包这两个页面&＃xff0c;所以可根据自己的喜好删除或保留

命令说明

打包&＃xff1a;

npm run build


运行项目虚拟服务器

npm run serve


如果你用的是webstrom可把这两个命令配置成运行命令&＃xff0c;参考:blog.csdn.net/q649381130/…

页面开发

根据上面的配置&＃xff0c;实际打包的项目应该是如下结构&＃xff1a;

根据自己的需求创建文件夹&＃xff0c;文件夹名称即为页面名称&＃xff0c;如果文件夹下面有frame文件夹&＃xff0c;则frame为文件夹下的文件打包后为文件夹名称&＃43;frame.html

每个文件夹下必须有main.js和App.vue&＃xff08;入口和页面文件&＃xff09;,可以有多个拆分成组件&＃xff08;这一点和vue开发无异&＃xff09;

页面跳转

页面初始化打开win或者frame放在main.js中&＃xff0c;也可以放在App.vue中,我习惯放在main.js中

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

app.vue中打开页面(如果在App.vue中一定要用window.api.openWin&＃xff0c;因为vm对象中没有api对象)&＃xff1a;

methods: {openWin (name) {window.api.openWin({name: name,url: &＃96;./${name}.html&＃96;,bgColor: &＃39;#fff&＃39;})}}


通过APICloud调试

开发阶段跑的项目是本地虚拟服务&＃xff0c;可在APICloud的config.xml中配置为本地虚拟服务器路径&＃xff1a;

打开wifi自动同步&＃xff0c;由于vue的热更新&＃xff0c;开发项目会自动同步到APP项目中

生产环境下将项目打包&＃xff0c;将打包之后的文件拷贝到APICloud项目html文件夹下&＃xff08;根据自己习惯&＃xff09;&＃xff0c;路劲改为APICloud项目路径即可。

需要注意的是APICloud Studio无法外部拷贝到项目文件夹下&＃xff0c;只能打开本地文件夹替换文件&＃xff0c;每次替换完成之后&＃xff0c;需要重启APICloud Studio或者重新添加项目文件夹。不得不说这真是一个让人很难受的事情&＃xff0c;APICloud Studio并没有刷新项目或者文件夹的选项。

通过上面的流程就可以实现打开win或者frame了&＃xff0c;其他的和APICloud开发差不多

需要注意的地方

• App.vue中调用APICloud的方法需要采用window.api.openWi的方式(APICloud的其他方法同理&＃xff09;&＃xff0c;App.vue的this本质上是vm对象
• App.vue中方法或者回调尽量使用箭头函数&＃xff0c;保证this一定是vm对象
• APICloud的模块加载最好放在main.js中的window.apiready方法中
• APICloud Studio无法外部拷贝到项目文件夹下&＃xff0c;只能打开本地文件夹替换文件&＃xff0c;每次替换完成之后&＃xff0c;需要重启APICloud Studio或者重新添加项目文件夹

说明

• 以上流程已经在正式项目中实践
• 参考文章&＃xff1a;juejin.im/post/5c500c…