vue+hbuilder 打包成移动app

时间:2022-04-21 09:31:02

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

1.

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

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

vue+hbuilder 打包成移动app

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

vue+hbuilder 打包成移动app

2.

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

vue+hbuilder 打包成移动app

vue+hbuilder 打包成移动app

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

vue+hbuilder 打包成移动app

vue+hbuilder 打包成移动app

vue+hbuilder 打包成移动app

vue+hbuilder 打包成移动app

vue+hbuilder 打包成移动app

vue+hbuilder 打包成移动app

vue+hbuilder 打包成移动app

上图中添加位置的代码

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

vue+hbuilder 打包成移动app

vue+hbuilder 打包成移动app

vue+hbuilder 打包成移动app


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

vue+hbuilder 打包成移动app

<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>

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

  1. 关于vue2&period;0&plus;hbuilder打包移动端app之后空白页面的解决方案

    楼主是使用vue-cli构建的页面,代码是vscode,然后使用hbuilder打包成移动端的安装包.首先确认在npm run build 之后没有问题(默认dist文件夹),可以使用anywhere ...

  2. 项目打包成手机app 通过什么打包?

    项目打包成手机app  通过什么打包? 1.HbuildX注册邮箱账号 2.新建-app,然后将自动生成的除manifest.json之外的所有文件删除,然后将vue项目build之后生成的dist文 ...

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

    很多小伙伴都在开发自己的app, 有的实现实现比较简单,就是一个h5页面,然后想要打包成app发布出去. 这个想法很单纯 打包生成个app这个是很简单的,网上一堆打包工具,分分钟可以完成 BUT…… ...

  4. 利用HBuilder将vue项目打包成移动端app

    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...

  5. VUE项目用hbuilder 打包为手机APP

    一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...

  6. cordova&plus;vue 项目打包成Android(apk)应用

    现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...

  7. vue2&period;0&plus;mintui&plus;hbuilder 打包移动端app之后出现空白页面的解决方案

    1.首先使用的是vue-cli构建的页面,用hbuildX打包成移动端的安装包(hbuildX打包成app的流程,请看自行搜索) 2.cnpm install build 生成dist文件夹,里面包含 ...

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

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

  9. 将python代码打包成一个app&sol;exe

    前言 打包的代码通常都需要写一个简单的界面,一般用PyQt来写.用PyQt写界面的方法请戳这里:PyQt5的安装及基本配置    PyQt5教程 python提供了几个用来打包的模块,主要有py2ap ...

随机推荐

  1. 转&colon;openwrt中luci学习笔记

    原文地址:openwrt中luci学习笔记 最近在学习OpenWrt,需要在OpenWrt的WEB界面增加内容,本文将讲述修改OpenWrt的过程和其中遇到的问题. 一.WEB界面开发         ...

  2. springMVC整合spring和hibernate4(适合于框架的搭建)

    基础的东西不再详细说明,只在这里说明一下主要的配置文件,如何通过配置文件取得sessionFactory . 步骤: 1:在web.xml中引入springmvc的配置文件springmvc.xml( ...

  3. JQuery focus&lpar;&rpar;

    跳转到登陆页面时可以使用focus方法 <input name="login_account"id="login_account"class=" ...

  4. 从51跳新唐cortex学习3——细说新唐两种定时器

    的定时器我们已经是相当熟悉啦.但是,对于第一次接触新唐,第一次接触cortex的定时器一样,都是加1计数,但是功能和容量变大了),包括4个32位定时器(里面放24位的数据),还有分频功能.TMER0到 ...

  5. linux中open函数使用

    open函数用来打开一个设备,他返回的是一个整型变量,如果这个值等于-1,说明打开文件出现错误,如果为大于0的值 参考格式 if(fd=open("/dev/ttys0",O_RD ...

  6. 1&period;5、CDH 搭建Hadoop在安装之前&lpar;定制安装解决方案&rpar;

    Cloudera托管两种类型的软件存储库,您可以使用它们来安装诸如Cloudera Manager或CDH-parcel存储库和软件包存储库之类的产品. 在大多数情况下,这些存储库是有效的解决方案,但 ...

  7. ASP&period;NET MVC高亮显示当前页面菜单

    1.创建MvcHtmlExtension扩展类 public static class MvcHtmlExtension { public static MvcHtmlString MenuLink( ...

  8. Java进程线程理解

    一个进程包括由操作系统分配的内存空间,包含一个或多个线程.一个线程不能独立的存在,它必须是进程的一部分.一个进程一直运行,直到所有的非守护线程都结束运行后才能结束. 多线程能满足程序员编写高效率的程序 ...

  9. pyhont备份php代码脚本

    #!/usr/bin/env python # encoding: utf-8 import time import os import sys import logging #create logg ...

  10. Python初学总结

    下边的总结都是在python3上 一.基础 1.输出与输入: 输出:print(变量/字符串) 输入:input() 返回的是字符串 price=input() print(price) 2.pyth ...