WeChat mini-app, super-loaded instance tutorial, mini-app instance tutorial

Examples of small programs, super-loaded instances, and small program instances

Preface

Before you start developing the application number, take a look at the official "mini-programs" tutorial! (The following content is from the official "applet" Development Guide)

This document will take you step by step to create a small program, and you can experience the actual effect of the small program on your phone. The homepage of this applet displays the welcome speech and the current user's profile picture. Click the profile picture to view the startup log of the current applet on the new page.

 

1. Obtain the AppID of the Applet

 

First, we need to have an account. If you can see this document, we should have already invited and created an account for you. Note that you cannot directly use the AppID of the service number or subscription number. With the provided account, you can log on to the https://mp.weixin.qq.com and view the AppID of the applet in settings-developer settings on the website.

<Ignore_js_op>

Note: if we do not use the Administrator number bound during registration, try the mini-app on your mobile phone. Then we need to bind the developer 」. That is, in the "user identity-developer" module, the user must experience the number of the applet. In this tutorial, the account is registered by default and the Administrator number is used for user experience.

 

2. Create a project

 

We need to use developer tools to create and edit small programs.

After the developer tool is installed, open it and use the scan code to log on. Select "Create Project", enter the obtained AppID, and set the name of a local project (non-applet name), such as "My first project 」, select a local folder as the code storage directory and click "Create Project.

<Ignore_js_op>

 

To help beginners understand the basic code structure of small programs, if the selected local folder is an empty folder during creation, the developer tool will prompt whether to create a quick start Project. Select "yes". The developer tool will help us generate a simple demo in the Development Directory.

 

After the project is successfully created, you can click the project to go to the complete developer tool interface. Click the left-side navigation bar to view and edit our code in "edit, in debug, you can test the code and simulate the effect of the applet on the client. In the project, you can send the code to your mobile phone to preview the actual effect.

 

3. write code

 

Click "edit" in the left-side navigation bar of the developer tool. We can see that this project has been initialized and contains some simple code files. The key and necessity are app. js, app. json, and app. wxss. The. js suffix is a script file, the. json suffix is a configuration file, and the. wxss suffix is a style sheet file. The applet will read these files and generate the applet instance.

Next we will briefly understand the functions of these three files to facilitate modification and develop our own mini programs from scratch.

App. js is the script code of a small program. In this file, we can listen to and process the lifecycle functions of the applet and declare global variables. Call the rich APIs provided by MINA, such as synchronous storage and synchronous reading of local data.

