h5+ Hybrid mobile app app development--opening

Objective

After 2 months of hard work, the first version of the app is almost finished, and there are too many pits, and as a person who likes to share, I certainly don't mean to share the crawl history. Don't ask me how much the pit, I will tell you very pit, very pit ...

I used to work on. NET Web development until a few months ago, when the company needed to develop a h5+, so the all-round player like me was naturally assigned to web App development, and encountered too many problems in the development process and solved too many problems along the way.

Technology selection

HTML5, html5+, Vue.js, Mui, JS

Why not jquery? Because, there is no need, we know jquery it is a re-encapsulation of JS, and in order to be compatible with various versions of the browser, write a lot of code, and for our app, basically is the WebKit kernel, do not have to consider the compatibility between browsers, so please forget jquery.

Why are there vue.js? Vue.js is an MVVM framework, and one of the three most popular MVVM front-end frameworks (the other two: react and angular), before I do the technology selection, I have to do a simple study of these three frameworks, and then feel that the vue.js syntax is more elegant, like I like C # Language.

Why use MUI? Because I feel MUI is easy to get started, because the project duration is tight and people are few (app plus me 2 people). Ionic has been studied before using MUI.

Knowledge Reserve

Before you develop H5 hybrid applications, you have to have a bit of front-end foundation.

CSS3, HTML, JS, Vue.js, h5+, MUI

HTML, JS, CSS believe that as long as the web development, I believe it will not be unfamiliar, but there are many developers this piece is relatively weak, may be because of the long-term development of the backend for the sake of. If the foundation is too poor, it is recommended to cram charge, learning a primer or very simple, a few days code on it.

It feels like learning a day, three days is enough.

As for Vue.js, go to the official website of a document, official website: https://cn.vuejs.org/v2/guide/, and then you can use up, a day is enough.

MUI, official website: http://dev.dcloud.net.cn/mui/ui/, recommended to skip over once, I believe that you are still a bit foggy, it's OK, first understand on the line, the same day time.

h5+ words, online search for information about what it is to do, there are some of its common interface, half-day. html5+ API documentation: http://www.html5plus.org/doc/zh_cn/android.html

Now that the basics are ready, it's time to get started.

Development tools

With the MUI framework in use, it is natural to use the development tools available on its website Hbuilder. Official website: http://www.dcloud.io/

Download it and install it directly, there is nothing to say, it should be noted that the Hbuilder specifically for the MUI framework to provide too many shortcut keys, please memorize, to improve coding efficiency is very helpful. The first time you open the Hbuilder will have a use of the help document, against that above to knock over, half a day should be skilled.

You can also look directly at the code block manual provided by the MUI website: http://dev.dcloud.net.cn/mui/snippet/

You'll be pleasantly surprised at how many times you knock. But even if hbuilder is such a fork shortcut and hint, but it still has a mishap, that is the code formatting function, the use of VS people, the other Ides will always have a variety of spit points, so I usually use Hbuilder write code, with vs Error and format code.

Begin

Demo Project for new website

Open Hbuilder, new "mobile app"

The code directory structure is as follows:

This is the website provided by the demo source, you can look at these examples. But since it is called an example, it means that many of these things cannot be used directly on a formal project, otherwise they are dead, and what I call pits is precisely because production and examples are not the same. Especially when used together with Vue.js, the pits are more.

MUI has pits, h5+ have pits, Vue has pits, and when they come together, they are all kinds of pits ....

Hbuilder is currently in frequent updates, frequent patching, once updated, we open hbuilder, it will automatically prompt, but the update is risky, upgrade needs to be cautious, before upgrading to see the updated log, see what it fixed? What's new, and then wait a week, then update, so more insurance.

And it's important to note that if we've already created a new app and updated Hbuilder, These files, such as Mui.js and MUI.CSS in our project, are not automatically updated, and we need to create a new demo with the latest version of Hbuilder and then copy the files to the project from which demo. Otherwise, you only upgrade Hbuilder, not to upgrade the relevant JS and CSS files, there will be problems.

Are you ready? Let's get up and spit those holes in my groove!

Related learning materials, you can refer to my previous post: MUI Development Daquan

h5+ Hybrid mobile app app development--opening