Quickly develop your own WeChat applet in two days?

Why should you learn mini program development? What to prepare for development? Is it difficult to develop a mini program? !

The complete set of mini programs + public account projects you want, including front-end, server, and database, is here

Attached are a few effect pictures. The code has been uploaded to the code cloud. If you like it, you can star it, reward it, like it, throw coins, and throw bananas~

Code address: https://github.crmeb.net/u/demo

one. Written in front

1. Why should you learn mini program development?

For front-end development, WeChat Mini Programs have become a must-have skill for front-end development engineers because of their simplicity, speed, low development cost, and huge user traffic.

2. Development preparation:

(1) Some people joked that you don’t even need to learn Vue applets:

Although WeChat Mini Program is developed by Tencent itself, the core idea is the same as that of Vue and other frameworks.

(2) Good at collecting exquisite small components: "We don't produce code, we are just code porters." Being good at finding the components you want and assembling them cleverly and elegantly into a large project is also a basic skill for programmers.

How to find the mini program demo you want? At the end of the article, I will recommend mini program resources to you. There are many projects by great people.

Without further ado, let’s get down to business.

1. Register a mini program account and download IDE

1. Register on the official website https://mp.weixin.qq.com/ and download the IDE.

2. Official documents have always been the best learning materials.

Notice:

(1) After registering an account, you will have an appid, which you need to fill in when creating a new project. Otherwise, many functions will not be usable, such as previewing, uploading code, etc.

(2) If you have registered a WeChat official account, please note that the WeChat official account and the mini program are two accounts, and their appIDs are also different. The mini program development must use the mini program's appID.

Image Description

2. Introduction to the Mini Program Framework and Its Operation Mechanism

1. We created a "normal quick start template", and the entire project directory is as follows:

Image Description

2.app.js

The startup file of the entire project, as commented, has three major functions: browser cache for storing and retrieving data; callback for successful login; and obtaining user information.

globalData is a global variable or constant that defines the entire project.

Image Description

3.app.json

Configuration files for the entire project, such as registration page, configuration tab page, setting the style of the entire project, page title, etc.

! Note: The default first page when the mini program is launched is the first page in the pages of app.json.

4.pages

The page components of a mini program will have as many subfolders as there are pages. For example, the quick start template has two pages, index and logs

5. Open the index directory

You can see that there are three files, which actually correspond one-to-one to the files we developed for the web.

index.wxml corresponds to index.html;

index.wxss corresponds to index.css;

index.js is the js file.

Generally, we will also add a .json file to each page component as the configuration file of the page component to set functions such as page title.

6. Double-click the index.js file

(1) var app = getApp();

Import the app.js file of the entire project to obtain public variables and other information in the period.

If you want to use a method in the util.js tool library, export it in module.exports in util.js, and then require it in the required page.

(2) For example, when we want to get movies from a certain station, we need to call its API; we first define doubanBase in gloabData in app.js

Then use app.globaData.doubanBase in index.js to get this value.

Of course, you can also use hard-coded values ​​for these constants when the page needs them, but for the maintenance of the entire project, it is recommended to write such common parameters in the configuration file.

Image Description

(3) Next, in the entire page ({}), the first data, which is the internal data of the page component, will be rendered into the wxml file of the page, similar to vue and react~

Modify data through setData to drive page rendering

(4) Some life cycle functions

For example, onload(), onready(), onshow(), onhide(), etc., monitor page loading, page initial rendering, page display, page hiding, etc.

For more information, please check the official website API. The most commonly used methods are onload() and onShareAppMessage() (which sets the information shared on the page).

7. Use of wxml template.

For example, the movie page of this project uses the smallest star rating component wxml as a template, from star to movie to movie-list, nested one level at a time.

Write the name attribute in the star-template.wxml page; then get it by name when importing

8. Commonly used wxml tags

view, text, icon, swiper, block, scroll-view, etc. You can directly check the official website documents for these tags

3. Mini Program Framework, Pages, and Notes on Launching

1. Some points to note in the entire framework

(1) In the entire wxml page, the bottom-level tag is <page></page>.

(2) The color of the navigation bar at the top of each page, title, is configured in the json of this page. If not configured, the total configuration in app.json is used.

