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

article/2025/10/31 6:41:21

使用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://chatgpt.dhexx.cn/article/fE12EQBL.shtml

相关文章

安卓物联网APP开发——基于编辑物联网平台环境实现远程控制数据传输

本篇博客主要对app进行开发来实现对esp系列芯片的远程控制,通过mqtt协议来进行数据的传输,用wifi模块接收数据串口收发数据到单片机上使用,可远程操控。 APP开发(Android Studio) 通过Android Studio来设计软件&…

appinventor拓展开发

为什么要开发拓展? 想要使用appinventor标准支持的以外功能只有两种方式。 1.直接修改appinventor的源码,添加新的功能,然后使用这个私人定制的服务器。 2.编写拓展,可以添加到任何可以正常使用的appinventor服务上。 第二种的…

uni-app开发环境配置及混合开发流程

uni-app开发环境配置及混合开发流程 NodeJS开发环境 安装NVM 下载安装 NVM是一个支持多版本NodeJS的版本管理工具,如果本机已安装了NodeJS建议先卸载。 下载NodeJS 解压后直接运行安装:设置好安装目录及后面NodeJs的安装目录。 配置环境变量 路径…

create-react-app 开发环境编译太慢的解决方案

项目环境:windows 10 1089版本 create-react-app:3.0.0 react:16.8.6 react-router-dom:5.0.0 方案一 使用 babel-plugin-dynamic-import-node 原理:转换 import()为 require(),将所有异步组件都用同步的…

Android音乐App开发准备( 简易音乐 一 )

Android音乐App开发准备( 简易音乐 一 ) 关于第一步,获取音乐来源第二步,开发环境第三步,引用三方第四步,添加唯一进程App.java 关于 年前学习网易云因为app,想着学习网易云app的界面以及功能开…

uniapp开发环境搭建

一、下载并安装开发工具 uniapp的开发工具为HbuilderX,下载地址为:去下载 这里选择windows版本。windows 版本下载完成之后会得到一个 zip 的压缩包文件,解压完成即可使用,是不需要安装的绿色版本。 二、安装sass和scss插件 打开…

uni-app开发环境搭建创建uni-app项目

uni-app修炼之路(一) 导语uni-app开发环境搭建1.进入官网下载HBuilder-X2.打开HBuilder-X,进行开发环境配置 创建uni-app项目快速上手 导语 uni-app使用了快半个月了,现在准备来系统的学习一下uni-app,并做一些笔记&a…

搭建iOS开发环境

1.准备 当前移动开发主要分为安卓开发和iOS开发,安卓是谷歌在2007年宣布开源的移动操作系统,iOS是苹果2007年发布的。两个系统出现的时间大致相同,在随后的十年间引领了移动开发浪潮。如今各种移动开发技术层出不穷,一些跨平台的…

HBuilderX App开发环境搭建

1. Nox 模拟器 1). 无脑式安装 Nox模拟器平板界面.png 2). 屏幕修改 点击右侧上方的设置按钮,在系统设置中选择手机版,点击保存并重启。 Nox设置界面.png 3). 端口设置 Nox模拟器默认端口:62001 2. HBuilderX 1). 点击右侧的Download&#…

模型部署,移动端安卓App开发环境搭建和配置教程 ~

点击上方“码农的后花园”,选择“星标” 公众号 精选文章,第一时间送达 在深度学习中,算法模型部署到移动端中应用是最终的目的,上期中讲解了App开发目前主要有以下三种方式: 第一种:Eclipse JDK Android…

安卓开发环境搭建

1.下载JDK 7(1.7)或者8 (1.8)SE 现在一般是8 安装 然后配置环境变量后 执行命令 javac 看看是否成功,java -version可以查看版本 oracle登录账号可用 oracle.com passwords - BugMeNothttp://bugmenot.com/vie…

Android app 开发环境搭建

Android app 开发环境搭建(AMD和intel环境下) 下载Anaroid studio 安装 选择你想要安装的Android Studio的功能。检查想要安装的组件,取消检查不想安装的组件。单击Next继续。 空间要求:2.3gb 配置 收集数据用于服务X 不安装SDK(自行下载) 个性化 选择…

Android APP完整基础教程(01)开发环境简介

该系列文章主要基于AndroidQ平台,主要介绍Android应用基础开发相关知识。主要针对安卓应用开发路径的完整解读 和 coding练习内容的解读。 1 Android 发展历史 1.1 Android 历史 2005年 Google收购了成立仅22个月的高科技企业Android公司。2007年 Google正式向外…

移动APP开发环境搭建(新手)

移动APP开发环境配置(新手搭建) 涉及到的配置工具 STS ( eclipse idea 一样的开发工具)java jdk : 是Java语言开发工具包,JDK是整个JAVA的核心,包括了Java运行环境ant :Ant是Java的生成工具,用来编译、生成;跨平台&…

JSON.

JSON JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation),是轻量级的文本数据交换格式 ,使用 Javascript语法来描述数据对象,具有自我描述性,更易理解,但是 JSON 仍然独立于语言和…

JSONP 接口

1. 回顾 JSONP 的概念与特点 概念&#xff1a;浏览器端通过 <script> 标签的 src 属性&#xff0c;请求服务器上的数据&#xff0c;同时&#xff0c;服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP。 特点&#xff1a; ① JSONP 不属于真正的 Ajax 请求&a…

Json接口代码生成工具-Json2Code

将接口的json文件转化为代码的工具&#xff0c;支持如下语言&#xff1a;C#,C,Dart,Go,Java,JavaScript,Kotlin,Objective-C,Python,Ruby,Rust,Swift,TypeScript Json2Code主要是为了解决前端在拿到后端swagger、postman等工具导出的接口描述文件的时候&#xff0c;大部分工作都…

Json 格式的接口测试该怎么做?

后端开发过程中&#xff0c;开发完毕后要进行必要的接口测试&#xff0c;很多人会疑惑 Json 格式的接口测试到底应该怎么做&#xff0c;为了让大家有个粗略的认识&#xff0c;这里我们运用 Eolink 接口工具来给大家演示一下 API 导入、对 API 进行测试以及更高级的 Mock 测试。…

http+json 格式的接口开发实践与思考

业务背景 最近一段时间&#xff0c;都在做接口对接&#xff0c;项目也差不多上线了&#xff0c;正好也总结下自己的想法和思考。 项目的主要目的是给我公司店铺的店长、员工、和业务品牌领导提供一个入口&#xff0c;可以很方便直观地看到店铺之间&#xff0c;员工之间的一些…

基于json文件创建后端模拟接口

json-server有很多接口&#xff1b;目的&#xff1a;基于一个json文件就可以创建很多的后端模拟接口&#xff1b; &#xff08;1&#xff09;先创建一个json文件&#xff1a; &#xff08;2&#xff09;然后下载nodejs&#xff1a;下载 | Node.js 中文网 注意&#xff1a;下…