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

How to create WeChat Mini Programs, in view of this question, this article introduces in detail the corresponding analysis and answers, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

Preparatory work

Download development tools: WeChat Mini Programs development tools

Create a project

Add a project

If there is no AppID, you can choose no AppID, and the project name can be picked up at will, because I want to teach you the mall that everyone wants to learn in the introductory tutorial, so call the mall directly. The shopping in the project directory is a new folder created by yourself, and the empty folder system will automatically create the entire project architecture in the shopping folder. Remember to check the quick start project.

Project architecture analysis

Overall architecture: automatically created projects will have the following schema directory

Red box 1: menu bar

Red box 2: interface effect display

Red box 3: code schema directory

Red box 4: code bar

Focus on the introduction of the code architecture directory: app.js, app.json, app.wxss, the first two of these three are required, and the first two are equivalent to directories, just like when you read a book, you have to look at the directory first, so when you look at other people's projects in the future, first look at app.js and app.json.

App.js is the script code for Mini Program. In this file, we can monitor and process Mini Program's life cycle functions and declare global variables. Call the rich API provided by the framework, such as synchronous storage and synchronous reading of local data in this example.

App.json is the global configuration for the entire Mini Program. In this file, we can configure which pages Mini Program consists of, configure the window background color of Mini Program, configure the navigation bar style, and configure the default title. Note that no comments can be added to this file.

App.wxss is the public stylesheet for the entire Mini Program. We can use the style rules declared in app.wxss directly on the class property of the page component.

App.json parsing: first of all, since it is .json, it must be in json format, which contains two parts: pages and window, fixed field, and pages is the page contained in the whole Mini Program. You can find the corresponding page according to the path. Window is to set some window styles, which in turn is to configure the window background font style of Mini Program, configure the navigation bar background style, configure the default title, and color.

Learn and use now

I want to set the title of the navigation bar to the mall, the font is white, and the background is black. What should I do? It's very simple. Just find app.json and replace the following code with window. To explain that both navigationBarBackgroundColor and navigationBarTextStyle support rgb, that is to say, setting the font color navigationBarTextStyle to white and filling in white can also be filled in # fff, which has the same effect.

"window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# 000", "navigationBarTitleText": "Mall", "navigationBarTextStyle": "white"}

What if I want to add an interface? Similarly, you only need to add the path pages/addPage/addPage to the pages attribute in app.json, and the system will automatically create a file for you after you write the path.

"pages": ["pages/index/index", "pages/logs/logs", "pages/addPage/addPage"]

The following figure is the effect of solving the above two problems. App.json will stop here for the time being. Remember that we have added a new interface addPage. We will describe this interface in detail later. This will be shelved for a while.

App.js parsing: if you look at the suffix .js, you can see that it is the code of JavaScript. First, take a look at several methods onLaunch, getUserInfo, and getUserInfo contained in App.

The onLaunch method is the method that is executed when Mini Program starts.

Var logs = wx.getStorageSync ('logs') | | [] logs.unshift (Date.now ()) wx.setStorageSync (' logs', logs)

Take a look at the code, wx. The methods that start with this are all encapsulated by the system, which we can call directly. The input wx., system will automatically prompt the methods that come with them. For more system-defined methods, please see Wechat API documentation. The space limit here cannot be fully described.

OK, back to the point, look at the three-sentence code, wx.getStorageSync is to get the local cache of the logs field, what does the logs.unshift code mean? Unshift is the knowledge of js, and the unshift () method adds one or more elements to the beginning of the array and returns a new length. So you can probably understand the code of these three sentences, roughly take the logs field of the locally cached data, insert the latest time, and then store it in the logs field in the cache again. Having said so much, where is the data stored in Storage? please look at the figure below, it will be easier to understand. You can find the debugging in the menu bar-> Storage, and you can see the locally cached logs field and data. You can also add your own data. Then call wx.getStorageSync ('key value') to get the data

GlobalData global variable data

The custom method of getUserInfo is used to obtain user information. The overall code means that if the user information is empty, the login interface of Wechat will be called. After a successful login, it will be stored in the global variable globalData. Analyze the first place of the two codes, var that=this, that=this, this is the syntax attribute of js, this should be a value referencing this example, and the reason it assigns it to that can be judged from the following code some of the characteristics of js. Each method is a closed function, and its upper instance is this, so if a method A contains another method B, using this in A refers to an instance of A, and using this in B should be an instance of B, that is, A with B, so here in order to get the instance this in A, we have to assign a value to that so that B can use the instance of A. In this demo, the above this refers to the instance of app, and that is assigned to this in order to use an instance of app in the following method. I still don't understand that that=this can refer to this literature. The second place is typeof cb== "function" & & cb (this.globalData.userInfo). This code is called twice in the code, so we have to analyze it. Cb is the abbreviation of callback, the translated code means cb==function, requires cb as the method, and calls back the cb method. The rest of the wx.login can guess that it is the login method encapsulated by Wechat.

GetUserInfo:function (cb) {var that = thisif (this.globalData.userInfo) {typeof cb = = "function" & & cb (this.globalData.userInfo)} else {/ / call login interface wx.login ({success: function () {wx.getUserInfo ({success: function (res) {that.globalData.userInfo = res.userInfo typeof cb = = "function" & & cb (that.globalData.userInfo)})}}, globalData: {userInfo:null}

The answer to the question on how to create WeChat Mini Programs is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.