为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 webpack + Vue + Hbuilder...

webpack + Vue + Hbuilder 打包成App,混合app开发,一个人搞定

2018.07.25 21:51 33257浏览

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都可)

自行百度下载以及安装

https://img4.sycdn.imooc.com/5b58800c0001e12309760409.jpg

Vue React + Hbuilder

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

试试手 vue + Hbuilder结合

在我看来,如果将vue/dist项目的代码直接复制放在Hbuilder新建的项目里面,然后运行 - 真机运行,是否能够运行呢?

结果是可以的

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

https://img1.sycdn.imooc.com/5b58801b000181fb09800226.jpg

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

https://img1.sycdn.imooc.com/5b5880290001f1ed09810560.jpg

https://img1.sycdn.imooc.com/5b58803900012e9509790619.jpg
该步骤即可生成apk包,下载安装!

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

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

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

plus 原生方法

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

网友的方法:

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

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 ); 该返回可以监听物料返回键

可以前去查看

代码如何体现,如下方:

https://img3.sycdn.imooc.com/5b58804800015ce509780507.jpg




https://img1.sycdn.imooc.com/5b5880570001070909710454.jpg

最后介绍

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单页面项目,再添加到此文章

sponing---原文地址:https://juejin.im/post/5b5595f7f265da0f700710ba

点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
81
获赞与收藏
363

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消