HBuilder初探——强大的提示符及纯网页打包成APP

之前做手机页面,只是时效短、更新度高的零星几个,供APP内嵌调用。比如抽奖嘛、活动宣传啦。

现在的公司,不知是不是不知者无畏,整一个app全部用html5来实现,包括头部导航条。客户端只需封装一下,打个包就OK。实现的方式是网页放在服务器,像从浏览器访问一下,客户端只是充当一个浏览器的角色。这种方式app store应该是不允许的吧。但所做的只是供医院内部人员使用的一个项目,能实现在线学习课程、报名、考试、签到、查房、论文申报等功能就OK。

得知HBuilder这个东东,还是从客户口里听来的,他对HBuilder推崇备致,充满对新技术的兴奋感。他说这个可以实现下载到本地,而不是从服务器访问。还可以打包。更可以调用设备的一些功能,如摄像头什么的,这倒比较新鲜,我从来不知道网页也可以调用设备。

于是去找来研究了一下。发现的确是有不少优点。不考虑别的,只拿它来做html编辑器都是极好的,速度快、提示相当强大。

它内嵌了emmet,就是以前的zen coding,使代码提示功能发挥到极致,速度加快不少。

举例如下:

一、js(按“回车”键)

dl:$("")

dli:$("#")----id

dlc:$(".")----class

dg:document.getElementById("")

二、DOM(按Tab键)

不用输入<>,直接输入标签的名字即可。

! or html:5:

html5全套标签

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>

</body>
</html>

p#foo.bar:

<p id="foo" class="bar"></p>

h1{foo}: <h1>foo</h1>

>:子元素;+:同级元素;^:换行;*:复制

div+div>p>span+em^bq:

<div></div>

<div>

  <p>

    <span></span>

    <em></em>

  <p>

  <blockquote></blockquote>

</div>

ul>li*5:

<ul>

  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

</ul>

另外还可以用它来打包成app,安装到手机上,当原生来用。而我之前的做法都是搭好本机服务器,用草料二维码生成访问地址,再用手机扫描,在手机浏览器中打开来调试。从没试过可以安装,甚至可以定义图标和应用名称。

在hbuilder中新建移动APP项目;在manifest.json中设置应用名称、版本号和入口页面等;在第二页“图标配置”中可以上传app的图标。

然后右键“发行”,选择“App打包”,android使用DCloud公用证书上传到云端打包,通过360手机助手可以直接安装到手机。

