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

时间 2019-11-12

原文原文链接

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

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

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

因而去找来研究了一下。发现的确是有很多优势。不考虑别的，只拿它来作html编辑器都是极好的，速度快、提示至关强大。web

它内嵌了emmet，就是之前的zen coding，使代码提示功能发挥到极致，速度加快很多。json

举例以下：浏览器

1、js(按“回车”键)服务器

dl:$("")app

dli:$("#")----id编辑器

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

dg:document.getElementById("")

2、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:

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';// 默认窗口动画