This article has been published on my official account. For more original technical articles, please pay attention to my official account “Byte Reverse Journey”.

Uniapp, the product of Dcloud, is a cross-end development framework based on vue.js technology stack. Developers write a set of code, which can be published to iOS, Android, Web (responsive), various small programs (wechat/Alipay/Baidu/Toutiao /QQ/ Dingding/Taobao), kuaiapps and other platforms. This is a functional architecture diagram, so you can take a look at it and see what the architecture is.

To sum up, uniApp integrates native technology at the bottom, namely h5+ engine, which can call native API of mobile phone. Therefore, UNIApp can develop app with close to native performance, which is js engine part. It has two engines, and rendering is a separate engine. This rendering engine is divided into NVUE rendering and WebView rendering, NVUE is actually integrated WEEX, WebView this understanding should know that its core is WebKit, you can see this article to understand.

The ecological environment

Uniapp’s official QQ group now has 35, all of which are large groups of 2,000 people. There are also various open source component libraries based on UNIApp, such as uViewUI, Colorui, ThorUI and uCharts. The most complete and most famous one is uViewUI. The official documentation is also relatively complete, uViewUI. Their official QQ group now has 4, you can add groups to find developers to answer questions. Uniapp officially says it has 6 million developers. Overall, the ecosystem is pretty good.

Correct posture

1. Read official documentation

The official documentation covers everything from getting started to learning methods to usage instructions and precautions. If you can’t read the documentation, check out the community posts, or find some ready-made ones from the plugin market.

2. Live plug-in market

There are various components, SDKS, project templates, and even plug-ins for uniCloud and HbuilderX. If the official base components, or the official Uni-UI extension library, don’t meet your needs, check out the plug-in market. Official is attaches great importance to the plug-in in the market, such as uni – UI. There is an official document is introduced to illustrate uniapp dcloud. IO/component/R…

Look at this plugin market ranking, you can also get a general idea of the current status of the plugin market, as a whole is relatively active:

In addition to the comprehensive component libraries mentioned above, there are many excellent plug-in authors who specialize in a specific domain. Here are a few:

  • Probably the best routing plugin in the UniApp ecosystem
  • Should be the most powerful rich text plug-in (already integrated with Uviewui)
  • Personally, I think the best table component at present
  • Nice date and time picker

3. Ask developers questions through community, QQ groups and plug-in messages

If you follow the documentation to the letter and still have problems, you may need to ask someone for help. If it is an official problem of UNIAPP, you can find relevant information in the community. There are quite a few cases here, and most of the problems can be found.

Plug-in problem is best directly in the plug-in market corresponding plug-in under the message, if your problem description is clear and clear, will be answered, sometimes, online can wait for the reply. Can also add the corresponding QQ group, there are still many warm-hearted people inside.

Actual combat tutorial

The previous introduction of the correct way to eat uniAPP official resources, the following introduction of uniAPP development, debugging, release, involving APP, H5 and small program (wechat small program).

I. Environment construction

1.Install hbuilderX

Hbuilderx is also an IDE product from DCloud. Uniapp development across multi-terminal products, to achieve a development, multi-terminal release must use Hbuilderx this artifact IDE. Here is the website to download address www.dcloud.io/hbuilderx.h…

2,Install the Nighthian simulator

Since it is app development, it is necessary to connect to the phone debugging, you can connect to the phone, you can also install a simulator, here recommend the Night god simulator, download address: www.yeshen.com/.

3,Configure the environment

Hbuilderx connect to the emulator, select the tool — Settings, open the configuration screen, and select Run Configuration as shown.

Adb path select the adb. Exe address of the simulator installation package, and the simulator port. The default value is 62001. If you are not sure of the port, you can find the file in the same directory as adb.exe. Double-click and you can see the result, as shown in the following image:

This is the listening port of the Nighthian simulator.

4,SVN source code Management

Select tool – Plug-in Installation, you can open a plug-in management panel, as shown. Install plug-ins, which are divided into core plug-ins and other plug-ins. Core plug-ins can be upgraded with the IDE, and other plug-ins will go to the plug-in market to find their own needs. Plug-ins such as SVN are not available by default. You can install the SVN plug-in here by installing a new plug-in.

The installation process is relatively simple, just click on it. Once installed, you can uninstall it.

5,Plug-in market plug-in installation

Plug-in installation in the plug-in market is usually this way:

