webpack + Vue + Hbuilder 打包成App，混合app开发，一我的搞定

前几年常常用到Hbuilder的开发期，那时候react, vue尚未造成趋势，项目通常采用mui UI组件库，对Hbuilder相关开发略知一二

Hybrid 混合式开发

近几年国内vue大火，公司项目采用Hybrid 混合式开发, 用Hybrid + Vue的开发模式

人员配置：

• 1位安卓人员
• 1位ios开发人员
• 1-2位前端开发，
• N位后台

在人员配置方面，可能少了几位原生开发，但人员仍是须要一位原生开发工程师，对于中小公司的话，项目经费仍是太重的，更想1-2位前端开发就能搞定App

Hbuilder APP

Hbuilder官网

Hbuilder 官网推荐的UI组件是Mui, 本身定义了方法，剥去了jquery方法，反正我没多少用过，一脸懵逼 ，毕竟学习成本又加剧了。

这里展现Hbuild app打包的过程，本身能够下载Hbuilder本身体验

本身没有ios开发者证书，只能打包安卓包

真机调试

运行 - 真机运行

iphone真机调试，请下载xcode(必须在mac电脑) 安卓真机调试，请下载android studio (mac/window均可)

自行百度下载以及安装

Vue React + Hbuilder

vue react的热门程度我在这里也不说了，看招聘网站可想而知。

试试手 vue + Hbuilder结合

在我看来，若是将vue/dist项目的代码直接复制放在Hbuilder新建的项目里面，而后运行 - 真机运行，是否可以运行呢？

结果是能够的

cnpm run build后 dist/index.html，打包后复制黏贴到mui项目下 以下图

原来最关键的地方在于mainifest.json，只要项目中存在该文件json并放置项目文件中，就能被Hbuilder所打成apk包

该步骤便可生成apk包，下载安装！

安卓手机安装apk，仍是有些步骤的！我在这里提供一个方法: 蒲公英应用内测官网

去蒲公英注册帐号，并上传您生成的apk包，扫码下载，简单，操做也比较容易;

点击查看Hbuilder打包过程利用HBuilder将vue项目打包成移动端app

plus 原生方法

在vue项目中咱们采用的是vue-router来构建路由的，是单页面，但在安卓手机存在物理返回键，物理返回键没办法执行咱们的this.$router.back()页面返回，因此咱们就得调用native原生的方法

网友的方法:

• HBuilder网站打包的app怎么设置按返回键返回上一页面？
• Hbuilder打包APP时返回键问题的实际解决方案
• 解决Hbuilder打包的app返回键直接退出

本人实际项目出来，再附上相关安卓物理返回键的代码

HTML5中国产业联盟

API Reference 封装好了不少原生办法函数，直接在项目上编辑，而后在Hbuilder打包，就能够运行plus方法

• plus.nativeUI.alert( "Plus is ready!") alert弹框
• plus.nativeUI.toast( message, options ) toast弹框
• plus.nativeUI.pickDate( successCB, errorCB, options ); 日期选择器
• plus.key.addEventListener( keyevent, listener, capture ); 该返回能够监听物料返回键

能够前去查看

代码如何体现，以下方：

最后介绍

MogoH5+

MogoH5+框架利用vue和builder的特性的一种框架，可采起mui vant vux plus原生 axios等方式构成你想要的UI组件库

注意：

• 不推荐采用vue-router单页面，并且采用多页面形式来开发
• node版本最好是8以上，实际运行中node 6版本运行报错

对于小公司，项目外包app是一种不错的选择，省去了ios开发和安卓开发人员，本身一我的撸得飞起来

若是不采用MogoH5+ vue多页面框架，想直接用webpack + vue + vue-router来构建项目，最得注意的一点就是安卓的物理返回键，否则点击物流返回键则是退出App

本身尚未真正的app项目，由于我想不到需求作什么，因此没有demo可看，这几天简单新建个MogoH5 和 Vue单页面项目，再添加到此文章