Getting started with cloud development

Learn technology don't just watch videos, teaching materials, be sure to practice. O nly in action will technology become simple. Small programs allow us to make technical products faster than other programming languages.

Preparations before the start

The development of small programs is essential for two things, one is the technical documentation for the development of small programs, and the other is the developer tool for small programs.

Developer Tools: Small program developer tool download address

You can download the corresponding stable version of the installation package according to your computer's operating system for installation. Just like we write Word, PPT documents to use Office software, we have to do more hands-on developer tools, technology can master more real.

Technical documentation: Small program technical documentation

Technical documentation we only need to spend about five minutes to understand the general structure, first follow our teaching steps after learning, and then it is not too late to see. The official small program technical documentation is too comprehensive and detailed, and for beginners or friends with zero foundation, we'll show you how to learn the technical knowledge in the document step by step.

Looking more at technical documentation and multi-use development tools are also the two most important points for us to learn other programming languages or techniques, and watching videos, reading articles, and collecting more information away from technical documentation and development tools is the wrong way to end, and this is a common disease for many beginners.

It is worth noting that the development function of small programs is updated very frequently, many online tutorial content is more outdated, and only technical documents are synchronized with the latest. Whether you are a beginner or a master, technical documentation is the foundation and landing point of our technology development, often read often new.

Sign up for WeChat gadgets

Small program registration is very convenient, open the small program registration page, in accordance with the requirements to fill in personal information, verify the mailbox and mobile phone number, scan QR code binding your microsignal can be, 3 minutes or so time can be done.

Registration page: Small program registration page

Registration of small programs can not use the registration of WeChat public number, WeChat open platform mailbox Oh, that is, you need to use a different mailbox.

When we register successfully, you can automatically log into the background management page of the small program, if you accidentally turn off the background page, you can also click on the small program background management login page to log in.

Background management page: The small program background manages the login page

The login pages for the small program and WeChat Public Number are the same page, and they will jump according to your different registration email address.

After entering the background management page of the applet, clicking on the development of the left menu Goes to the settings page, and then clicking on the development settings, you can see the AppID (small program ID) in the developer ID, which is useful to us at a later time.

Note that the ID (AppID) of the applet is not your registered mailbox and userna name, you need to go to the background to view it

Create a new template program

After installing the developer tool, we log in to the developer tool using WeChat Broom, and then use the developer tool to create a new project for a small program.

Project name: This can be filled in according to their own needs, can Chinese;
Directory: You need to create a new empty folder on your computer, and then select this empty folder;
AppID: That's the appID (small program ID) we found earlier (you can also click on the right-hand pull-down box and choose the appID down)
The development mode is a small program
Back-end services Choose not to use cloud services, note that for the sake of teaching needs, choose not to use cloud services first
The language is JavaScript

Click New Confirmation to see a simple Hello World template gadget in the developer tool's emulator and the source code for the small program in the editor.

Small tasks: Click on the simulator, editor, debugger on the Developer Tools toolbar, and the phone pull-down box below to see what the effect is. Find the menu bar for the developer tool, find the Items menu bar to see all the items, find the skin settings in the Settings menu bar, switch themes, debugger themes (dark, light).

Next, we click on the preview icon in the toolbar of the developer tool and we'll pop up a QR code, which you can see on WeChat using your phone WeChat to scan this QR code. Later we have to develop a small program of our own can follow the above operation to create a new template program, and then modify the development on this basis.

If you don't use WeChat login developer tools, and your WeChat is not the developer of the small program can not preview Oh. This Hello World template gadget is very simple, but its file structure is complete.

Launch cloud development services

Click on the "Cloud Development" icon of the WeChat Developer Tool, click "Open" in the pop-up box, and when you agree to the agreement, a dialog box will pop up creating the environment. You'll be asked to enter the environment name and environment ID, as well as the underlying environment quota for the current cloud development (the base quota is free and enough for you to use).

It is recommended that your environment name can be automatically generated using xly, environment ID, when your cloud development environment problems, you can provide your environment ID, the cloud development team will have someone to answer for you.

After filling in the requirements of the dialog box prompt, click Create, will initialize the environment, the environment will automatically pop up the cloud development console after the initialization, so that our cloud development services are turned on. You can spend about two minutes familiar with the interface of the cloud development console.

The file structure consists of the page

In understanding the following knowledge, we only need to combine the developer tools of the editor against the introduction, one by one expand the folder, with the editor to view the source code of the file, a general look at it. This is the method of practical learning (and reading books, watching video learning methods are different), do not rote oh, you use more natural later to remember

The file structure of the small program

In the editor of the developer tool, you can see that the root of the small program source file has apps .js, app.json, and app.wxss, which are the three main files essential to the small program, so let's take a general look at the small program file structure (just a general understanding of it, no understanding and no relationship).

