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

  大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年。意外发现一个叫Hbuild的软件,简单好用,下面做个简单的使用分享:

首先到网上下载一个Hbuild,下载地址->戳(windows)

一、安装成功后打开选择暂不登陆,进入主界面如图:

二、把自己打好的包导入到hbuild

三、选择对应选项及文件夹

四、电脑连上手机,点击菜单栏“运行”--“到手机”

五、轻松搞定,手机上出现APP

时间: 2024-10-07 19:09:09

前端如何将H5页面打包成本地app?的相关文章

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

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

如何把一个H5网站打包成安卓(Android)/苹果(IOS)APP

今天我们来讲解一下如何把一个H5网站打包成安卓(Android)/苹果(IOS)APP,并且安装到手机中.而且不需要很高的技术门砍!只有网址,没有源码,没问题!通过以下步骤,几分钟,将网站变成手机app. 前提条件:网站是H5网站,或者是手机版网站,总之要能在手机端正常显示才行. 打包平台:勾勾街 一.打开勾勾街官网 (http://www.gogojie.com) 二.注册一个账号 三.登录账号,进入后台 四.选择打包的类型 (1)苹果IOS APP点击右上角的“马上创建IOS APP”按钮,

html5页面打包成App - Android或Iphone安装程序

下载安装前端开发工具:HBuilder 官网下载:http://www.dcloud.io/ 根据官网说明安装 * 打开登录HBuilder,把做好的H5页面通过添加app项目把H5的文件夹加入进来(项目列表内会生成文件夹和文件如manifest.json) * 按Ctrl+R启动项目模拟,双击左侧项目列表的manifest.json配置相关参数 * 然后选择顶部菜单项‘发行’→‘App打包’→设置相关参数→上传云端打包好下载下来(可以选择打包成Android或Iphone安装包) * 发送手机

混合app开发,h5页面调用ios原生APP的接口

混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H5页面,而且运行机制也是能够同步运行:但ios上就没那么容易了:. 在此我就不说兼容安卓的问题,只把ios问题说说: 问题1:H5调用ios接口,ios需要初始化,js代码在ISO上只运行一次 解决: 本人使用是angular框架搭建的H5页面 var ua = navigator.userAgen

vue+hbuilder 打包成移动app

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

将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页面效果和 自动 app 生成网站 微页

用MAKA.易企秀.兔展就够了,MAKA和兔展用户体验好些,易企秀广告有点丑,不过模板多一些. 至于交互类工具,iH5.Mugeda.Epub360这三个里面选一个就行. ---------------- http://xiu.xiniu.comhttp://www.rabbitpre.comhttp://maka.im---------------- 为啥放这3个,可猜下....   mark 记录 微页 ------- 快站    https://www.kuaizhan.com http:

微信跳转手机默认浏览器提示 微信h5页面中下载第三方app的方法

由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载. 可以参考:微信打开网址添加在浏览器中打开提示 和 微信扫描打开APP下载链接提示代码优化. 其实原来很简单,就是判断当前是在微信内置浏览器中,然后将默认隐藏的提示层显示出来. 案例如下: 一.遮罩提示: 二.微信跳转:微信自动跳转手机默认浏览器打开下载链接 安卓展示:直接跳转浏览器下载APK 苹果展示:直接跳转打开苹果商店 部分关键代码 第一步

h5页面滑动卡顿解决方法

解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为auto,就是普通的滚动,手指离开就停止滚动,让人感觉有点卡顿 如果设置为touch,在手指离开后还会滚一下,有回弹效果,看上去很流畅 但是刚开始用的时候有个小bug,h5页面打包成app时,一开始写成了*{-webkit-overflow-scrolling: touch;},导致滚动到最后页面底部出