将Web移动端打包成手机app---HBuilder

将移动端页面打包成app

1、使用 HBuilder 直接编译打包

点击左上角 文件》打开目录》选择目录  选择用Webpack打包好的dist文件目录

由于我添加到项目了,所以会显示该项目名称已存在,请重新输入。

2、接着点击完成,就可以在目录中看到dist

这里dist前面的标志应该是W  由于我转换过一次,就会显示A

3、鼠标右键点击dist目录,选择`转换成移动App`,成功之后目录前面的图标就会变成 A 同时会多出一个 `manifest.json文件`

4、双击`manifest.json` 是可视化界面

5、填写基本信息 选中横竖屏等信息

可以选择图片等一系列信息

点击代码视图就可以看到代码界面了。

6、开始打包,我们点击HBuilder头部导航栏的发行》云打包-打原生安装包

这里你可以选择ios或者android安装包

7、如果是安卓安装包则可以直接选择完之后开始打包

点击打包完了之后,可以查看打包状态,打包完毕可以点击下载安装包,就可以安装到自己手机上啦。这里推荐用爱思助手,不是广告,因为自己用iTools的时候 出现了安装不成功的问题,暂时没解决 但是用爱思助手就解决了。

8、现在我们来看打包成ios的

很明显,这里打包ios安装包是需要 ios开发者证书==》AppID、私钥密码、profile文件、私钥证书。

如果你有ios开发者账号,这是需要$99 购买一年的 美刀。购买了之后,可以登录之后获取相应的证书以及密钥。

这里我重点讲一下,如何使用打包ios测试的,没有ios开发者账号没有证书和私钥证书怎么办。

可以使用

免费苹果账号(apple id)申请ios证书p12真机调试

详情见下一篇分析。

原文地址:https://www.cnblogs.com/mica/p/10654039.html

时间: 2024-11-10 11:12:54

将Web移动端打包成手机app---HBuilder的相关文章

将web项目打包成手机app的方法

之前使用ionic开发的时候使用cordova打包,现在项目使用的是vue,记录一下打包的过程: 1.下载HBuilder编辑器http://www.dcloud.io/,成功之后注册账号 2.新建-app,然后将自动生成的除manifest.json之外的所有文件删除,然后将vue项目build之后生成的dist文件拷贝进项目 3.可在manifest.json文件内设置app属性,如app名称,图标,等待加载动画等 4.点击发行,选择第一项,其余默认 5.等待发布完之后下载至本地,装到手机上

把H5打包成IOS APP其实可以很简单!签名?越狱?都不需要!

很多小伙伴都在开发自己的app, 有的实现实现比较简单,就是一个h5页面,然后想要打包成app发布出去. 这个想法很单纯 打包生成个app这个是很简单的,网上一堆打包工具,分分钟可以完成 BUT…… 你会遇到苹果的app无法发布的难题…… 你查了大量的资料,最终发现——只能购买一个开发者账号,并且要通过MAC电脑才能完成非常复杂和繁琐的上传发布过程! 光繁琐能上架也行啊,可是…… 你有很大的概率被拒绝,因为各种问题. 你也可以在淘宝上找代理帮你上架appstore, 但是,钱钱 钱,好多钱! 而

前端如何将H5页面打包成本地app?

大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年.意外发现一个叫Hbuild的软件,简单好用,下面做个简单的使用分享: 首先到网上下载一个Hbuild,下载地址->戳(windows) 一.安装成功后打开选择暂不登陆,进入主界面如图: 二.把自己打好的包导入到hbuild 三.选择对应选项及文件夹 四.电脑连上手机,点击菜单栏"运行"--"到手机" 五.轻松搞

vue+hbuilder 打包成移动app

查看了很多网上写的改来改去都在手机上运行不起来,运行起来又是白屏:最后放弃,自己结合文档搞吧! 1. 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”后,打包生成的 dist 文件. 注释:config文件夹里的index.js中有两个assetsPublicPath,记住是改 build对象下的 assetsPublicPath 完了之后,打包, 执行npm run build之后生成dist文件夹 2. 在

VUE项目用hbuilder 打包为手机APP

一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行 二.修改路径(assetsPublicPath: './') 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 三.打包文件  指令:npm run build 打包后会生成dist文件 四.把dist文件变

web页面如何打包封闭成手机APP

所谓的webApp就是html页面跟原生app结合而成的一种应用,这种应用的开发可以节省不少的成本,做出来的app跟原生一样,webApp利用框架技术可以让你有使用app的感觉,具体可以看平安银行的app 工具/原料 电脑 eclipse,git,nodejs,jdk,cordova 一个完整的手机网站 方法/步骤 首页得准备好需要的东西,如eclipse,一个完整可以浏览的手机网站,而且确保电脑配置好jdk,环境变量,还要安装好cordova,这些环境等配置这里不表,可以自行百度.在这里我就自

AndroidStudio将html5打包成apk

我想将html5的动画效果打包成手机app,以方便传播.而在android开发的组件中就直接由webview可以访问网页,另外在android工程中,assets文件夹下的内容是不会在被编译的,因此可以将已经做好的html5的项目放在该文件夹下,由webview控件打开该文件夹下的index.html,这样就可以实现html5打包成安卓的apk了. 1.修改MainActivity.java,内容如下: package com.example.admin.yourProjectName;//改成

如何将html5程序打包成Android应用

问题分析: html5网站主要由html+css+js的形式组成,需要使用浏览器进行展现. Android需要使用Java语言来开发,对于前端工程师来说,无疑是增加了很大的难度. 随后出现了很多打包工具,来协助我们将网页元素打包成手机app,将我们编写的html转化为Java语言. 解决方案: 推荐一款我们常用的打包工具:HBuilder. 该工具不仅提供了Android应用打包,还可以直接连接手机进行调试,配合HTML5+可以实现很多Android原生的功能.比如:扫码二维码,拍照,摇一摇等等

手机 app 开发的几种方式 ionic 学习思路以及 ionic 新建的项目分析

手机 app 开发的几种方式 ionic 学习思路以及ionic 新建的项目分析 学习要点:1. 目前开发手机 app 的几种方式2. Ionic 学习思路简介3. Ionic CSS 框架4. ionic js 指令 路由 其他 ui 交互效果5. ionic 命令行/CLI 安装 调试 打包( 第三季 第一讲已讲)6. ionic 开发包下载 以及命令创建的项目分析 1. 目前开发手机 app 的几种方式原生/Native: 使用原生 SDK 开发 App.优点不用说, 当你有足够的资源,这