HTML5 + JS Mobile web development: jQuery Mobile, html5jquery
I. Start Language
I have been tossing web pages on my PC. How can I develop mobile Web pages around me? The reason is that the company used Java to develop products, which consumes a lot of human and financial resources, but the final effect is not very good. Because the Android system has a new set of things, and the iPhone is a new one.
As a result, the Director gave me hands on all the work and focused on the web version to see what the final effect was.
I have been developing and learning mobile phones for a long time, so I started to learn Mobile Phone development.
Sharing is a good way to improve your learning. This is because some unexpected experiences and gains are often learned during the sharing process. Naturally, you will be happy to do so. Therefore, at this historic moment in Chapter id> 2000, I created a "mobile-related" category directory to summarize, sort, and share mobile-related things, we encourage everyone.
2. My choice
Obviously, CSS 3 + HTML5 and JavaScript cannot be used in mobile web development. At present, many development frameworks have emerged, including the glue layer and the display layer (not listed ). It is determined by personal preferences and filtering.PhoneGap
Enables interaction with the camera and address book of the device,jQuery Mobile
Display the page UI and Related interactions.
If time is enough, I think I will re-develop a more lightweight and flexible interaction framework for the project itself. Considering the actual situation, we decided to use another person's UI framework.
Next is the first runner-up in the morning ().PhoneGap
Android mobile app:
HoweverPhoneGap
It takes time to deal with the glue layer. We can first focus on the UI framework related to page display. For example, jQuery Mobile.
Iii. jQuery Mobile in my eyes
So far, the official version of jQuery Mobile has not yet been released, but this does not prevent its use. The lightweight code is simple on the official homepage ). PossibleSencha Touch
Relatively simple. However, in my opinion (the reason for the framework itself), the code is actually quite cool (for example, there are as many as 49K CSS files after min ). For actual projects, the skin style cannot coexist.a~e
The selection of the five templates is actually redundant, and many of them are soy sauce.
In addition, it is impossible for designers in actual projects to always followjQuery Mobile
. Therefore, we will inevitably encounter the situation of modifying its template or adding a new one.
However, I am sure that jQuery Mobile will be awesome if I use jQuery Mobile on my website or other non-external small and medium projects!
Then, I have to admit it.jQuery Mobile
ComparableSencha Touch
It's much faster. Its UI display is basically based on HTML5data-
Like jQuery, the old father of the User-Defined attributeWrite less, do more.
The UI display of page elements can be completely based on the HTML code content and attributes, without any additional JavaScript code or CSS code. A mobile phone page with a similar effect can be displayed. In addition, you only need to calm down and spend a whole day reading the official introduction document. It's so simple.
For example, the following purely displayed page (Chrome browser is recommended for PC ).
You can click here: jQuery Mobile's UI display page
Mobile phone can access the following address: http://www.zhangxinxu.com/jq/mobile/
This is the display effect in the desktop version of opera 10.1 mobile:
Default entry:
Select "Search for articles" → click the search box:
For Android or iPhone, the gradient effect and smooth switching effect will be displayed.
The above adds up to more than 10 HTML pages, which came out after several hours. Of course, they are in invincible mode. Why? Because there is basically no new CSS or JavaScript code. Write HTML directly. It is faster if you are familiar with jQuery Mobile.
Semantic
To usejQuery Mobile
And pay attention to semantics. Instead of using tags such as HTML5 (considering progressive enhancement,jQuery Mobile
The tags in the XHTML age are used.div
,p
,ul
,li
,h1~6
.
InjQuery Mobile
Under the tag, many of the UI Effects of Different tags have been fixed. For example:
<Div data-role = "header">
The above sectiondata-role
Isheader
In the div,h1
The tag is not just a title, but will directly modify the title value of the current page. Therefore, the title of the page corresponding to the above lines of code is "Xin space-xin Sheng ", even if the title in your head is "Today is Singles Day, hula la ~~".
Anda
Label text is not specifieddata-role="button"
But who told him to be born?data-role="header"
As a result, it is the life of a display button. And,JMobile
It is automatically positioned to the right.
The Semantic tag determines its location and display. It is really convenient, but it is limited. There are advantages and disadvantages.
Listli
The first image in the tag will automatically become a list thumbnail and so on. There are a lot of them. If you try it, you will find it interesting.
Well, you don't have to worry about it. Freezing is not a cold day, and everything is accumulating slowly. At the beginning, it may not be good to say too much. Therefore, this article is so nagging.
Android uses jquerymobile webview to develop js applications. css is stored locally for reading.
You have full freedom to place the File Location of html js css, which can be placed in the built-in storage of your mobile phone or the SD card, if encrypted storage is required or not for cross-platform applications, we recommend that you use android native for development to improve efficiency and interaction. You can integrate the upgrade module in the application to solve the system upgrade requirement.
After two years of web Front-end development, I am engaged in developing web apps for HTML5 and jQuery Mobile apps. It will soon end in my junior year and start school next semester.
I tell you: it may take some money to find a company that is both engaged in app R & D and app training, but you need to be diligent and concentrate on copying the master's experience for a few months, you are experienced.