1. <Font size = "3" face = "">

    

    

    

   4. Mobile Preview

   <Ignore_js_op>

    

    

    

   On the left-side menu bar of the developer tool, select "project" and click "preview". After scanning the code, you can experience it on the client.

   Currently, the preview and upload functions cannot be implemented, so you need to wait for the next official update.

   As you can see, the Official Development Guide is still very simple, and many details, code, and functions are not clearly displayed. So it's time to show bokajun's strength! Development tutorial officially started!

   Chapter 1: Preparations

   It is important to make preparations. Develop an application number. You need to download the developer tool from the official website (weixin.qq.com) in advance.

   1. download the latest developer tool, and you will see the interface:

    

    

   2. Click "create web +", and the following screen is displayed:

    

    

   3. Pay attention to the items on the page --

   • AppID: Fill in according to the official explanation.
   • Appname: name of the project's outermost folder. If you name it "ABC", all subsequent project content will be saved in "/ABC /...」 Directory.
   • Local Development Directory: The local directory where the project is stored.
     
     

   Note: If you and the team members develop the project together, we recommend that you use the same directory name and local directory to ensure the uniformity of collaborative development. If you already have a project, the import process is similar to the above content.

   4. After all preparations are completed, click "Create Project". In the displayed dialog box, click "OK 」.

    

    

   5. As shown in, at this moment, the developer tool has automatically built an initial demo project for you, which contains the basic content and framework structure required by an application project. Click the project name ("cards" in the figure) to enter the project. The basic architecture of the entire project is displayed:

    

    

   Chapter 2: Project Architecture

   At present, the user base is very large. After the launch of the Public Account, everyone can see the popularity, and also promote the rapid development of h5. With the increasing complexity of the public account business, the application number is now just right. After reading the document for one or two times, our team found that the method it provided to developers is also being comprehensively changed, from DOM operations to operational data, based on a bridge tool provided to implement many features that h5 is difficult to implement in the public account, it is a bit similar to the development of hybrid. Different from the development of hybrid, the open interface is more rigorous, the structure must use the components provided to us. The external framework and plug-ins cannot be used here, so that developers are completely separated from the DOM operation. The development idea has changed a lot.

   To do well, you must first sharpen your tools. It is very important to understand its core functions. First, understand its entire operation process.

   Lifecycle:

   In index. js:

    

    

   On the Console of the developer tool, you can see:

    

    

   On the console of the homepage, you can see that the order is App Launch --> App Show --> onload --> onShow --> onReady.

   The first is the startup and display of the entire app. the startup of the app can be configured in app. js, and then the loading and display of various pages.

   It can be imagined that many things can be processed here, such as loading boxes and so on.

   Route:

   Routing is a core point in project development. In fact, there are few introductions to routing here. It can be seen that routing is well encapsulated and three jump methods are also provided.

   Wx. navigateTo (OBJECT): retains the current page and jumps to a page in the application. You can use wx. navigateBack to return to the original page.

   Wx. redirectTo (OBJECT): closes the current page and jumps to a page in the application.

   Wx. navigateBack (): Close the current page and roll back to the previous page.

   These three are basically enough and well encapsulated in routing. Developers do not need to configure routes at all. Many frameworks often have complicated routing configurations.

   Components:

   This is also very comprehensive in terms of component provision, basically meeting the needs of the project, so the development speed is very fast, you can carefully browse several times before development, the development efficiency will be very good.

   Others:

   Any external framework and plug-ins are basically unavailable, even the native js plug-ins are also difficult to use, because our previous js plug-ins basically all exist in the form of dom operations, the architecture of application number is not allowed to operate any dom, even the previously used dynamic setting rem. js is also not supported.

   WebSocket is also provided this time, so you can directly use it for chat, and the space for development is very large.

   Compared with the public account, we found that the development Application ID is componentized, structured, and diversified. The new world is always filled with surprises, and more eggs are waiting for you to discover.

   Next we will start to develop some simple code!

   1. Find the project folder and import it to your editor. Here, I use the Sublime Text editor. You can select your favorite editor based on your development habits.

    

    

   2. Next, you need to adjust the project structure according to your project content. In the example project, the "card_course" directory contains the "tabBar" Page and some configuration files of the application.

   3. The "tabBar" of the sample project contains five menu buttons:

    

    

   4. Find the app. json file to configure these five menus. Find "tabBar" in the code line "」:

    

    

   You can change the parameters according to the actual project requirements:

   • "Color" is the font Color at the bottom, "selectedColor" is the highlighted Color to switch to the page, "borderStyle" is the Color of a line on the switch menu, and "backgroundColor" is the background Color of the bottom menu bar. The text description is abstract. We recommend that you debug it one by one and view its effect to help you better understand it.
   • The code order under "list" must be placed in sequence and cannot be changed at will.
   • In the file name after "pagePath ,「. the wxml suffix is hidden, which is a user-friendly aspect of the development code. It helps you save time for writing code and does not need to declare the file suffix frequently.
   • "IconPath" is the icon path of the page not displayed. The two paths can be network icons directly.
   • "" SelectedIconPath "is the highlighted icon path of the current page. You can remove it. The" iconPath "icon is displayed by default.
   • "Text" is the page title. You can also remove it. After removing it, it is a pure display icon. If you delete only one of the pages, this location will be occupied.
     
     

   Note: The bottom menu supports a maximum of five columns (five icons). Therefore, you must consider the layout of the menu bar in advance when designing the UI and basic architecture of the application.

   5. Based on the above Code rules, I have completed the basic architecture of the sample project for your reference:

    

    

    

    

   6. After the "Json" file is configured, the basic structure of "card_course" is shown in. You can delete all unnecessary subsets temporarily. If the subset is missing, you need to create it manually. When deleting a subset, check whether the content in app. json has been deleted.

   Note: I personally recommend that you create a "wxml" file and create the corresponding "js" and "wxss" files together, because the configuration feature of the application number is that when a "wxml" file is parsed, the "js" and "wxss" files with the same file name will be found in the same directory at the same level, therefore, the "js" file must be stored in the "app. json.

   When writing "wxml", you can encode the code based on the interface provided by the application number. Most of the Code is the previous "div", and now we can use "view. When you need to use other sub-sets, you can select them based on the provided interfaces.

   Use the "class" name to set the style. The "id" name is basically useless here. It is mainly used to operate data, not dom 」.

    

    

   7. The preceding code is "wxml" on the home page of the sample project. We can see that the amount of code to implement a page is very small.

   8. The "Wxss" file is the imported style file. You can also write the style directly in it. In this example, the introduction method is used:

   <Ignore_js_op>

    

    

    

   9. Refresh the code once. You can see that the "view" label with no background changes to pink.

   Note: After modifying the content in "wxml" and "wxss", you can directly refresh F5 to see the effect. To modify "js", You need to click "restart" to see the effect.

   10. In addition, public styles can be directly referenced in app. wxss.

   <Ignore_js_op>

    

    

    

   11. The "Js" file must be pre-configured in the "page" of the "app. json" file. To clarify the project structure, create four other page files in the "index" homepage of the example project at the same level directory, as shown below:

    

   After the above steps, the five bottom menus in the case are all configured.