(a) half an hour to develop an app

"Preface" What Is HPP?

Hybirdapp for short, details see: hpp--Let all small and medium-sized enterprises have their own apps

The plain thing is to use HTML+CSS+JS to develop apps, including iOS and Android versions.

Hbuilder

More specific implementation methods, self-Baidu bar, not a narrative,

Previously recommended Hbuilder+mui+nativejs that set, related information:

How to quickly develop a high-quality app--entrepreneurship Talk

Hbuilder Development App-Drop stone

Hbuilder Development App Combat 1-age

Http://uikoo9.com/dishi

Http://uikoo9.com/shisui

Framework7

Hbuilder has many advantages, see the previous articles,

Disadvantages are some, the larger is the UI, and Framework7, is completely different,

From the beginning of a few years ago, to the time before Framework7 launched the amazing Android version,

It feels like there's always someone whispering, so good things don't do apps, but unfortunately,

Reference: Likes, framework7~

Knot

Said a long time, in fact is to say Framework7 effect is very good, but this thing with hbuilder play not turn, with phonegap effect is very good.

"Pre-Preparation" 1. Installing PhoneGap

NPM i-g [email protected]

installation process See official website:http://docs.phonegap.com/getting-started/1-install-phonegap/cli/Don't be afraid, just a few lines of code, if there's Nodejs and NPM, This is your own Baidu bar.

2. Download PhoneGap Developer App

iphone directly in the App Store search on the line, Android words need to go to Google Play, if not FQ students can download this

3.git Clone

Git address: https://github.com/uikoo9/phonegap-framework7.git

4. Catalogue Introduction

Demo1 for Android version, Demo2 for iOS version

"Android Version" 1.cd to Demo1/www

2.phonegap serve

Framework7 file more, after entering the command patience and so on.

3. Open the PhoneGap Developer app

Find an Android phone with the PhoneGap developer app installed, and make sure you have access to the mobile network

Open the app, then enter the serve address above and click Connect

4. Effects

"iOS version"

Similar to the Android version, the difference is to enter the Demo2 and use the iphone to view the effects as follows:

"Phonegap-serve"

The PhoneGap serve command launches a small web serve service on this machine,

Do the front-end should be more familiar, and Browser-sync similar,

When the phone accesses the native serve, it will transfer the files from the local www directory to the mobile phone,

And then packaged into an app based on the PhoneGap developer app for easy commissioning,

This kind of real-machine debugging method is also better,

1. No data cable required, just install app on phone

2. The serve can monitor the file modification and update it when the file is changed.

"Framework7 single page app" File structure

After downloading Framework7 from GitHub, you can see the file structure as follows:

The following is a simple introduction:

1.dist: Put the built-in resource files, some js,css and the like

2.kitchen-sink-ios:ios style

3.kitchen-sink-material:android style

Enter the Kitchen-sink-ios folder to see the following structure:

Open each HTML, found that only index is a complete structure, that is, html,head,body, etc.

Other HTML files are just some HTML fragments, such as the popover.html file:

Spa App

The front-end development is swift and violent, often hears some rank, spa,mvvm,mvc and so on,

If your front end is still stuck in the transduction do page level, then already out of the dead,

The so-called Spa, is a single page application,

The so-called single page application is that when you enter only one main page, and then the other you see the jump page, are in the form of a Div,

For FRAMEWORK7, the HTML fragments from different HTML files are loaded by Ajax and then presented,

The biggest advantage of single page is: fast loading, jump between pages can make various effects, ordinary href jump is powerless.

Front-end MVC

Probably experienced personnel have thought of, you load the URL are index.html, then this URL does not change, just load a variety of div page,

So that's the problem? What to do when the user wants to access about.html directly, because you have only one index.html URL,

The spa is generally implemented through the # delimited plus route, such as when accessing about.html URLs such as Index.html#about,

So speaking of a perfect spa framework, the routing part is essential,

or the spa fire of the last few years has sparked a wave of front-end MVC frameworks, such as BACKBONE,ANGULARJS,

Mvvm

If you think about it, then there is a problem, the spa's main html+ other div mode brings up a problem,

Ordinary href jump way, the server returned is already rendering the number of html+data a whole, such as JSP,

But the spa mode, which is a piece of HTML code that is obtained through AJAX requests, then again AJAX requests data,

So what you get is HTML and data, not the whole of Html+data,

This time the most common way to render data to HTML is JS or jq a setting, think of the big head,

To solve this problem is JS template, which is the JS template, such as juicer this template effect:

Greatly accelerates the process of data integration in HTML.

The JS template is a one-way data binding to HTML, and MVVM is a two-way data binding.

Knot

1.spa

Now the rapid development of the front-end, spa work must not be, although the spa is relatively less fire now.

2.PHONEGAP obsolete?

Someone told me PhoneGap he'd heard about it in 12 years, wasn't it early?

PhoneGap fire, the corresponding UI best partner is the jquery UI, the size of the effect is poor, plus hardware can't keep up,

These are the reasons why PhoneGap is criticized, and not phonegap itself is bad,

Phonegap,hbuilder This kind of tool is just a packaging tool, your HTML+CSS+JS package is the app, just do this thing,

As long as Hybirdapp still exist one day, phonegap as a packaging tool will not be outdated,

And at present the handset hardware comes up, the Phonegap+spa way should also be a kind of good experience.

Reprint: http://uikoo9.com/book/chapterDetail/105

(a) half an hour to develop an app