Click this button to install it locally. There are several types. The ones I know are component classes and compiler classes. Components, for example, will be installed directly into the currently opened UniApp project, in the specified folder Components. Like the compiler class, which is actually similar to webPack loader, this is in the HBX installation package.

Ii. Uniapp hand-in-hand combat

1.Create a new UniApp empty template project

Cli mode

Creating a project with HBX is covered in detail in the official tutorial, so I will only describe the process of creating a project with VUE-CLI. The creation steps are also available on the official website. Compared with HBX visual construction, it is much slower to build with CLI.

NPM install -g@vue /cli // Create a project template vue create -p dcloudio/uni-preset-vue my-projectCopy the code

If the following error message is displayed during the script execution: vue: the file cannot be loaded C:…. Vue. Ps1. The solution is to open explorer for the current project address, click file, and a dialog box will pop up, as shown in the picture

There will be a pop-up box in which to execute this code:

set-ExecutionPolicy RemoteSigned 
Copy the code

After execution, enter Y or A as prompted, then press the above to create the project, it will be normal:

Finally, it will prompt you to select the project template:

It is generally recommended to select the template of Hello Uni-app. If all goes well (ideally), the completed project will look something like this

If we look at its package.json file, we can see that there are a lot of packaging and running commands. Uniapp does a lot for us!

CD my-project go to the project and run NPM run dev:h5 to test the effect.

To see the success, open the launch page and press F12 to switch the page to mobile mode to see the effect.

In this CLI mode, you cannot connect to the emulator for debugging. To debug the app version in real time, you can only use the IDE HBX. In addition to debugging the H5 version, the CLI mode can also debug small programs. Taking wechat small programs as an example, you need to prepare development tools first.

Hbuilderx mode

Given that app is our main product output, it’s probably best to switch to the Hbuilderx compiler, but it actually feels good to use once you get used to it. Cli mode is suitable for developing H5 or applets. The specific steps can be seen on the official website, relatively simple, visual operation, step by step there is no problem. To create a standard Hbuilderx project, open the folder in the HBX compiler and select the SRC folder of the CLI project.

Select Run — run to the emulator

2. Directory structure

Let’s take a look at the structure of the project. This is an official introduction. I have a copy of it

Chrysene ─ Cloudfunctions cloud directory (Aliyun, Tencent cloud for TCB, See uniCloud) │ ─ components conform to the vue component specifications of uni - app directory components │ └ ─ comp - Dr. Ue reusable components a ├ ─ hybrid is to store the local web directory, see ├ ─ platforms for each platform dedicated page directory, │ ├─index │ ├─ list │ ├─ vue list │ ├─ vue list │ ├─ vue list │ ├─ vue list │ ├─ vue list │ ├─staticA directory for storing static resources (such as images and videos) referenced by the application. Note: Static resources can only be stored in this ├─ WxComponents directory for storing small program components, see ├─main.js Vue initialization entry file ├─ app.vue ├─manifest.json, ├─ pages.json, page-routing, navigation, tabs, etcCopy the code

Pages, static, main.js, app. vue, manifest.json, pages.

3, must learn content

There is no need for me to tell the official document from the beginning again, here can tell you the key content, you learn to focus on, focus on digestion can be.

The first is the framework introduction here, you should read the framework introduction and familiar with the content.

The second is to get started with the development, then the framework to know how to use, how to configure pages. Json file is very important! In fact, I can’t remember the specific, but through configuration debugging you can know what is going on, this familiar on the line.

4. Uniapp Routing page configuration (pages.json)

Open the pages. Json file, which is a UNIApp project configuration file in JSON format. If you have a lot of content, right click to display the structure of the document. You can see that the basic structure of the file looks like this:

Pages is all the page configuration used in the project. The first item is the startup page for logging in to the APP. Generally, the login page or home page is placed. SubPackages are configured to load packages for small programs. The size of subPackages (currently 16M) is required for small programs to publish uploaded code. SubPackages must not exceed 2M each. GlobalStyle is used to set global styles. There is usually a uniform style that can be set here, including navigation, title, window background color, etc. TabBar is also very important. This is a standard feature of the app, which is like a level 1 navigation bar. Take our Hello UniApp project for example, the box part is the content of tabBar.

A tabBar group contains a maximum of five items and a minimum of two items, which are configured in the list

Let’s look at the list items

5. Life cycle

The application life cycle, page life cycle, and component life cycle are subdivided by granularity from coarse to coarse. See the documentation for details. The component life cycle is the same as the VUE component life cycle. Specific usage should be used in combination with business scenarios.

