MUI Development WebApp (2)

Front-end development app, starting from Hbuilder ~

Order

When you develop mobile apps through HTML5, you'll find that HTML5 has a lot of capabilities. In order to compensate for the shortcomings of HTML5 ability, under the guidance of China, the establishment of www.HTML5Plus.org organization, the introduction of html5+ norms.

html5+ extension of JavaScript object Plus, so that JS can invoke a variety of browsers do not implement or implement poor system capabilities, equipment such as cameras, gyroscopes, file systems, such as uploading and downloading, QR code, MAP, payment, voice input, message push and so on.

Hbuilder's phone native capability calls are divided into 2 levels:

A) ability calls across mobile platforms are in the html5+ specification, such as two-dimensional code, voice input, using Plus.barcode and Plus.speech. Written once and can be run across platforms.

b) JS Bridge is another innovative technology, via JS can directly adjust the iOS and Android native API, which is no longer cross-platform, such as the iOS Game Center, or create a shortcut on the Android phone desktop.

The use of JSB is var obj = plus.android.import ("Android.content.Intent"), a native object android.content.Intent mapped to a JS object, obj, and then JS The method properties of the Obj object can be manipulated.

Note: Mobile apps developed using html5+ are not mobileweb pages. This is the easiest place for novices to confuse. MobileWeb files are stored on the Web server, while the mobile app's files are stored locally on the phone, and the HTML, JS, and CSS files for the mobile app are packaged in a native installation package such as an IPA or apk to run on the mobile client.

Of course, some pages in these mobile apps can also continue to run from the server side as Web pages. So mobile web, when you create a new project in Hbuilder, belongs to the Web project. Do not place it in a mobile app project. Mobile Web projects also cannot be truly machine-linked and packaged.

Content Introduction

Introduce the front-end personnel to develop the application of several methods, specific introduction Hbuilder development app, a fan like the new door ~

The Almighty JS

The first JS only limited to some effects on the Web page, the operation of Web content, but Nodejs JS into the back end, that is, the server side, from the front-end personnel can be involved in the backend, before and after all, Native.js (and other JS, later introduced) JS into the mobile side, from the front-end personnel to move all-in-all.

The front end involves the app in two ways

Adapting to mobile Web pages

Everyone is familiar with the bootstrap, and now just out of the Amazeui is the representative of this method, said the simple point is to do the mobile side of the adaptation, layout style components are suitable for mobile display.

Flaw: After all, not the app, no matter how easy and powerful it is to replace the app.

js+html+css+ Packaging Technology

More famous is PhoneGap, the domestic is hbuilder, probably means that HTML is responsible for page content, JS responsible for the effect and call the native app method, the UI framework is responsible for the style, and finally packaged into an APK or IPA.

