混合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联系笔者删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

fanuc roboguide_ROBOGUIDE软件:机器人产线输送带输送物料虚拟仿真操作

概述输送带在机器人生产线或工作站中是常见的物料传送设备,它能够将物料从一个工位自动传送到另一个工位,是实现自动化生产制造必不可少的装置设备之一。虚拟仿真是对真实的工业机器人生产线或工作站的图形化再现,因此,对于具有输…

ZOJ 3209

精确覆盖 #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> #include <vector> using namespace std;const int maxn920; const int maxnode920*550; const int maxr550; int ans; struct DLX {int n , sz; …

webpack上线版(生产环境中推荐使用)

配置上线版&#xff08;生产环境&#xff09;webpack&#xff1a; 实际中将开发环境中和生产环境中打包配置是分开的&#xff0c;两者本质没太大区别&#xff0c;只是生产环境中的webpack打包配置要更加优化合理&#xff0c;下面将具体介绍一下生产环境中webpack配置文件&…

双电阻差分电流采样_小小的采样电阻,还真有点门道!

电流检测电阻的基本原理根据欧姆定律,当被测电流流过电阻时,电阻两端的电压与电流成正比.当1W的电阻通过的电流为几百毫安时,这种设计是没有问题的.然而如果电流达到10-20A,情况就完全不同,因为在电阻上损耗的功率(PI2xR)就不容忽视了.我们可以通过降低电阻阻值来降低功率损耗,…

jpa in查询_优选在shopee虾皮怎么发货价格查询皮皮虾云仓

优选在shopee虾皮怎么发货价格查询皮皮虾云仓皮皮虾云仓物流系统为现代化管理系统&#xff0c;可集中化&#xff0c;高效化的处理本土店物流订单。物流系统可对接主流的的电商平台ERP可以实现高效的订单处理。如lazada&#xff0c;shopee&#xff0c;1688、速卖通、eaby、shopi…

html5+、ReactNative、Weex、Ionic之间的区别、(配置java、python、Android环境)、ReactNative(react-native-cli)、yarn、Weex

html5、ReactNative、Weex、Ionic之间的区别&#xff1a; html5和Ionic&#xff1a; 在开发原理上基本相同&#xff0c;都是需要先开发出一个完整的网站&#xff0c;再通过html5或Ionic提供的打包技术对网站进行打包成移动app&#xff0c;它们实际还是一个网站&#xff0c;并非…

AVAudioSession

AVAudioSession类由AVFoundation框架引入。每个IOS应用都有一个音频会话。这个会话可以被AVAudioSession类的sharedInstance类方法访问&#xff0c;如下&#xff1a; AVAudioSession *audioSession [AVAudioSession sharedInstance];复制代码在获得一个AVAudioSession类的实例…

delphi listview失去焦点后的颜色_阴阳师姑获鸟和惠比寿建模更新对比 爷爷帅了 觉醒后鸟姐颜值提升...

阴阳师体验服近期更新了人气式神姑获鸟还有惠比寿的相关建模&#xff0c;本次特别奉上有关这两位式神的建模形象对比图&#xff0c;对比后发现经过修改和优化之后&#xff0c;爷爷更帅了&#xff0c;而觉醒后的鸟姐颜值也有所提升&#xff0c;一起来看看吧。惠比寿觉醒前觉醒前…

kibana 显示 @timestamp 时间问题(utc or browser当前时间)自动转换显示

https://github.com/elasticsearch/kibana/issues/95 可以统一timestamp时间字段为当前信息时区的时间&#xff01; http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/mapping-date-format.html 转载于:https://www.cnblogs.com/sunxucool/p/3939701.ht…

React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期

React简介&#xff1a; 前面只是简单介绍移动APP开发&#xff0c;后面还会继续深入介绍移动app开发&#xff1b;其中想要用ReactNative开发出更出色的应用&#xff0c;那么就得学好React&#xff0c;下面将介绍React&#xff1a; React 是一个由 Facebook 开发用于构建用户界…

去掉 edittext 长按全选_开封消毒湿巾全选

