WeChat Mini Program Development Tutorial

Preface

Before you start developing an application account, let’s take a look at the official “Mini Program” tutorial! (The following content comes from the "Mini Program" development guide officially announced by WeChat)

This document will take you step by step to create a WeChat mini program, and you can Experience the actual effect of this mini program on your mobile phone. The home page of this mini program will display the welcome message and the current user's WeChat avatar. Click on the avatar to view the startup log of the current mini program in the newly opened page.

1. Get the AppID of the WeChat applet

First of all, we need to have an account. If you can see this document, we should have invited and created an account for you. . Note that the AppID of the service account or subscription account cannot be used directly. Use the provided account to log in to https://mp.weixin.qq.com, and you can view the AppID of the WeChat applet in the website's "Settings" - "Developer Settings".

Note: If we do not use the administrator WeChat ID bound during registration, try the mini program on your mobile phone. Then we still need to operate "Bind Developer". That is, in the "User Identity - Developer" module, bind the WeChat ID you need to experience the mini program. By default, this tutorial uses the administrator's WeChat ID to register an account and experience.

2. Create a project

We need to use developer tools to complete the creation and code editing of small programs.

After the developer tools are installed, open and use WeChat to scan the QR code to log in. Select Create "Project", fill in the AppID obtained above, set a local project name (not a mini program name), such as "My First Project", and select a local folder as the directory where the code is stored , just click "New Project".

In order to facilitate beginners to understand the basic code structure of the WeChat applet, during the creation process, if the selected local folder is an empty folder, the developer tool will prompt whether it is necessary to create a quick start project. Select "Yes", the developer tools will help us generate a simple demo in the development directory.

After the project is successfully created, we can click on the project to enter and see the complete developer tools interface. Click on the left navigation to view it in "Edit" And edit our code, in "Debugging" you can test the code and simulate the effect of the mini program on the WeChat client, and in "Project" you can send it to your mobile phone to preview the actual effect.

3. Write code

Click "Edit" in the left navigation of the developer tools. We can see that this project has been initialized and contains some Simple code file. The most critical and essential ones are app.js, app.json, and app.wxss. Among them, the .js suffix is ​​a script file, the .json suffix is ​​a configuration file, and the .wxss suffix is ​​a style sheet file. The WeChat applet will read these files and generate applet instances.

Let’s briefly understand the functions of these three files to facilitate modification and develop your own WeChat applet from scratch.

app.js is the script code of the mini program. We can monitor and process the life cycle functions of the applet and declare global variables in this file. Call the rich API provided by MINA, such as synchronous storage and synchronous reading of local data in this example.

app.json is the global configuration of the entire applet. In this file, we can configure which pages the mini program consists of, configure the background color of the mini program's window, configure the navigation bar style, and configure the default title. Note that no comments can be added to this file.

app.wxss is the common style sheet for the entire applet. We can directly use the style rules declared in app.wxss on the class attribute of the page component.

3. Create the page

In this tutorial, we have two pages, the index page and the logs page , that is, the welcome page and the display page of the mini program startup log, they are both in the pages directory. The [path + page name] of each page in the WeChat mini program needs to be written in pages of app.json, and the first page in pages is the homepage of the mini program.

Each mini program page is composed of four different suffix files with the same name in the same path, such as: index.js, index.wxml, index.wxss, index.json. Files with the .js suffix are script files, files with the .json suffix are configuration files, files with the .wxss suffix are style sheet files, and files with the .wxml suffix are page structure files.

index.wxml is the structure file of the page:

In this example, , , to build the page structure, bind data and interactive processing functions.

index.js is the script file of the page. In this file, we can monitor and process the life cycle functions of the page, obtain mini program instances, declare and process data, respond to page interaction events, etc.

index.wxss is the style sheet of the page:

The style sheet of the page is optional. When there is a page style sheet, the style rules in the page's style sheet will cascade over the style rules in app.wxss. If you do not specify the style sheet of the page, you can also directly use the style rules specified in app.wxss in the structure file of the page.

index.json is the configuration file of the page:

The configuration file of the page is not necessary. When there is a page configuration file, the configuration items in the page will overwrite the same configuration items in the window of app.json. If there is no specified page configuration file, the default configuration in app.json will be used directly on the page.

The page structure of logs

logs page uses control tags to organize code, in Use wx:for-items to bind logs data, and loop the logs data to expand the node

The running results are as follows:

4. Mobile preview

Select "Project" in the left menu bar of the developer tools, click "Preview", and scan the code to open the WeChat account Duanzhong experience.

Currently, the preview and upload functions are not yet available, and you need to wait for the next official update from WeChat.

As you can see, the official development guide given by WeChat is very simple. Many details, codes and functions are not clearly displayed, so next we go to Boka It's time for you to show your strength! The development tutorial officially begins!

Chapter 1: Preparation

It is important to be prepared. To develop a WeChat application account, you need to download developer tools from WeChat's official website (weixin.qq.com) in advance.

1. Download the latest WeChat developer tools. After opening, you will see this interface:

2. Click on the "New web+" project, and the following screen will appear:

3. Please pay attention to various contents on this page——

AppID: Fill in according to the official explanation.

Appname: The name of the outermost folder of the project. If you name it "ABC", all subsequent project contents will be saved in the "/ABC/..." directory.

Local development directory: The directory where the project is stored locally.

Note: Again, if you develop this project together with a team member, it is recommended that you use the same directory name and local directory to ensure the unity of collaborative development. If you have a project before, the import process is similar to the above and will not be described again.

#4. After all preparations are completed, click the "New Project" button and click "OK" in the pop-up box.

