hbuilder打包ios_使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动App...

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_82

近几年&＃xff0c;混合模式移动应用的概念甚嚣尘上&＃xff0c;受到了一些中小型企业的青睐&＃xff0c;究其原因&＃xff0c;混合模式开发可以比传统移动开发节约大量的开发成本和人力成本。

Hybrid App&＃xff08;混合模式移动应用&＃xff09;是指介于web-app、native-app这两者之间的app&＃xff0c;兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

说白了&＃xff0c;如果走传统移动开发路线&＃xff0c;公司业务覆盖多端&＃xff0c;那么每个平台势必要请一个专属开发人员&＃xff0c;安卓要请一个前端开发&＃xff0c;ios同理&＃xff0c;那么人力成本则进行了翻倍&＃xff0c;同时&＃xff0c;如果多端使用不同的代码&＃xff0c;当有功能上的修改或者维护时&＃xff0c;成本也是不可想象的。试想如果开发者编写一套代码&＃xff0c;可编译到iOS、Android、H5、小程序等多个平台&＃xff0c;这绝对是省时省力的良好方案。

本文介绍如果使用vue.js编写基于h5的适配多端的前端代码&＃xff0c;打包后&＃xff0c;利用hbuilder打包成安卓客户端安装包apk&＃xff0c;从而达到一套代码适配多个平台的功能。

首先&＃xff0c;安装完整版的vue-cli&＃xff0c;之前为了快速开发使用simple版&＃xff0c;实际上如果做移动开发&＃xff0c;要使用完整版的vue-cli

建好项目之后&＃xff0c;如何将页面进行响应式设计开发&＃xff08;就是适配多个屏幕&＃xff09;呢&＃xff1f;我们需要利用bootstrap框架来帮我们适配大小屏幕&＃xff0c;这里引入bootstrap的外部css&＃xff0c;修改入口文件main.js&＃xff0c;加入下面代码

如果报错说明没有安装依赖库&＃xff0c;安装一下

然后新建一个首页路由index.vue,添加下面的代码

此时&＃xff0c;发现样式已经生效了&＃xff0c;但是我们想让首页使用瀑布式的布局&＃xff0c;也就是快手和抖音常用的那种首屏流动式布局&＃xff0c;所以需要安装vue-masonry&＃xff0c;这个vue.js组件可以很方便的将布局改造成瀑布式的。

安装库

然后在入口文件进行引入和声明

最后&＃xff0c;针对模板文件进行改造就可以了

效果是这样的

然后我们对项目进行打包&＃xff0c;在打包之前&＃xff0c;修改config目录下的index.js,将build中的assetsPublicPath属性改成相对路径&＃xff1a;assetsPublicPath: &＃39;./&＃39;

另外如果你的路由模式使用的history&＃xff0c;请改为hash&＃xff0c;或者使用默认模式&＃xff0c;因为移动app不支持history模式&＃xff0c;最后打包项目

vue.js将会包项目直接打包在dist文件夹中&＃xff0c;这时&＃xff0c;下载hbuilder安装包http://www.dcloud.io/hbuilderx.html&＃xff0c;要下载app开发版&＃xff0c;将dist直接拖动到hbuilder开发界面中&＃xff0c;然后右键转换为移动app

这时系统会帮你创建一个配置文件manifest.json&＃xff0c;转换完毕之后&＃xff0c;点击index.html,选择运行&＃xff0c;浏览器运行&＃xff0c;进行测试

如果是空白页面就要修改vue.js中的配置文件&＃xff0c;看看有没有改成相对路径&＃xff0c;测试没问题之后进行打包&＃xff0c;选择dist文件目录&＃xff0c;右键生成发行原生项目

打包成功后&＃xff0c;就可以下载apk安装包在手机中安装使用了。

其效果和安卓原生系统完全没有差别&＃xff0c;一套代码&＃xff0c;完美适配pc端和移动端&＃xff0c;就是这么简单&＃xff0c;最后奉上完整代码仓库地址&＃xff1a;https://gitee.com/QiHanXiBei/vue_app

原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_82