6. State management

There are a couple of ways to do state management,

  • vuex

    The vuex usage is the same as the VUE project. Import store from ‘./store/store.js’ only in main.js. !

  • uni.storage

This state data is persistent, and unless you call its cleanup interface, it will be cached locally.

  • globalData

App.vue defines global variables as follows:

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

// Call/modify global variables on other pages
getApp().globalData.text = 'test'
Copy the code

7. Global events

Uniapp API documentation is very detailed, even encapsulated global events, we can directly use

8. Interface request encapsulation

This section is in the network bar of the API module. The general interface request is uni.Request (object). This is enough for normal interface calls, but if you need request interception, you need to go to the plug-in market to find the appropriate plug-in. Luch-request is recommended here. The documentation is clear and full of features.

9. Route redirection

Route jump corresponding API may look at the official documentation, basically are commonly used. One prerequisite is that the current page must be configured in pages. Json in order to invoke these jump apis. Also note that tabbar pages can only be jumped using uni.switchTab. We know that Vue has vueRouter to support route jump and route guard, but uniapp does not support this plug-in. If you want to implement it on Uniapp, we recommend uni-simple-router

10. Global styles

There are many places to pay attention to in style, and I have summarized these places to pay special attention to:

  • Size of the unit

Currently, uniApp uses PX and RPX, px is commonly understood as pixel unit. RPX is a responsive unit that calculates the pixel value in proportion to a given value based on the screen width.

The pages. Json page mentioned earlierglobalStyleConfigure nodes that can be configured to control the calculation parameters of RPX

  • CSS variables and fixed values

These parameters are mainly in cross-side style control to pay attention to, often encounter app layout is almost the same, and then to the H5 end, the style is wrong, or to the small program is abnormal. If you look at the table above, the main thing to notice is that these three variables have different values in different environments, so pay special attention to them. The following table is a complement to the above. If there is no native top navigation bar or tabBar on the H5 side, it is a custom div, and we will refer to the fixed values of these variables when setting styles.

  • The fonts icon
    • Common supported formats include Base64, network path as online font (must start with HTTPS)
    • Applets do not support referencing local files, including images or fonts, in CSS
    • Uniapp will automatically convert font files smaller than 40KB to base64. Uniapp will not compile content in static folder

Others, such as style imports and inline styles, are similar to web application development. Another thing to note is that if you want to set global styles, you can set them in app.vue or import them with @import.

Components and component libraries

The component part is very important. For UniApp, the framework design and underlying principles are all soul and skeleton. All the rules and configurations mentioned above are habits and norms; The aforementioned state management, routing, events, styles, interface requests, etc., are as indispensable as blood vessels and lymph nodes; Component is viscera, muscle, specific action depends on its position.

The official documentation section lists components as a single column, so you can get an overview of what they are. The basic development skills are basically satisfied with the components provided by the government. The open source component library is also a secondary encapsulation based on the official components. The general principle is to refer to the official components first. If the official components do not support or are not convenient to use, then look for the open source plug-ins in the open source market.

12,Login to the home page

Next, let’s develop a login jump feature. Earlier we created a project with Vuecli, that’s Hellouni’s, it’s a bit too much, now let’s recreate an empty project template just to make it clear. The procedure is the same as before, is to select a template to select the default template on the line.

Developing login features

When trying to develop a login feature on an empty template project, you generally need to follow these steps:

  • Create a login page and set routing parameters on the Pages page

"pages": [ / / pages start page, said the first item in the array application reference: https://uniapp.dcloud.io/collocation/pages
		{
            "path" : "pages/login/login"."style" :                                                                                    
            {
                "navigationBarTitleText": ""."enablePullDownRefresh": false
            }
            
        },{
			"path": "pages/index/index"."style": {
				"navigationBarTitleText": "uni-app"}}]Copy the code
  • Prepare a usable login interface for encapsulation
