Hbuilder Development App Tutorial 01-Open the door to the front-end development app

Fantastic front end, fantastic JS

As we all know, since JS has Nodejs, front-end personnel can be gorgeous turn around, to develop high-concurrency non-blocking service-side programs,

With the advent of HTML5, along with some amazing features, the technology of H5 developing apps is becoming more and more mature,

Since the introduction of PhoneGap abroad in 2008, the front-end staff has embarked on the development of the app's Journey,

This year the country also has introduced some can let the front-end personnel development app IDE,

But most of the charges, strong customization, here is not listed.

Here is recommended Dcloud launched Hbuilder, a word who use who know.

Development of two apps at once

With Hbuilder's cloud-based packaging technology (which can also be placed locally),

You just need to write html+js+css to develop the app,

And it's a development that can generate Android and iOS two apps.

Principle Introduction-ui Layer

The UI in the app corresponds to the UI in the HTML, and you can choose your own UI framework.

Whether it's bootstrap or amazeui, or jquery mobi (PhoneGap recommended UI),

Or Hbuilder recommended MUI can be,

It is recommended to use the MUI recommended by Hbuilder,

Because it encapsulates part of the nativejs thing,

The Hbuilder also encapsulates the shortcut keys for MUI, which is convenient to use.

To summarize, the UI framework in the HTML hierarchy is used to implement (simulate) the UIs in the app.

Click here to download the official mui-app:http://www.dcloud.io/hellomui/

Principle Introduction-nativejs

Hbuilder developing apps, it's inevitable to call native methods in Android and iOS,

The approximate principle is as follows:

Qiao.ng.toast = function (msg) {    //for iOS    if (window. Webviewjavascriptbridge) {        webviewjavascriptbridge.sendmessage (' showsystemtoast$ ' + msg);    } else{        document.addeventlistener (' Webviewjavascriptbridgeready ', function Onbridgeready () {            Webviewjavascriptbridge.sendmessage (' showsystemtoast$ ' + msg);        }, False);    }    For Android    if (typeof android! = ' undefined ') {        android.showsystemtoast (msg);    }};

That is, it encapsulates the way JS calls Android and iOS,

According to Hbuilder's official website, it encapsulates the native method of 40w+,

To summarize, it is JS to invoke the native method in Android or ISO.

Click here to download the official nativejs-app:http://www.dcloud.io/helloh5/

The relationship of dcloud,hbuilder,mui,nativejs,html5+ Dcloud

Dcloud is a company

Hbuilder

Dcloud launched a front-end IDE that can develop apps, based on two of Eclipse development,

So developers who are familiar with eclipse or myeclipse can get started quickly.

Like the IDE, there are phonegap and so on.

Mui

Dcloud introduced a mock-native app UI Framework,

Similar frameworks are: Bootstrap,amazeui,jquery mobi, FRAMEWORK7, etc.

Nativejs

The generalized Nativejs refers to JS, which can invoke the Android,ios native method,

This refers specifically to the Dcloud exit Nativejs, officially called the package 40w method.

html5+

It is said to be an organization of the HTML5, with the goal of exiting the enhanced version of the app for development,

There are many institutions involved, but it feels like the main force is dcloud.

RELATED links:

1.html5+:http://www.html5plus.org/

2.hbuilder:http://www.dcloud.io/

3.mui:http://dcloudio.github.io/mui/

4.nativejs:http://www.dcloud.io/docs/api/

5.bootstrap (Domestic): http://v3.bootcss.com/

6.amazeui:http://amazeui.org/

7.jquery mobi:http://jquerymobile.com/

8.framework7 (class iOS): Https://github.com/nolimits4web/Framework7

9.material-ui (Android): Https://github.com/callemall/material-ui

More Tutorials:

Hbuilder Development App Tutorial: HTTP://UIKOO9.COM/BOOK/DETAIL/3

More study notes: Http://uikoo9.com/book

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Hbuilder Development App Tutorial 01-Open the door to the front-end development app