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>
vue+hbuilder 打包成移动app的更多相关文章
- 关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案
楼主是使用vue-cli构建的页面,代码是vscode,然后使用hbuilder打包成移动端的安装包.首先确认在npm run build 之后没有问题(默认dist文件夹),可以使用anywhere ...
- 项目打包成手机app 通过什么打包?
项目打包成手机app 通过什么打包? 1.HbuildX注册邮箱账号 2.新建-app,然后将自动生成的除manifest.json之外的所有文件删除,然后将vue项目build之后生成的dist文 ...
- 把H5打包成IOS APP其实可以很简单!签名?越狱?都不需要!
很多小伙伴都在开发自己的app, 有的实现实现比较简单,就是一个h5页面,然后想要打包成app发布出去. 这个想法很单纯 打包生成个app这个是很简单的,网上一堆打包工具,分分钟可以完成 BUT…… ...
- 利用HBuilder将vue项目打包成移动端app
事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...
- VUE项目用hbuilder 打包为手机APP
一.测试项目是否可以正确运行 指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...
- cordova+vue 项目打包成Android(apk)应用
现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android和ios的打包,配置完成之后,每次只 ...
- vue2.0+mintui+hbuilder 打包移动端app之后出现空白页面的解决方案
1.首先使用的是vue-cli构建的页面,用hbuildX打包成移动端的安装包(hbuildX打包成app的流程,请看自行搜索) 2.cnpm install build 生成dist文件夹,里面包含 ...
- 前端如何将H5页面打包成本地app?
大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年.意外发现一个叫Hbuild的软件,简单好用,下面 ...
- 将python代码打包成一个app/exe
前言 打包的代码通常都需要写一个简单的界面,一般用PyQt来写.用PyQt写界面的方法请戳这里:PyQt5的安装及基本配置 PyQt5教程 python提供了几个用来打包的模块,主要有py2ap ...
随机推荐
- java基本数据类型全面总结
Java数据类型(type)可以分为两大类:基本类型(primitive types)和引用类型(reference types).下面是Java团长给大家整理的java基本数据类型相关知识,感兴趣的 ...
- docker简单理解
Docker是开源的一个基于轻量级虚拟化技术的容器引擎项目.它通过分层镜像标准化和内核虚拟化技术,使得应用开发者和运维工程师可以以统一的方式跨平台发布应用,并且以几乎没有额外开销的情况下提供资源隔离的 ...
- python3笔记七:break和continue语句
一:学习内容 break语句 continue语句 二:break语句 1. 说明 作用:跳出for和while的循环注意:只能跳出距离它最近的那一层循环 2.举例1 for i in range(1 ...
- spark 笔记 4:Apache Hadoop YARN: Yet Another Resource Negotiator
spark支持YARN做资源调度器,所以YARN的原理还是应该知道的:http://www.socc2013.org/home/program/a5-vavilapalli.pdf 但总体来说, ...
- Dell做RAID配置图文全教程
首先准备工作:Dell服务器 首先重启Dell,我们会看到Dell服务器的启动页面: 当我们看到出现下面这个界面的时候,根据提示按下Ctrl+R进到SAS磁盘阵列里面 备注:大多数Dell服务器进磁盘 ...
- P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…
P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He… 大写祖母转数字 -64 发现dalao #include<bits/stdc++.h> usi ...
- 【5】标题上的小logo
<link rel="shortcut icon" href="logo图片的路径"> shortcut --- 捷径,近路 icon --- ...
- react目录结构、demo实例详解、属性数据绑定方式
1.目录结构 2.demo实例详解 a)创建Home.js import React, { Component } from 'react'; //创建一个组件必须要集成Component组件,且组件 ...
- MVC1:.Net MVC Cotroller向View传值
下面介绍 ASP .Net MVC中 Cotroller 向 View 传值 的4中方式: ViewBag,ViewData,TempData,Model. (注:参数可根据需要为复杂类型,只需在应用 ...
- ASP.NET MVC 发布WIN SERVER2012
首先在打开服务器管理,点添加角色和功能 这个名字自己设置不打紧 勾选web服务器,之后点下一步 在功能选择中勾选下面部分 之后点击工具选择服务,确保web服务正在运行 此时服务端告一段落,返回主机打开 ...