Hbuilder Development App Tutorial 06-Home

Actual combat

The first few sections are basically the popularization of some concepts,

As mentioned earlier, this tutorial will take the drop stone as an example to explain,

Interested can download the experience first, or download the source under the study.

New Project

Open Hbuilder, right-click New in the project manager--mobile app, or direct ctrl+n,a,

See the following screen, fill in the project name, select the MUI Project,

When the new is complete, the default generated directory is as follows, with the basic and front-end development of a directory structure similar to

Connect your phone

This tutorial takes Android for the time being, and finally it explains the development of iOS phones in a different, similar.

Connect your Android phone with a data cable, set the settings in your phone-developer Tools--usb Debug, open,

Select the previously created project, select menu, run-phone run-your phone, or direct ctrl+r,

If the prompt detects the phone, you can download the app Bao and other software, app Bao will help you take care of,

If the phone is connected properly, the console will display the following information, after success, your app has been running on the phone,

Although it is a blank page, but feel the front end of the fun to do the app.

Take it slow.

Page structure

First, the file storage structure,

JS folder under the new Lib and App folder, respectively, put the tool JS and page JS, as follows

What needs to be mentioned is that the tool JS uses jquery, should be very powerful jquery,

Some people will wonder if jquery is bigger, with jquery not too good,

Then you're wrong and you're still stuck in the web thinking that

In fact, Hbuilder will eventually put these JS into the app package,

In fact, you call jquery is called the app package JS,

There is no big, no charge for the flow of the problem.

Then the page structure,

Refer here: Create sub-page in http://dcloudio.github.io/mui/javascript/, peak picture

You can see that the homepage is divided into the index part, which is the visible head, sometimes the head and the bottom,

And the list part, which is the middle part, why do this, in order to make the app more realistic,

You can also try to put the index and list together, eventually you will eventually use this method.

Index.html

The code is as follows:

<! DOCTYPE html>
1.meta
Not much to say, must be, the second one is to adapt to the mobile side
2.mui
MUI's JS and CSS are required, and MUI is responsible for the app's UI interface and the encapsulation of the app and native interaction,
You can also use a UI such as Bootstrap or Amazeui or jquery mobi, but this is still recommended for MUI.
3.header
Use the component "navigation bar containing text and icons" in the MUI package, as described here: http://dcloudio.github.io/mui/components/
Where the mui-pull-left represents floating to the left, right to the mui-icon-*, and a variety of font icons,
About the font icon can be seen here, if the MUI comes with no satisfaction, you can download the introduction: http://www.iconfont.cn/
4. Good habits
It is a good habit to introduce JS that is not related to the page initialization to the bottom of the body.
Here is the introduction of jquery and some of my own package qiao.js, later detailed explanation, and finally the index page corresponding JS

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 06-Home