混合App开发，HBuilder开发移动App

使用HBuilder开发混合App：

Hbuilder：是一个在线打包工具，不需要在本地配置开发环境；直接将做好的网站，通过一些简单的操作，就能在线打包为一个App；

混合APP开发常见技术：Html5+、ReactNative、Weex、Ionic；这里使用HTML5+ 开发混合APP，它是一个强大的产业联盟。下面是使用HTML5+结合HBuilder开发混合app的步骤：

1.打开HBuilder编辑器，找到：文件–>新建–>移动App点击，如图：

2.在弹出的配置中配置相关信息后点击完成（需要注意的是下面应用名称即项目名称，实际显示在移动端桌面的app名称并非这里设置，但是建议与这里名称一致），如图：

3.此时会在桌面看到testapp，之后在HBuilder中继续找到testapp项目，如图：

4.如果在第三步骤结束后无法打开testapp项目文件夹，就需要打开项目管理器（HBuilder编辑器顶部–>跳转–>跳转到项目管理器），此时会在工作区看到testapp项目，如图：

5.在项目管理器中双击打开testapp项目文件夹，并双击打开manifest.json文件，此时会看到一个配置信息的弹框，这里配置信息分多个页面配置，首先看应用信息配置页面如图：

图标配置：

启动图配置：

6.如果是一个简单的应用，后面的配置项没有必要再进行配置；此时将testapp中的index.html删除，并将已经开发好的web页面复制粘贴到本项目中（注意web页面各文件引用资源路径问题），如下图将web项目中的index.html和main.js移动到testapp项目中：

7.如果上面步骤都顺利的话，需要保存manifest.json文件（底部代码视图 Ctrl + S，如果忘记保存也没事，后面发行时会有弹框提示，点击确认即可）；现在就可以利用HBuilder的相关功能进行打包发行（特别强调：如果项目存在安全问题，不建议使用HBuilder打包发行，因为自己项目源代码会发布在HBuilder平台上，虽然明确说明不会泄露源码，但还是不建议这样做），下面将一个无安全隐患的testapp发行打包，如图：

8.点击完云打包后会弹出打包相关选项（忘记保存manifest.json文件会多弹一个保存manifest.json文件的弹框），勾选配置项如图：

9.点击打包后，会弹出一个询问是否有权限漏选弹框，根据实际情况点击；之后会进行打包（第一次打包可能会弹出认证的情况，根据弹框提示网址进入网站，上传身份证等资料实名认证即可），认证成功的情况下，继续打包可看到如下：

10.此时根据提示拿到安装包，如：

11.移动app安装包实际是在项目文件夹unpackage下release文件夹中，此时将这个后缀为apk的文件发送到手机等设备安装（通过QQ等工具可发送到手机），如下图为后缀为apk文件位置：

12.安装完成后效果如下图：

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

混合App开发，HBuilder开发移动App相关推荐

html打包app方案,HBuilder开发APP（前端APP打包方案）
前端涉及app的两种方式适应移动端的网页大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表, 说的简单点就是对移动端做了适配,是的布局样式组件都适合移动端展示, 我的 ...
HbuilderX打包app，Hbuilder怎么打包app，H5打包成app，H5怎么打包成app
1.下载HbuilderX之后新建项目 2.在这里选则你需要新建的项目类型,本人打包的是h5app,选的5+app 3.选择好项目本地存放的地址,编写项目名,之后点击创建 4.打开刚刚创建的那个项目, ...
HBuilder开发旅游类APP(一) ----- 实现地图插件调用、苹果和安卓同步混合开发
HBuilder开发旅游类APP(一) ----- 实现地图插件调用.苹果和安卓同步混合开发作者:班尼科本博文内容参考了网络资源,但文章完全是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: ...
mui开发项目流程_【经验分享】用HBuilder开发的基于MUI和H5+的APP开发及上架经历...
一.写在前面 2017年,个人最大的收获,是第一次完成了这一款APP的开发并顺利上架,同时获得了还算可观的收益. 这是我前公司的项目,公司的主营业务是旅游,并不是什么科技公司,我之前一直在公司任职技术 ...
HBuilder开发旅游类APP(二) ----- mui结合H5+,快速实现首页、登录、注册等功能
HBuilder开发旅游类APP(二) ----- mui结合H5+,快速实现首页.登录.注册等功能作者:班尼科本博文是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: 旅游 H5+ MUI ...
用HBuilder开发的基于MUI和H5+的APP开发及上架经历
一.写在前面 2017年,个人最大的收获,是第一次完成了这一款APP的开发并顺利上架,同时获得了还算可观的收益. 这是我前公司的项目,公司的主营业务是旅游,并不是什么科技公司,我之前一直在公司任职技术 ...
Hbuilder开发移动App（1）
奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟 ...
App原生、混合、纯WEB开发模式的优劣分析
什么叫做原生App? 什么是混合app? 什么是Web App开发? Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统 ...
Hbuilder开发app实战-识岁06-face++的js实现【完结】
前言因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...

混合App开发，HBuilder开发移动App

混合App开发，HBuilder开发移动App相关推荐

最新文章

热门文章