Before the mobile phone page, only short-term, high-updated sporadic few, for the app to call. such as sweepstakes, campaign propaganda.
Now the company, do not know is not know the fearless, the whole app all with HTML5 to achieve, including the head navigation bar. The client simply encapsulates it, and a package is OK. The way to do this is to put the Web page on the server, like a browser, and the client just acts as a browser. This way the app store should not be allowed. But what is done is only for the hospital internal personnel use a project, can realize the online study course, the registration, the examination, the check-in, rounds, the paper Declaration and so on function is OK.
Learned that hbuilder this east, or from the customer's mouth, he praised Hbuilder, full of excitement about the new technology. He says this can be downloaded locally rather than accessed from the server. can also be packaged. More can invoke some features of the device, such as the camera or something, this is more fresh, I never know that the page can also invoke the device.
So I went to look for a bit of research. It is true that there are many advantages. Do not consider anything else, just take it to do the HTML editor is very good, fast, very powerful hints.
It is embedded in the Emmet, is the previous Zen coding, so that the code hints function to the extreme, speed up a lot.
Examples are as follows:
First, JS (press "enter" key)
DL: $ ("")
dli: $ ("#")----ID
DLC: $ (".") ----Class
DG:d Ocument.getelementbyid ("")
Second, DOM (Press the TAB key)
Do not enter <> Enter the name of the tag directly.
! or html:5:
HTML5 full set of labels
<!doctype html>
<meta charset= "UTF-8"/>
<title>Document</title>
<body>
</body>
P#foo.bar:
<p id= "foo" class= "Bar" ></p>
H1{foo}:
>: child element;+: sibling element;^: line break;*: Copy
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>
In addition, it can be used to package the app, installed on the phone, when native to use. And my previous practice is to set up a good local server, with forage two-dimensional code generation access address, and then use mobile phone scanning, opened in the mobile browser to debug. Never tried to install, you can even define icons and app names.
Create a new mobile app in Hbuilder, set the app name, version number, and entry page in Manifest.json, and upload the app's icon on the second page, icon configuration.
Then right click "Release", select "App Pack", Android use Dcloud public certificate to upload to the cloud packaging, with 360 mobile phone assistant can be installed directly to the phone.
There is a problem: the packaged app will exit the program by pressing the return key, instead of returning to the previous page, which requires the use of html5+ 's Plus.key.addEventListener (' Backbutton ', function () Manually set the Backbutton listener event to be defined.
Common.js:
Cancels all browser events so that the active style is in effect on the phone
Document.addeventlistener (' Touchstart ', function () {
return false;
},true);
Prohibit selection
Document.oncontextmenu=function () {
return false;
};
H5 Plus Event handling
var ws=null,as= ' pop-in ';//default window animation
function Plusready () {
Ws=plus.webview.currentwebview ();
Hide scroll bar
Ws.setstyle ({scrollindicator: ' none '});
Android Processing return key
var pageurl=window.location.href;
Plus.key.addEventListener (' Backbutton ', function () {
Decide if you want to return to the home page, and exit, or return to previous
if (Pageurl.indexof (' home ') ==-1) {
History.back ();
}else{
if (Confirm (' Confirm exit? ‘)){
Plus.runtime.quit ();
}
}
},false);
}
Whether the extension API is ready, and if not, listen for "Plusready" events
if (window.plus) {
Plusready ();
}else{
Document.addeventlistener (' Plusready ', plusready,false);
}
Hbuilder--A powerful prompt and pure Web page packaged into an app
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
