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';// 默認窗口動畫

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。