如何用HBuilderX将Vue项目打包成APP到手机使用 您所在的位置:网站首页 手机编写vue软件 如何用HBuilderX将Vue项目打包成APP到手机使用

如何用HBuilderX将Vue项目打包成APP到手机使用

2024-07-17 04:13| 来源: 网络整理| 查看: 265

如果出现vue打包后出现空白请参考这篇博客:https://blog.csdn.net/weixin_48193717/article/details/108401616

一、把写好的vue项目进行打包生成dist

在这里插入图片描述

二、打开HBuilderX新建项目选择5+APP(A)

在这里插入图片描述 把dist的文件夹复制到HBuilderX创建的5+App中 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

配置图片 在这里插入图片描述 配置启动页面 在这里插入图片描述 SDK配置 在这里插入图片描述 模块权限配置 在这里插入图片描述 配置沉寂模式 沉浸式是APP界面图片延伸到状态栏, 应用本身沉浸于状态栏,所以如果第三方的软件没有为状态栏分配图片,那么自然就是黑色。顶端的状态栏和下面的虚拟按键都隐藏,需要的时候从边缘划出。 沉浸模式。当启用该模式,应用程序的界面将占据整个屏幕,系统自动将隐藏系统的状态栏和导航栏,让应用程序内容可以在最大显示范围呈现,增加大屏体验,而当需要查看通知的时候只需要从顶部向下滑动就能呼出通知栏。

代码:

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

在这里插入图片描述

三、开始生成APP

在这里插入图片描述 在这里插入图片描述 打包完成后在控制台看到一下内容说明已经打包成功 在这里插入图片描述

四、生成APP之后bug

生成APP之后进入APP 体验 单击返回 直接退出的本APP应用的解决方法 在这里插入图片描述

代码如下:

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


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有