Hbuilder (http://www.dcloud.io/)

Do not talk about PhoneGap, do not apply to domestic conditions, yes, you are not wrong, this is a development of the IDE, in fact, the eclipse was deeply customized.

Features are more shortcut keys, Support mobile app development (h5+ mode).

h5+ (http://www.html5plus.org/#home)

It can be said that Nodejs JS to the back end, h5+ JS to the mobile side.

Principle

The above-mentioned principle, again said again:

HTML is responsible for the page, that is, the content and framework;

JS is responsible for invoking the method, that is, calling some mobile-native;

UI is responsible for the style, the more famous Bootstrap,amazeui,jquery Mobile,mui

UI Comparison

A few of the UI mentioned above, do a simple comparison, only represent personal views,

Amazeui: Function and bootstrap repetition, the official explanation is the Chinese typesetting is optimized, personally feel a bit superfluous, bootstrap is very good.

Bootstrap: Suitable for mobile browsing web, mobile browsing effect is good, but still a webpage.

jquery Mobile: Specifically for the mobile side to do the customization, looks like the mobile phone application, JS+CSS, foreign, not recommended, there are pits.

MUI: This is recommended, compare the Jqmobile and MUI, obviously MUI effect style is better, there will be pits, but support domestic bar.

Front-end development app

Build the development environment

No need to build iOS and Android development environment, just download hbuilder (estimated need Java environment support).

Selected UI

Currently recommended MUI, good effect

Write events

Using JS to invoke native methods to achieve app effects

Write business logic

Environment construction

Objective

This tutorial is about developing mobile apps (including Android and iOS) using html5+ (Nativejs) and MUI.

Interested please continue, not interested please skip, most from the official API, add some of their own summary.

Hbuilder

Description

The environment for developing apps with h5+, also the IDE, has made deep customizations to eclipse, and children's shoes that have previously used eclipse or myeclipse can be started directly.

Website

http://www.dcloud.io/

Download

Click on the official website to download, installed after you can compress the folder into a zip, convenient for later use, decompression can be used.

Depend on

It is estimated that the JRE environment will be required, not tried, if necessary, please Baidu search JRE installation method.

Use

After opening the Hbuilder, there will be a project "Hellohbuilder" with the introduction of Hbuilder.

Shortcut keys

Hbuilder a big bright spot is the shortcut key, but if accustomed to oneself before the shortcut key will be very awkward, need oneself in the tool--option--general--shortcut key to revise.

Plug - ins

Hbuilder the plug-in has been optimized to provide the longest use of some plug-ins, and use Dcloud website download, fast, Eclipse comes with plug-in installation needs FQ.

Open the tool-plug-in installation, install the plug-in you need, such as I installed the following plugins:

Complete

The construction of the environment is complete, which should be the simplest of all development environments.

Principle Introduction

Principle

The principle of html5+ app development is probably this:

The HTML page is responsible for the content;

UI is responsible for page style;

JS is responsible for invoking native app methods.

Html5

HTML5 This section is responsible for the page, which is what you see in the app, the approximate architecture and content

Ui

The UI is responsible for the page style, since to do the mobile app, the effect will have to be close to the mobile side, here is not limited to what kind of UI, the more common adaptation mobile side of the UI framework is:

Bootstrap

Introduction: The UI framework developed by Twitter is characterized by a beautiful profile that can be adapted to the mobile side (e.g. this site: http://uikoo9.com/)

Chinese Civil Service Network: http://v3.bootcss.com/

Amazeui

Introduction: The Chinese imitate bootstrap to do a UI framework, personal feeling a little superfluous, interested can see.

Official website: http://amazeui.org/

jquery Mobile

Introduction: Hbuilder is actually imitating the foreign phonegap, Universal MUI is imitating jquery mobile, but it feels good

Official website: http://jquerymobile.com/

Mui

Introduction: Hbuilder with the mobile UI, but also with Nativejs, feel good, imitate the iOS7 interface style.

Official website: http://dcloudio.github.io/mui/

Framework7

Description: A UI framework that mimics ios7 abroad, likes

Official website: http://www.idangero.us/framework7/

Nativejs

Description: A JS that can call native methods of Android and iOS

Getting Started: http://ask.dcloud.net.cn/article/88

Match

Selection: At present the better collocation is Mui+nativejs+hbuilder, you can also try other combinations, such as JQMOBILE+NATIVEJS, etc.

mui-demo:http://www.dcloud.io/hellomui/

nativejs-demo:http://www.html5plus.org/#case #/case/id/4.html

MUI Development sample

Objective

Have you looked at the previous two articles for a little bit of an itch?

Let's start with a simple example, as well as MUI-related content

Mui

Official website: http://dcloudio.github.io/mui/

Description: I hope you can read through the official website, this is the basis for future development

Begin

New Project

Click on the new mobile app on the home page, as follows:

or right-click New in the Project manager, or shortcut key Ctrl+n+a

Select Templates

Selecting the MUI project here will automatically introduce the MUI's JS and CSS as follows:

File structure

The following folders are available by default: Css,fonts,js, as follows:

Simple development

Header

After opening the index.html, enter MH in the body and return as follows:

Body

Enter the same MBO after the return

List

Add some lists to Mbody

The final code

<! DOCTYPE html>

<meta charset= "Utf-8" >

<meta name= "viewport" content= "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, User-scalable=no "/>

<title></title>

<script src= "Js/mui.min.js" ></script>

<link href= "Css/mui.min.css" rel= "stylesheet"/>

<script type= "Text/javascript" charset= "Utf-8" >

Mui.init ();

</script>

<body>

<a class= "Mui-action-back mui-icon mui-icon-left-nav mui-pull-left" ></a>

<H1 class= "Mui-title" > My title

<div class= "Mui-content" >

<ul class= "Mui-table-view" id= "My_task_list" >

<li class= "Mui-table-view-cell" >

<div class= "Mui-slider-right mui-disabled" >

<a class= "mui-btn mui-btn-red" > Delete </a>

</div>

<div class= "Mui-slider-handle" >

Todo 1

</div>

</li>

<li class= "Mui-table-view-cell" >

<div class= "Mui-slider-right mui-disabled" >

<a class= "mui-btn mui-btn-red" > Delete </a>

</div>

<div class= "Mui-slider-handle" >

Todo 2

</div>

</li>

</ul>

</div>

</body>

Debugging (Android as an example)

Connect your phone

First you need to connect your phone

Run

Choose Run-Phone run-run on XX device

Or use the shortcut key Ctrl+r

Effect

Now you can see the effect on your phone.

Attention

Need to open developer mode

Packaged

Dcloud Certificate Packaging

Choose release--app Package--Choose android and Dcloud public certificates as follows:

Parameter configuration

May sometimes prompt for parameter configuration errors, which is what you need to open the project under the Manifest.json file, and remove the third-party plugin, as follows:

Wait

Go back to the last step of the release package, click Pack will prompt you to go to the cloud packaging, you just have to wait,

After a little while, you'll be able to copy the APK to your phone and use it.

Differences in several open pages in MUI

Use Hbuilder+mui to do the app for a period of time, during a lot of problems encountered, their own groping, made an app, see: Http://uikoo9.com/dishi/download

If you have a higher level than this, then you don't have to look at it, just skip it.

Level

Because with Hbuilder+mui out of interest, also did not go to see the source code, stay in use summary level, so there is said the wrong place also please forgive me.

"Several ways to open a page"

1. Creating a sub-page when initializing

2. Open a new page directly

3. Pre-load page

Example

1. Creating a sub-page when initializing

Mui.init ({

Subpages: [{

Url:your-subpage-url,//Sub-page HTML address, support for local address and network address

Id:your-subpage-id,//Sub-page flag

Styles: {

Top:subpage-top-position,//top position of sub-page

Bottom:subpage-bottom-position,//Sub-page bottom position

Width:subpage-width,//Sub-page width, default = 100%

Height:subpage-height,//Sub-page height, default = 100%

......

},

Extras: {}//Extra extension parameter

}]

});

2. Open a new page directly

Mui.openwindow ({

Url:new-page-url,

Id:new-page-id,

Styles: {

Top:newpage-top-position,//Top position of new page

Bottom:newage-bottom-position,//new page bottom position

Width:newpage-width,//New page width, default = 100%

Height:newpage-height,//New page height, default = 100%

......

},

Extras: {

...//Custom extension parameter, can be used to handle the value of the page transfer

}

Show: {

Autoshow:true,//Page loaded event occurs automatically, default is True

Anishow:animationtype,//page display animation, the default is "Slide-in-right";

Duration:animationtime//Page animation duration, Android platform default 100 milliseconds, iOS platform default 200 ms;

},

Waiting: {

Autoshow:true,//auto-display wait box, default to True

Title: ' Loading ... ',//waiting for the prompt to appear on the dialog box

Options: {

WIDTH:WAITING-DIALOG-WIDHT,///wait box background area width, default automatically calculates appropriate width based on content

Height:waiting-dialog-height,///wait box background area height, default automatically calculates appropriate height based on content

......

}

}

})

3. Pre-load page

Mode 1

Mui.init ({

Preloadpages: [{

Url:prelaod-page-url,

Id:preload-page-id,

Styles: {},//Window parameters

Extras: {},//Custom extension parameters

Subpages: [{}, {}]//Sub-page of pre-loaded page

}]

});

Mode 2

var page = Mui.preload ({

Url:new-page-url,

Id:new-page-id,//Use the URL of the current page as the ID by default

Styles: {},//Window parameters

Extras: {}//Custom extension parameters

});

"Some differences"

1. Sub-pages and non-sub-pages

In the above three ways, the 2,3 open page is not a sub-page,

The difference is that a sub-page is equivalent to an IFRAME in HTML, not a sub-page equivalent to a newly opened browser window loaded with an HTML

2. Sub-page for slide-by menu

The Sub-page has its characteristics, particularly applicable with index.html+list.html this case,

If the index.html (Main Page) +list.html (sub-page) is implemented, the sub-page will automatically follow when the main page is right-sliding.

With Index.html (homepage) +list.html (New page), the main page is right, the new page does not go right, and the new page has to be processed separately.

3. The use of frequent switching of sub-pages

If frequent left slide right slide, on the configuration lower mobile phone will appear list.html cover index.html situation, adopt sub-page mode will not, adopt new page mode probability is very big.

4. Sub-page for use with drop-down refresh and pull-up loading

Before doing a pull-down refresh, the use of the form of a new page, according to the official website tutorial, how to do not succeed, and then read the next source, found that the next pull refresh must take the form of sub-page, that is, your list.html must be index.html sub-page, before you can pull the refresh.

5. New page for new page

Open a new page, for viewing details and the like, need to open a new page, and MUI itself encapsulates the new page back method, you do not need to worry about.

6. Two ways to pre-load a page

The first is pre-loading at initialization time, which is suitable for a long time before you use this page, and if you want to go to the page immediately and use it, you will get null. The second way is similar to open, personal feeling there is no big difference, the only difference is that open opens directly, preload just load, you can choose to open the time after.

7. Summary

Requires a pull-up refresh pull-up load please use a sub-page, you need to open a new page to use the new page mode, you need to load a page but temporarily do not use use preload mode.

MUI Development WebApp (2)