Hello everyone, I am the dark horse Tengyun.
This is an original series of articles that will give you a quick introduction to UNI-APP development based on real enterprise projects. Welcome to click your profile picture to avoid getting lost! At the same time if feel good article, welcome to forward to help more people.
This article has been suspended for some time. I have been busy with entrepreneurship for most of the past six months. During this period, I led the team to develop two commercial applications of mall type using UNI-App + Java from 0 to 1, and the product forms cover H5, wechat small program, IOS and Android. At present, the product has been successfully released to the major electronic market.
This series of articles first analyzes the product technology selection from the perspective of the company, and then summarizes the actual development experience of our project for your reference.
Why do we choose UNI-app?
A project from project development to market, development is only a small part, especially for start-ups, it is particularly important to spend every penny on the edge, so the process of product development should be fast enough, the cost should be low enough.
Due to some special reasons, at the beginning of the project, the team required the product to include: wechat mini program, H5, Android, Ios, and cover as many other platforms as possible.
Just from the technical point of view, there are many ways to achieve it.
1. Adopt the model of native development
Wechat small program: wechat official provides the original development mode.
Android: Use Java or Kotlin for native development.
Ios: Use Object-C or Swift for native development.
Adopt native development mode, small program, Android, Ios each post needs at least one person, high cost.
2, the use of large front-end technology, one development, packaging multiple platforms
There are also different solutions for big front-end cross-platform technologies: UNI-App, Flutter, React Native, Taro, etc., all of which can be developed once and are cross-compatible.
With the development of cross-end technology over the years, the performance can be basically met for common applications except for special occasions with very high performance requirements. Even if there are really special needs, the mode of mixed development can be solved.
Uni-app is a good choice for startup teams in terms of technology ecology, developer community activity, and learning costs. Uni-app has a good multi-terminal compatibility mechanism and has a large number of successful projects. Uni-app is also based on vue.js, so it is easy for the front-end staff to implement H5, applets, apps and admin background development (even in many small businesses, one person can do all the work), saving labor costs.
Second, series of articles planning
The successful launch of r&d products (App Store, Android electronic market, small program release) directly verified the feasibility of the scheme. Of course, in the development process also encountered some pits, specially combed and summarized for reference and discussion.
In order to help those who are not familiar with UNI-App development quickly get started, this series of articles will start from the most commonly used basic knowledge points, and will be compiled into a series of articles from getting started to actual practice. The first half of the article mainly explains the basic knowledge, the second half will be in the form of actual combat demo.
Front knowledge
Understand the concept of wechat applets development
Understand concepts related to app
Basic knowledge of HTML+CSS
Applicable people
Zero base front end personnel
In the school student
Back-end programmers who want to know about the front end
Interested in applets and APP development
Note: This series of articles is not intended for experienced uni-App developers because it is intended for beginners. Later will launch high-level combat series, please pay attention to.
Content of the planning
| Based on some |
|---|
| Uni-app H5, applets, IOS, Android (1) : Too strong, complete terminal development at one time |
| Uni-app Cross-terminal development H5, Applets, IOS, Android (2) : Use HBuilderX and other tools for cross-terminal development |
| Uni-app Cross-terminal development H5, applets, IOS, Android (iii) : Understand the uni-App framework |
| Uni-app cross-terminal development H5, applets, IOS, Android (4) : Understand the uni-App project structure |
| Uni-app Cross-terminal development H5, Applets, IOS, Android (5) : Understanding uni-App two-way data binding |
| Uni-app cross-terminal development H5, applets, IOS, Android (6) : Clarify uni-App event binding mechanism |
| Uni-app Cross-terminal development H5, applets, IOS, Android (7) : Uni-App rendering |
| Uni-app cross-terminal development H5, applets, IOS, Android (8) : Understand uni-App lifecycle functions and functions |
| Uni-app H5, Applets, IOS, Android (9) : Why uni-App can adapt to different screen sizes |
| Uni-app Cross-terminal Development H5, applets, IOS, Android (10) : How to achieve cross-terminal compatibility, full platform coverage |
| Uni-app cross-terminal development H5, applets, IOS, Android (11) : What are the mainstream front-end layouts |
| Uni-app H5, Apts, IOS, Android (12) : Mastering container properties in Flex layout |
| Uni-app H5, Applets, IOS, Android (13) : Mastering element attributes in Flex layout |
| The demo parts… |
Uni-app Introduction
Uni, you ni, unity.
Uni-app is a framework for developing all front-end applications using vue.js. Developers write a set of code that can be published to iOS, Android, Web (responsive), mini programs (wechat/Alipay/Baidu/Toutiao /QQ/ Dingding/Taobao), Kuaiapp and many other platforms.
Uni-app has a stronger advantage in 8 key metrics: number of developers, cases, cross-end flatness, scalability flexibility, performance experience, surrounding ecology, learning cost, and development cost.
Uni-app’s main feature is that it is cross-platform. The underlying layer hides the differences between different platforms, allowing developers to develop applications for different platforms using the same syntax. The cross-platform essence of Uni-App is to convert code to code for each platform at compile time.
The official uni-App functional framework is shown below:
After several years of development, the platform has gathered millions of developers, has a complete plugin market and surrounding ecosystem, and also provides advertising monetization, which is a good option for both startups and individual developers.
Iv. Introduction of development tools
There are many front-end development tools, mainly divided into text editors and IDE integration environments. There are many choices: Atom, Sublime, Dreamweaver, Visual Studio Code, WebStorm, HbuilderX, etc.
There is no best, the fit is good. Visual Studio Code and HbuilerX are widely used in the industry. Our team uses the official HbuilderX for cross-side development.
You can choose one development tool according to your personal preference, or you can use multiple development tools together.
5. Real project demonstration
Real commercial projects, has released small programs, online major electronic markets, you can search according to the name of the experience.
Case 1: “Good Kitchen Alliance”
App Store, major electronic markets, public accounts, small programs all can search experience.
Case 2: “Big Headed Cloud Hot Pot”
Public number, small program can search experience.
In the next article, take a look at tips for using the HBuilderX development tool.
More exciting content, welcome to continue to pay attention. If you have any questions, please add the author to communicate.
Author introduction: Black horse teng Cloud, code farming, entrepreneurs, lifelong learners! Willing to share technology, entrepreneurship, life thinking. Pay attention to me, cheer for life together!