Shulou(Shulou.com)06/01 Report--

The editor of this article introduces "how to develop a Mini Program quickly" in detail. The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to quickly develop a Mini Program" can help you solve your doubts. Let's follow the editor's ideas to learn new knowledge.

Sign up for Mini Program account and download IDE

Official documents are always the best learning materials.

Note:

(1) after registering an account, there will be an appid, which needs to be entered when creating a new project, otherwise many features will not be available, such as no preview, no code upload, and so on.

(2) if you have registered a Wechat official account, it is important to note that Wechat official account and Mini Program are two accounts, their appid is also different, Mini Program development must use Mini Program appid.

Introduction of Mini Program Framework and its operating Mechanism

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

2.app.js

The startup file of the entire project, such as the annotated onlaunch method, has three major functions: browser cache for saving and fetching data; callback with successful login; and access to user information.

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

3.app.json

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

! Note: Mini Program launches the default first page, which is the first page in app.json 's pages.

4.pages

Mini Program's page component, a few pages will have several subfolders. For example, the Quick launch template has two pages, index and logs

5. Open the index directory

You can see that there are three files, which actually correspond to the files developed by our web.

Index.wxml corresponds to index.html

Index.wxss corresponds to index.css

Index.js is the js file.

In general, we also add a .json file to each page component as the configuration file for the page component, set the page title and other functions

6. Double-click the index.js file

(1) var app = getApp ()

The app.js file of the whole project is introduced to fetch information such as common variables in the period.

If you want to use one of the methods in the util.js toollibrary, module.exports the export in util.js, and then require it in the desired page.

(2) for example, when we want to get a Douban movie, we need to call Douban's api;. We first define doubanBase in the gloabData in app.js.

You can then get this value by using app.globaData.doubanBase in index.js.

Of course, you can also write dead values for these constants when the page needs them, but for the maintenance of the entire project, it is recommended that these common parameters be written in the configuration file.

(3) next, in the whole page ({}), the first data, the internal data of the components of this page, will be rendered to the wxml file of the page, similar to vue and react~.

Modify data data through setData to drive page rendering

(4) some life cycle functions

Such as onload (), onready (), onshow (), onhide (), etc., listening for page loading, page initial rendering, page display, page hiding, and so on.

More information can be found on the official website API. The most frequently used methods are the onload () method and the onShareAppMessage () method (setting the information shared by the page)

7. The use of wxml templates.

For example, the project movie page, is the smallest star evaluation component wxml as a template, star to movie to movie-list, level-by-level nesting use.

The star-template.wxml page writes the name attribute; then when import is introduced, it can be obtained through name.

8. Commonly used wxml tags

View,text,icon,swiper,block,scroll-view and so on. These tags can be found directly on the official website.

Mini Program framework, each page and the attention points for launching

1. Some points of attention in the whole framework

(1) the bottom tag of the entire wxml page is.

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

(3) comments cannot be written in json, or an error will be reported.

(4) routing related

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

Note: there are up to 5 tab, which is what we call a maximum of 5 menus at the head or bottom. Other pages can only be opened through other routing methods.

2) navigateTo jumps to a non-tab page, such as welcome page, movie details page, city selection page; after registering in app.json, you cannot register in tabBar, otherwise you cannot jump either.

3) reLaunch jump, there is no back button in the upper left corner of the newly opened page, this project is only used once, when switching cities.

(5) transfer parameters between pages

The parameters are written in the url of the jump, and then another page is received by the passing parameter option in the onload method. Pass and get the id as follows

(6) the use of custom attributes beginning with data-

For example, how do we write in wxml

Click on the event object can be taken like this, var postId = event.currentTarget.dataset.postid

Note: uppercase will be converted to lowercase, with _ symbol will be converted to hump form

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

Target refers to the currently clicked component and currentTarget refers to the event capture component.

For example, the click event should be bound to the swiper in order to monitor whether any picture is clicked.

Target here refers to image (because you clicked on a picture), while currentTarget refers to swiper (because the binding click event is on swiper).

(8) use the free network interface:

Gentle weather api, Tencent Map api, Baidu map api, Douban movie api, aggregate headline news api and so on are used in this project. For specific usage, please see the interface document on their official website.

Note: there are restrictions on access to free interfaces, so if you use this interface with other people's components, it's best to register a new key instead.

After reading this, the article "how to quickly develop a Mini Program" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about the article, welcome to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.