(3) Comments cannot be written in json, otherwise an error will be reported.

(4) Routing related

Image Description

1) If you use wx.SwitchTab to jump to the tab page, in addition to registering the pages in app.json, you also need to register the tab page in tabBar for it to take effect.

Note: There are a maximum of 5 tabs, which means there are a maximum of 5 menus at the top or bottom. Other pages can only be opened through other routing methods.

2) navigateTo is to jump to a non-tab page, such as the welcome page, movie details page, and city selection page; after registering in app.json, it cannot be registered in the tabBar, otherwise it will not jump.

3) reLaunch jumps. There is no return button in the upper left corner of the newly opened page. This project only used it once, when switching cities.

(5) Passing parameters between pages

The parameters are written in the redirected URL, and then the other page receives them in the parameter option in the onload method. Pass and get the id as follows

(6) Use of custom attributes starting with data-

For example, how do we write in wxml

The click event object can be obtained as follows: var postId = event.currentTarget.dataset.postid;

Note: Uppercase letters will be converted to lowercase letters, and letters with the _ symbol will be converted to camel case letters.

(7) The difference between event objects event, event.target and event.currentTarget:

target refers to the currently clicked component and currentTarget refers to the component where the event is captured.

For example, in the carousel component, the click event should be bound to the swiper, so that it can monitor whether any image is clicked.

At this time, target refers to image (because the image is clicked), and currentTarget refers to swiper (because the click event is bound to swiper)

(8) Use free network interface:

This project uses the Hefeng Weather API, Tencent Map API, Baidu Map API, Douban Movie API, Aggregate Headline News API, etc. For specific usage, please refer to the interface documents of their official websites, which are very detailed.

Note: The free interface has access restrictions, so if you use this interface with someone else's component, it is best to register a new key and replace it.

Attached is a free interface collection:

https://github.com/jokermonn/…

8) wxss has a pitfall: it cannot read local resources, for example, an error will be reported if the background image is used locally.

There are several ways to turn local pictures into online pictures: uploading to personal website; QQ space album, etc.

2. Switch to the city page:

(1) The home page uses navigateTo to jump to the city switching page. Since the home page is not closed, the weather information is still the old one after switching cities and returning.

The correct processing logic is as follows:

1) Use reLaunch to jump to the city switching page, which actually closes all pages and opens a new page.

2) Switch the city page, update the city information in the public variables to the manually switched urban area, then switchTab back to the home page, triggering the reloading of the home page.

3) When obtaining city information on the home page, add a judgment. If the global information is not available, use the positioning information. If the global information is available (such as the one just set), use the global information.

(2) Scrolling and returning to the top of the city list

Based on the scroll-view component's scroll-top property, the initial value is 0, and the scrolling will increase; click back to the top and set it to 0 to return to the top

3. Map service page

(1) Call various services of Baidu Maps to query information on hotels, food, and life services. For more information, see the Baidu Maps documentation

(2) When clicking, add a border to the clicked icon. The view is driven by data, so an array of length 3 is used to save the status of whether the three icons are currently clicked.

Then wxml dynamically adds classes and border styles based on the data.

4. More Pages

(1) Currently, the function of opening external links in mini programs is only open to mini programs organized by companies. Individual developers are still not allowed to use external links.

(2) Easter egg page, obtain user information

Through wx.setStorageSync('userInfos', userInfos);, you can get the personal information of the user who logged into the applet, which can be sent to the backend and stored in the database for easy analysis of the user.

I just store it in the browser cache, the maximum cache should be 10M; if the user deletes this applet from the applet list, the cache will be cleared.

5. Release Notice

(1) The new version of the mini program has a release limit of 2M. Images usually take up the most space, so try to use images from the Internet.

The specific method of converting local images into online images is explained above.

(2) If there is no problem with the preview test on the developer tool, click Upload; in the web version of the mini program, click the "Development Management" menu on the left side of the personal center, and the third section - Development Version will have content.

(3) Click Submit, fill in the relevant information of the mini program, and submit it for review.

Note: It is best to fill in the classification accurately so that it can pass the review faster. My small program was approved and launched in a day and a half.

So far, I have gone through all the pitfalls and points to note during the two days of development. It is said that there are more pitfalls, and I will continue to study them after more in-depth development.