手把手教你学会HBuilder打包APP

我们打包APP需要用到HBuilder,所以先讲解如何安装使用

HBuilder的下载与安装

HBuilder的官网下载地址:https://www.dcloud.io/

点击DOWNLOAD后会弹出如上显示的两种版本下载
Windows版 和 MacOS版 根据我们电脑版本下载即可,我们一定要下载标准版哦(正式版中的)

我这里是Windows系统,所以我选择的是window版
下载完是一个压缩包

右击压缩一下即可

打开文件夹后找到如下HBuilderX.exe文件

双击即可运行 为了方便我们可以右击发送到桌面快捷方式

HBuilder的使用

打开后就是这样了,可以点击右下角登录哦

使用

创建项目

点击创建即可

结构

如果想创建更多文件可以右击

其他的就不过多讲解了,说一下如何打包APP

打包APP

我们选择5+App(A) 类型
名称随意填写了
模板默认即可

安卓包内设置样式

苹果包设置样式

注意:苹果包必须有证书才可以

这里我就做这些选择了

继续打包即可

等到百分百即可上传开始打包APP

开始进行打包

返回下载地址就代表成功了
点击下载地址即可下载
然后发送到手机上即可安装

到此这篇关于手把手教你学会HBuilder打包APP的文章就介绍到这了,更多相关HBuilder打包APP内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-06-10

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.

初试vue-cli使用HBuilderx打包app的坑

微信授权登录提示code-2 appid和appsecret应该是移动应用,而非网页应用 微信授权登录提示code:-100/自定义基座无法微信登录和分享 开发者账号配置的应用签名应该是md5加密后的值,而不是原字符串 生产环境proxyTable不生效,导致接口500 两种解决办法: ①入口文件使用网络地址,且和接口在同一域名下 ②(推荐) 入口文件依旧是index.html 在config/prod.env和config/dev.env下添加API_ROOT 'use strict' mod

HBuilder打包App方法(图文教程)

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP. HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包. 1,下载HBuilder,注册并登陆.首先打开"文件"-"新建"-"移动APP",输入"应用名称","位置

利用HBuilder打包前端开发webapp为apk的方法

现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动设备上运行. 这里以vue为例,其他的差不多,大家可以根据自己的情况去查找相应资料. 第一步,需要安装node,如果是做前端的er,这个应该就不用过多介绍了. 第二步,使用vue-cli工具初始化vue项目,这里只是做一个测试的项目,所以vue-router等东西就不用安装了,实际项目,根据具体情况而论. 第三步,常规的开发,比如希望实现的功

vue-cli或vue项目利用HBuilder打包成移动端app操作

一.测试项目是否可以正确运行 指令:npm run dev 1.首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 二.修改路径 (assetsPublicPath: './') 1. 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 2. 检查下assetsRoot: path.resolve(__dirname, '-/dist'), assetsSubDirectory: 'static',

vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 总结 以上所述是小编给大家介绍的vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大

在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

Android在代码中设置沉浸式布局的方法

先导入该包,进行 系统systemBar 管理 compile 'com.readystatesoftware.systembartint:systembartint:1.0.3' 在BaseActivity中添加 该 字段: public class BaseActivity extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { if (Build.VERSION.SDK_INT >=

一个Activity中多个Fragment实现沉浸式状态栏的解决方法

项目中遇到一个问题:一个Activity有多个Fragment,每个Fragment的沉浸式状态栏不一样,有的是红色,有的是黑色,有的是一张图片(图片的一部分在状态栏中显示),并且要要兼顾虚拟按键(常说的导航栏)遮盖住布局导致自己布局中的某些按钮功能被虚拟按键拦截的问题.网上没有找到完全符合的解决方案,现在说一下我自己的思路,因为自己知识有限,不知道有没有更好的方法,希望对一些人能有帮助.思路如下: 要解决某些型号的手机导航栏遮盖布局的问题,一般是在xml的根布局上加上属性: <span sty

详解Android中的沉浸式状态栏效果实例

无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定程度上牺牲了视觉宽度,界面面积变小. Google从android kitkat(Android 4.4)开始,给我们开发者提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟Activity一样的样式,形成一个完整的主题,和IOS7

Android编程中沉浸式状态栏的三种实现方式详解

本文实例讲述了Android编程中沉浸式状态栏的三种实现方式.分享给大家供大家参考,具体如下: 沉浸式状态栏 Google从android kitkat(Android 4.4)开始,给我们开发者提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟Activity一样的样式,形成一个完整的主题,和IOS7.0以上系统一样了. 首先看下效果 首先看下第一种方式 系统的方式沉浸式状态栏实现 步奏一 //当系统版本为4.4或者4.4以上

Vue项目中设置背景图片方法

在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url("../../assets/head.jpg"); 这个时候我们就要考虑使用其他的方式了,node中提供了一种比较有效的方式来解决这个问题: 1.在data中定义如下: export default { name: 'productdetailspage', data() {

vue项目中运用webpack动态配置打包多种环境域名的方法

在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

在vue项目中,将juery设置为全局变量的方法

1.首先执行:npm install jQuery --save-dev,在package.json里加入jQuery. 2.修改build下的webpack.base.conf.js 方法一: 首先加入: const webpack = require("webpack") 然后在module.exports 对象中加入: plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.Prov

解决在vue项目中webpack打包后字体不生效的问题

最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里