5. As shown in the picture above, at this moment, the WeChat developer tools have automatically built an initial demo project for you, which contains the basic content and framework structure required for a WeChat application project. Click on the project name ("cards" in the picture) to enter the project, and you can see the basic structure of the entire project:

Chapter 2: Project Architecture

WeChat currently has a very large user base. After WeChat launched the official account, everyone can see the popularity. It also promotes the rapid development of h5. As the demand for the official account business increases, The more complex it is, the arrival of the application number is just right. After reading the document once or twice, our team found that the way it provides developers is also undergoing comprehensive changes, from operating DOM to operating data. It is difficult to implement many h5 based on a bridge tool provided by WeChat on public accounts. The implemented functions are somewhat similar to hybrid development. The difference from hybrid development is that WeChat’s open interface is more rigorous, and the structure must adopt the components it provides us. External frameworks and plug-ins cannot be used here, allowing developers to Developers are completely separated from operating DOM, and their development thinking has changed greatly.

If a worker wants to do his job well, he must first sharpen his tools. It is very important to understand its core functions and first understand its entire operation process.

Life cycle:

In index.js:

Console on the developer tools can see:

In the console on the home page, 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 it goes to the loading and display of each page, etc.

As you can imagine, a lot of things can be processed here, such as loading boxes and so on.

Routing:

Routing has always been a core point in project development. In fact, WeChat has very little introduction to routing here. It can be seen that WeChat has gone through a good process in routing. The package also provides three jump methods.

wx.navigateTo(OBJECT): Keep the current page and jump to a page in the application. Use wx.navigateBack to return to the original page.

wx.redirectTo(OBJECT): Close the current page and jump to a page within the application.

wx.navigateBack(): Close the current page and go back to the previous page.

These three are basically sufficient. WeChat is well packaged in terms of routing. Developers do not need to configure routing at all. Many frameworks often have very cumbersome routing configuration.

Components:

This time WeChat is also very comprehensive in terms of component provision, which basically meets the project needs, so the development speed is very fast, and you can carefully After browsing it a few times, the development efficiency will be very good.

Others:

Basically any external framework and plug-in cannot be used, even the native js plug-in is difficult to use, because our previous js plug-ins basically exist in the form of operating dom, and the structure of WeChat application account this time does not allow any dom to be operated, even the dynamically set rem.js we are used to using is not supported.

This time WeChat also provides WebSocket, which can be used directly for chatting. There is a lot of room for development.

Compared with public accounts, we found that developing application accounts is component-based, structured, and diversified. The New World is always full of surprises, and more Easter eggs are waiting for everyone to discover.

Let’s start with some simple code!

#1. Find the project folder and import it into your editor. Here, I used the Sublime Text editor. You can choose your favorite editor based on your development habits.

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

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

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

你可以根据实际项目需求更改，其中：

「Color」是底部字体颜色，「selectedColor」是切换到该页面高亮颜色，「borderStyle」是切换菜单上面的一条线的颜色，「backgroundColor」是底部菜单栏背景颜色。文字描述较为抽象，建议你一一调试并查看其效果，加深印象。

「“list”」下的代码顺序必须依次放置，不能随便更改。

「”pagePath”」之后的文件名内，「.wxml」后缀被隐藏起来了，这是微信开发代码中人性化的一点——帮你节约写代码的时间，无须频繁声明文件后缀。

「”iconPath”」为未获得显示页面的图标路径，这两个路径可以直接是网络图标。

「”selectedIconPath”」为当前显示页面高亮图标路径，可以去掉，去掉之后会默认显示为「”iconPath”」的图标。

「”Text”」为页面标题，也可以去掉，去掉之后纯显示图标，如只去掉其中一个，该位置会被占用。

注意：微信的底部菜单最多支持五栏（五个 icons），所以在你设计微信应用的 UI 和基本架构时就要预先考虑好菜单栏的排布。

5. 根据以上代码规则，我做好了示例项目的基本架构，供你参考：

6. 「Json」文件配置好后，「card_course」的基本结构入上图所示，不需要的子集都可以暂时删除，缺少的子集则需要你主动新建。删除子集时记得顺带检查一下「app.json」里的相关内容是否已经一并删除。

注意：我个人建议你新建一个「wxml」文件的同时，把对应的「js」和「wxss」文件一起新建好，因为微信应用号的配置特点就是解析到一个「wxml」文件时，会同时在同级目录下找到同文件名的「js」和「wxss」文件，所以「js」文件需及时在「app.json」里预先配置好。

编写「wxml」时，根据微信应用号提供的接口编码即可，大部分就是以前的「div」，而我们现在就用「view」即可。需要用其它子集时，可以根据微信提供的接口酌情选择。

使用「class」名来设置样式，「id」名在这里基本没有什么用处。主要操作数据，不操作「dom」。

7. 以上是示例项目首页的「wxml」编码。从图中就可以看出，实现一个页面代码量非常少。

8. 「Wxss」文件是引入的样式文件，你也可以直接在里面写样式，示例中采用的是引入方式：

9. 修改代码后刷新一次，可以看到未设背景的「view」标签直接变成了粉色。

注意：修改「wxml」和「wxss」下的内容后，直接 F5 刷新就能直接看到效果，修改「js」则需点击重启按钮才能看到效果。

10. 另外，公共样式可以在「app.wxss」里直接引用。

11. 「Js」文件需要在「app.json」文件的「”page”」里预先配置好。为了项目结构清晰化，我在示例项目中的「index」首页同级目录新建其它四个页面文件，具体如下：

经过以上步骤，案例中的五个底部菜单就全部配置完毕了。

更多WeChat Mini Program Development Tutorial相关文章请关注PHP中文网！