vue+hbuilder 打包成移动app

查看了很多网上写的改来改去都在手机上运行不起来,运行起来又是白屏;最后放弃,自己结合文档搞吧!

1.

项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”后,打包生成的 dist 文件。

注释:config文件夹里的index.js中有两个assetsPublicPath,记住是改 build对象下的 assetsPublicPath

完了之后,打包, 执行npm run build之后生成dist文件夹

2.

在新建一个独立文件夹的项目 ,选择 H5+app

把新建H5+app里面不要的css,img,js,index文件先删除掉,然后把vue打包生成的 dist 文件夹里面的 static文件复制到 H5+app里面

上图中添加位置的代码

"statusbar": { //应用可视区域到系统状态栏下透明显示效果
            "immersed": true
        },


解决打包成App后,单击 手机返回键退出应用的bug。(可以直接把这段代码放到你vue项目中,重新打包,再放回来,也可以直接修改这个index.html)

<script>

document.addEventListener(‘plusready‘, function(a) { //等待plus ready后再调用5+ API:

                //// 在这里调用5+ API
                var first = null;
                plus.key.addEventListener(‘backbutton‘, function() { //监听返回键
                        //首次按键,提示‘再按一次退出应用’
                        if (!first) {
                            first = new Date().getTime(); //获取第一次点击的时间戳
                            // console.log(‘再按一次退出应用‘);//用自定义toast提示最好
                            // toast(‘双击返回键退出应用‘); //调用自己写的吐丝提示 函数
                            plus.nativeUI.toast("双击退出", {duration:‘short‘}); //通过H5+ API 调用Android 上的toast 提示框
                            setTimeout(function() {
                                first = null;
                            }, 1000);
                        } else {
                            if (new Date().getTime() - first < 1000) { //获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,
                                plus.runtime.quit(); //退出应用
                            }
                        }
                    }, false);
            });
</script>



原文地址:https://www.cnblogs.com/liujun1128/p/11426077.html

时间: 2024-11-10 18:21:05

vue+hbuilder 打包成移动app的相关文章

使用HBuilderX将vue项目打包成app

因为项目要用到手机扫一扫的功能,纯H5的话我百度之后只能做到调用摄像头,拍照后识别二维码,无法做到自动识别 看到H5+有扫码功能,所以今天尝试用HBuilderX将vue项目打包成app 总的流程很简单,这真的要感谢H5中国产业联盟做出的贡献.将vue打包,生成dist文件夹,HBuilderX创建H5+App项目,这里选择的是默认模版,然后将dist里的文件夹覆盖到新项目,就可以云打包成app下载到手机或者直接进行真机调试 生成app后遇到的第一个坑就是白屏,原因是页面找不到 为了解决跨域问题

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

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

VUE项目用hbuilder 打包为手机APP

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

cordova+vue 项目打包成Android(apk)应用

现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只需要一条命令就可以完成打包. 1.安装cordova这一步的前提是已经完成安装node和npm,如果没有安装的话,请先完成node和npm的安装.node安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装.安装之后在命令行中使用"node -v" 检查安

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

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

血淋淋的教训—将Vue项目打包成app的跨域问题

1 devServer: { 2 host: '192.168.1.58', 3 port: 9999, 4 historyApiFallback: true, 5 noInfo: true, 6 overlay: true, 7 // 配置服代理务器 8 9 proxy: { 10 '/hydro/': { // 只要指向/hydro/的请求,都会自动代理到下面的target的地址 11 target: "http://192.168.1.180:8081", //对方服务器地址 1

HBuilder打包成app 状态栏的颜色问题

沉积式样式(透明) ios:  打开应用的manifest.json文件,切换到代码视图,在plus -> distribute -> apple 下添加UIReserveStatusbarOffset节点并设置值为false.  注意:  1. 真机运行不生效,需提交App云端打包后才生效:  2. 此功能仅在iOS7及以上系统有效. android:  打开应用的manifest.json文件,切换到代码视图,在plus -> distribute -> google 下添加I

将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.等待发布完之后下载至本地,装到手机上

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

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