uni.request({
					// #ifdef H5
					url: '/data-receive/v1/login'.// #endif
					// #ifndef H5
					url: 'http://##.##.##.##:##/data-receive/v1/login'.// #endif
					method: 'POST'.data: {
						username: this.name,
						password: this.password
					},
					dataType: 'json'.success(res) {
						if (res.statusCode == 200 && res.data.code == 200) {
							// Jump to the home page
							uni.navigateTo({
								url: '.. /index/index'}}}})Copy the code
  • Create a login page and complete the layout, style, and login logic
<template>
	<view class="content">
		<view class="logo">
			<image src=".. /.. /static/logo.png" mode=""></image>
		</view>
		<view class="list">
			<view class="title">The user name</view>
			<view class="input">
				<input type="text" placeholder="Please enter user name" v-model="name" />
			</view>
		</view>
		<view class="list">
			<view class="title">password</view>
			<view class="input">
				<input type="text" placeholder="Please enter your password" v-model="password" />
			</view>
		</view>
		<button type="default" @tap="dologin">The login</button>
	</view>
</template>
Copy the code
  • The login interface request is divided into two cases: H5 environment and non-H5 environment
// #ifdef H5
url: '/data-receive/v1/login'.// #endif
// #ifndef H5
url: 'http://##.##.##.##:##/data-receive/v1/login'.// #endif
Copy the code
  • The H5 environment addresses cross-domain issues with proxies
"h5" : {
        "router" : {
            "base" : ". /"
        },
        "devServer" : {
            "proxy" : {
                "/data-receive" : {
                    "target" : "http://##.##.##.##:##/data-receive"."pathRewrite" : {
                        "^/data-receive" : ""
                    }
                }
            }
        }
    }
Copy the code
  • Page jump
uni.navigateTo({
				url: '.. /index/index'
			})
Copy the code

For more hops, see Route and Page Hops

13. Development and debugging

App development and debugging

H5 development and debugging

H5 is actually a web page, this debugging is relatively simple, as the development of web projects.

  • Running in a browser (built-in or other browser) on HBX
  • F12 And enable the mobile phone debugging mode

Small program development and debugging

The first thing to understand is how the uniApp applets are developed: development is still done on HBX, but it runs on the applets development tool, and then development on HBX updates to the applets in real time. That is to say, the applets development tool is just a simulator, see the effect, the above code is compiled from the UNIAPP version, not too friendly to development, do not recommend to modify the applets development tool. The following are the development steps of wechat applets:

  • Register a mini program on the wechat public platform and fill in the relevant information
  • After the development setup completes the applet developer binding, there will be a applet appID after the generation of the applet. This will be saved
  • Download and install applets development tools

If the project is run into the applets for the first time, you need to bind the appID previously registered in the applets development tool, the applets code address (in this case, newProject \ SRC \unpackage\dist\dev\mp-weixin). After binding, you can see the development status of the applets. Something like this:

As mentioned before, the development of small program is still on HBX, and the small program tool depends on the effect, but debugging and finding bugs are still on the small program development tool. The mode module is in the lower right corner, similar to the debugging window of Google Browser. If the window is too small, click the floating window button to pop up the debugging window.

A debugging window is displayed

14. Pack it up

App package and release

App packaging process is relatively simple, divided into Android and Apple two major platforms. General APP online should go through the cloud packaging process, choose release -> native APP cloud packaging, the dialog box pops up.

This is the Android package, if you don’t need the application platform on the market, you can choose the public test certificate package.

This is the apple version of the package, apple packaged to go online, the only way to go online appstore, certificate related to the three files should not be less.

After clicking “pack”, you will enter the cloud pack queue and wait. After success, the download address will be given:

The Android version can be installed directly and you can put it on the production server for users to download. If it is the apple version, the packaged ipa file cannot be used directly, and it has to be submitted to the appstore for approval before it can be released, which takes about a week.

Hot update app

After the app goes live, later versions of the app can be updated in a hot update mode instead of releasing a new full pack each time. Select Publish –> Native App — create App WGT package, and the update package dialog box will pop up:

After WGT is generated, the WGT file is put on the server. When the user detects an update on the APP, the update package will be downloaded and updated locally.

  • When WGT is released, the application version name and the application version number on the manifest.json configuration page must be higher than the value set last time.

  • Check to see if the version is up to date. If so, download the update package, install and restart the app. Here’s a full tutorial

The H5 comes packaged

The packaging of H5 version should be the simplest, and the publishing can also be based on web deployment mode. If you want to open the web page with wechat, it is best to deploy H5 on the server where the domain name of the exchequer resides.

Applets are distributed as packages

  • The subcontract

Applet packaging has a limit on the size of the package, which has been upgraded from 16M to 20M. Please refer to the official documentation for the specific subcontracting method. We subcontract on UNIAPP, and pay attention to uniAPP’s subcontracting requirements. I have written an article about the adaptation of UniApp to wechat mini program, and there are explanations for subcontracting upload for your reference.

  • Upload code
  • Submit audit

Integrated release of wechat public account

To be continued…