有一个问题:打包的app按返回键时会直接退出程序,而不是返回上一页,这需要用到html5+的plus.key.addEventListener(‘backbutton‘,function()手动设置backbutton监听事件来定义。

common.js:

//取消浏览器的所有事件,使得active的样式在手机上正常生效
document.addEventListener(‘touchstart‘,function(){
return false;
},true);
// 禁止选择
document.oncontextmenu=function(){
return false;
};
// H5 plus事件处理
var ws=null,as=‘pop-in‘;// 默认窗口动画

function plusReady(){
ws=plus.webview.currentWebview();
// 隐藏滚动条
ws.setStyle({scrollIndicator:‘none‘});
// Android处理返回键
var pageUrl=window.location.href;
plus.key.addEventListener(‘backbutton‘,function(){
//判断是否返回到首页,是->退出,否则返回上一页
if(pageUrl.indexOf(‘home‘)==-1){
history.back();
}else{
if(confirm(‘确认退出?‘)){
plus.runtime.quit();
}
}
},false);
}
//扩展API是否准备好,如果没有则监听“plusready"事件
if(window.plus){
plusReady();
}else{
document.addEventListener(‘plusready‘,plusReady,false);
}

时间: 2024-10-10 02:50:12

HBuilder初探——强大的提示符及纯网页打包成APP的相关文章

展示触摸屏网页打包成桌面应用(nw.js)

一.编写触摸屏网页注意点 1.控制缩放行为.内容宽度为屏幕宽度,初始缩放比例为1:1,并禁止缩放(如若可放大缩小,影响操作体验) <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 2.<a>标签点击存在暗色透明背景问题,使用css属性 -webkit-tap-highlight-colo

Electron把网页打包成桌面应用并进行源码加密

前言 最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错.这里记录一下打包过程以作记录,便于自己以后查看学习. 一.简介 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. 二.打包过程 1.

网页打包安卓APP流程

搭建环境过程: 1. 安装JDK. 参见http://www.cnblogs.com/Li-Cheng/p/4334985.html. 注:实质上到该网址上下载好JDK安装包,安装后添加一个环境变量: JAVA_HOME,其值为:C:\Program Files\Java\jdk1.8.0_73(由于安装路径不同,从路径下复制即可),然后在PATH变量中添加一个: %JAVA_HOME%\bin; 一定要记得在Path中添加的所有路径都要以;隔开,不然可能会影响系统运行. 2. 安装Androi

hbuilder+vue单页应用打包成APP后退按钮返回上一页的问题

APP打包工具:hbuilder 需要js包:mui.js ,引入方法https://www.cnblogs.com/v616/p/11290281.html 实现原理:在vue根组件App.vue监听安卓机,按后退键时候vue的路由path 代码App.vue 代码片段: data() { return { tabbarShow:true, arrTab:['/home','/cat','/history','/me'] }; }, mounted(){ // 安卓后退键 this.$mui.

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

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

HTML/网站一键打包APK工具(html网页打包安卓APP应用)

工具简介 “HMTL一键打包APK工具”可以把网站打包为一个安卓应用APK文件,无需编写任何代码,支持在安卓设备上安装运行. 线上地址: 点击进入页面 历史更新 1.4.5 (2020.2.16) 1. 优化打包逻辑,添加内核标注 2.新增浏览器打开弹窗支持 3.更新打包证书 4.更换默认打包包名 5.优化打包内核,提示打包速度和稳定性 1.4.2(2019.12.18) 1.优化apk打包速度和容错机制 1.4.1(2019.9.2) 1.新增状态栏颜色设置 2.默认禁用缩放按钮 1.4.0(

网络采集软件核心技术剖析系列(4)---使用C#语言如何将html网页转换成pdf(html2pdf)

一 本系列随笔概览及产生的背景 本系列开篇受到大家的热烈欢迎,这对博主是莫大的鼓励,此为本系列第四篇,希望大家继续支持,为我继续写作提供动力. 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受广大博客写作和阅读爱好者的喜爱.同时也不乏一些技术爱好者咨询我,这个软件里面各种实用的功能是如何实现的. 该软件使用.NET技术开发,为回馈社区,现将该软件中用到的核心技术,开辟一个专栏,写一个系列文章,以飨广大技术爱好者. 本系列文章除了讲解网络采编发用到的各种重要技术之外,也提供了不少问题的解决

利用ffmpeg0.6.1把.h264纯码流打包成.mp4 .avi等格式 (转载)

转自:http://cache2.weidaohang.org/h/index.php?q=aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1cWluZ183MzkvYXJ0aWNsZS9kZXRhaWxzLzY2MzY4NTc= 一直比较困惑一个问题,都说ffmpeg功能很强大,但是自己一直没有去研究一下,今天终于见识了一下它的强大之处了! 首先当然是在linux下编译和安装成功ffmpeg,关于具体的安装流程,可以参考我前面的一篇博文! 这里就直接介绍怎么把.h264纯码流打包

移动web:原生开发打包,嵌入h5页面 webApp:全部都是H5开发的应用 混合APP:使用第三方开发平台从apicloud,appcan,hbuilder等开发,cordova技术打包 原生APP:就是eclipse开发或者studio等工具开发

论坛43213 移动端webApp兼容问题解决 谈谈App混合开发 Hybrid APP混合开发的一些经验和总结 PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的