app.json: the public settings of small programs, you can make global configuration of small programs, determine the path of the page file, window performance, set multi-tab and so on;
app.wxss: a common style sheet for small programs, which can be configured with the font, color, background, picture size, etc. of the text of the entire small program;
App .js: The logic of the small program (this can be put first, don't care)
pages folder: here is a small program of all the pages, expand the pages folder you can see there are index and logs two page folders;

Small tasks: After gaining a hands-on understanding of the above in conjunction with developer tools, do you understand which folder is the root of the small program?

The page composition of the small program

There are four files in each page folder, all of which have the same name:

json file, and the above app.json function is basically the same, but app.json control is the setting of the entire small program, and the page jason file only controls the configuration of a single page (because sometimes the global configuration is sufficient, so the page configuration is sometimes empty);
wxml files, page structure of small programs, text, pictures, music, videos, maps, carnations and other components will be put here;
wxs files, page styles of small programs, and app.wxss are control styles, while wxs files of pages are control styles of individual pages;
js file, this is the logic to control the small program page (this can be put first, don't care)

The global configuration of the small program

As we mentioned earlier, app.json can configure the entire gadget globally, and the basis for the configuration requires us to refer to the technical documentation.

Technical documentation: Small program global configuration

Open the above small program global configuration technical documentation, there will be a lot of names you do not understand, this is very normal, we do not need to remember, just take two or three minutes to quickly browse it, after which we will teach you how to combine technical documents to learn.

json syntax

Before configuring the applet, you can use the developer tool to open the app.json file and understand it against the following jason syntax:

Braces . . . save objects, let's take a look at app.json, where braces are used.
The parenthesis is saved by the array, and we can see that there are "pages/index/index" and so on in the parenthesis (this is the path to the small program page), and the page paths are the array; the values in the array are level relationships;
Each data is separated by the English character comma, separated, note that the data here includes objects, data, single properties and values, we can combine app.json carefully compared commas, the location of the appearance, the last data of the flat data do not add commas, that is, only between the data have commas.
The field name (property name) is separated from the value by a colon: the field name is in front, and the value of the field is after;
The field name is wrapped in double quotes;

Note that all punctuation here needs to be in the English state, that is, we often hear about the half-corner state in the full corner, otherwise it will be reported wrong Oh. on! When we want to enter punctuation in programming, we must first confirm that your input method is Chinese form, or letter form, if the loss is Chinese character pattern, we must switch Oh

Set the small program window performance

Using the developer tool to open the app.json file, you can see that there is a window field name in the following code (as mentioned earlier, the field name is wrapped in double quotes), its value is an object (as mentioned earlier, the object is in braces), and the object can be a collection of data, which contains several data.

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },

These are window configuration items that you can use to set the status bar, navigation bar, title, window background color of a small program.

Small tasks: Open the global configuration of the applet View the configuration description of backgroundTextStyle, navigationBarBackgroundColor, navigationBarTitleText, navigationBarTextStyle (for an overview).

Use the developer tool's editor to change the value of the above properties to the following code (background TextStyle here is only noticeable when a pull-down refresh style is set and will be covered later)

"window": {
    "backgroundTextStyle": "dark",   
    "navigationBarBackgroundColor": "#1772cb",
    "navigationBarTitleText": "云开发技术训练营", 
    "navigationBarTextStyle": "white"  
  },

When you're done, remember to save the code Oh, file modifications that are not saved will have a small green dot on the tab. You can use shortcuts (press) Ctrl and S at the same time to save (Mac computers are Command and S).

Then click on the developer tool's compilation icon, you can see the effect after the update, you can also click on the preview, using the mobile WeChat scan generated by the QR code to see the actual effect.

Small tasks: navigationBarBackgroundColor value is #F8F8F8, #1772cb, this is the hete sixteenth color value, it is a very basic and wide range of computer concepts, you can search to understand: 1, how to use the computer version of WeChat, QQ screenshot tool color (color will be a little deviation);

Create a new small program page

There are two ways to create a new page, one is to use the developer tool to create a new one under the pages folder, and the other is to create a new one through the pages configuration of app.json, so let's look at the second method.

Create a new page with app.json

The pages configuration item is the path to the settings page, which is where every page we write in the small program needs to be filled in. Use the developer tool to open the app.json file and create a new home page in the pages configuration item (the page name can be any English name), code as follows:


"pages/home/home",
"pages/index/index",
"pages/logs/logs"

When you write, you can review the jason syntax, after each page remember to use commas, separate, if your file code is wrong, the developer tool will report the error.

You'll see our new home page in the simulator, which will look like this:

pages/home/home.wxml

Let's take a look at the folder structure of the small program, is there an added home folder under the pages folder? The folder also automatically creates four new page files.

Let's delete the index and logs folders in the file directory and change the pages configuration of app.json to:

"pages": [
  "pages/home/home",
  "pages/list/list",
  "pages/partner/partner",
  "pages/more/more"
],

That is, we deleted the index and logs page configuration items, but also added three pages (list, partner, more, these three page names can be named according to their own needs).

Small tasks: What are these new page files on the computer? For example, when you right-click on the home folder or home.wxml in the developer tool, select "Open on hard drive" and you can see where the file is in our computer folder