开封消毒湿巾全选   其实&#xff0c;带有杀菌效果的清洁产品大多通过降低微生物的繁殖力达到预期的杀菌效果&#xff0c;所添加的每种杀菌成分都针对特定细菌&#xff0c;无法杀灭所有细菌。如果产品中的杀菌剂浓度总是不能将细菌完全杀灭&#xff0c;就可能导致细菌对该类杀…

this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs

改变this指向的几种方式&#xff1a; //1.使用箭头函数代替原始函数写法&#xff1a;getState()>{}//2.在函数调用时给函数名加bind(this)方法&#xff1a;(bind中第一个参数表示修改this指向、第二个参数开始是用来传递数据的)onClick{this.getProps.bind(this,this.datas)…

代数余子式之和怎么算_小明说养老 | 养老金怎么算之月平均缴费指数怎么来的?...

上一期小明分享了企业职工养老保险退休待遇怎么算&#xff0c;具体可戳小明说养老|养老金怎么算&#xff1f;小明来教你。在以张阿姨为例的计算举例中&#xff0c;提到张阿姨15年的平均缴费指数为0.8209。对这个平均缴费指数的概念提问较多&#xff0c;今天就来解释一下月平均缴…

高性能IO设计的Reactor和Proactor模式(转)

在高性能的I/O设计中&#xff0c;有两个比较著名的模式Reactor和Proactor模式&#xff0c;其中Reactor模式用于同步I/O&#xff0c;而Proactor运用于异步I/O操作。 在比较这两个模式之前&#xff0c;我们首先的搞明白几个概念&#xff0c;什么是阻塞和非阻塞&#xff0c;什么是…

ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版

ReactNative简介&#xff1a; ReactNative是基于React语法来进行开发移动app的框架&#xff1b; ReactNative中提供了移动端专用的一些组件&#xff0c;我们要使用ReactNative固有的组件代替网页中使用的一些元素&#xff0c;如&#xff1a;div, p, img 都不能用了&#xff1…

odis工程师使用方法_傅里叶红外光谱仪常见故障维修及排除方法,你了解有多少种呢?...

傅里叶红外光谱仪在使用过程中难免会出现故障&#xff0c;那我们该怎么检修呢&#xff1f;赛默飞傅里叶红外光谱仪有些光谱仪器的使用说明书会给出光谱仪的常见故障及排查方法&#xff0c;有些光谱仪器还有自诊断功能&#xff0c;当傅里叶红外光谱仪不能正常工作时&#xff0c;…

HDU-1102-Constructing Roads(并查集)

题目链接 http://acm.hdu.edu.cn/showproblem.php?pid1102 这题大意就不讲了&#xff0c; 这题很容易&#xff0c;不过我做的很不爽&#xff0c;一个下午&#xff0c;一直WA&#xff0c;后来才发现数组开小了 只开了s[6000],本来100*10010000&#xff0c;要开至少10000的搞糊了…

python统计程序运行时间-如何方便地统计 Python 程序每一个函数、每一行代码执行所花的时间?...

当然是用 line_profiler 堪称神器 贴个官方例子片段 这个功能应该是你想要的吧: Line # Hits Time Per Hit % Time Line Contents149 profile 150 def Proc2(IntParIO): 151 50000 82003 1.6 13.5 IntLoc IntParIO 10 152 50000 63162 1.3 10.4 while 1: 153 50000 69065 1.4…

微信小程序简介、发展史、小程序的优点、申请账号、开发工具、初识wxml文件和wxss文件

微信小程序介绍&#xff1a; 小程序简介&#xff1a; 小程序是一种连接用户与服务的方式&#xff0c;它能在微信内被便捷地获取和传播&#xff0c;具有出色的使用体验。 不需要下载安装&#xff0c;用户通过搜一搜或扫一扫就可以打开使用&#xff0c;使用完后退出即可。 小…

微信小程序中app.js文件、组件、api

app.js文件&#xff1a; 每个小程序都需要在app.js中调用 App 方法注册小程序实例. App({//App实例化&#xff0c;整个小程序只有一个App实例&#xff0c;全部页面共享onLaunch: function () {//onLaunch小程序启动之后触发 },onShow: function () {//onShow小程序启动&#…