Detailed explanation of front-end source code and instance analysis of WeChat applets

This article mainly introduces the detailed explanation of the front-end source code of the applet and the related information of instance analysis. if you need it, refer to the next article. AppletFor details about the front-end source code and instance analysis, refer

Applet front-end source code logic and workflow

After reading the front-end code of a small program, I was so excited that the code logic and design were clear and there was no extra stuff. it was really the greatest truths and simplicity.

You can analyze the front-end code directly. Personal opinions are inevitable for your reference only.

Basic file structure:

First, register a small program with app. js and app (obj. An object parameter is used to specify the life cycle function of a applet. Other files can get the app instance through the Global method getApp (), and then directly call its properties or methods, such as (getApp (). globalData)

// App. jsApp ({onLaunch: function () {// call the API to obtain data from the local cache var logs = wx. getStorageSync ('logs') | [] logs. unshift (Date. now () wx. setStorageSync ('logs', logs)}, getUserInfo: function (cb) {var that = this if (this. globalData. userInfo) {typeof cb = "function" & cb (this. globalData. userInfo)} else {// call the logon 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 }})

I understand that app. js serves as the entry initialization file and also provides global API expansion. Several methods and attributes included in the analysis below

The onLaunch hook function is automatically executed once after the applet initialization is complete. if you do not call onLaunch in the applet's life cycle, it will not be executed.

Var logs = wx. getStorageSync ('logs') | [] obtain the logs attribute in the local cache. if the value is null, set logs = [] to be similar to localStorage in HTML5.

Logs. unshift (Date. now () add the current logon time to the array

Wx. setStorageSync ('logs', logs) stores data in the local cache. since wx is a global object, you can directly call wx in other files. getStorageSync ('logs') obtains local cache data

The getUserInfo function, as its name implies, is used to obtain login user information, which is equivalent to an interface provided to obtain user information. it is not executed unless other pages are called. Other pages call this method by getApp (). getUserInfo (function (userinfo) {console. log (userinfo) ;}to obtain user information.

GetUserInfo: function (cb) {// The parameter is cb and the type is var that = this if (this. globalData. userInfo) {// The user information is not empty. typeof cb = "function" & cb (this. globalData. userInfo) // if the type of cb parameter is a function, run cb to obtain user information.} else {// if the user information is empty, that is, the first call of getUserInfo, the user logon interface is called. Wx. login ({success: function () {wx. getUserInfo ({success: function (res) {console. log (res) that. globalData. userInfo = res. userInfo // assign user information to globalData. if you call the getUserInfo function again, you do not need to call the login interface typeof cb = "function" & cb (that. globalData. userInfo) // if the cb type of the parameter is a function, run cb to obtain user information }})}})}}

The globalData object is used to store global data and called elsewhere.

Then, the app. json file is briefly analyzed. the file is used to configure the applet globally, determine the path and window performance of the page file, set the Network timeout time, set multiple tabs, and so on,

The most important thing is the pages attribute, which is required. it is an array. the elements in the array are character string file paths, which specify the pages that the applet consists of. The first item must be the initial page of the applet.

{ "pages":[  "pages/index/index",  "pages/logs/logs" ], "window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "WeChat",  "navigationBarTextStyle":"black" }}

Next, let's take a look at the index and logs folders of the project. In the initial project of the applet, the js, wxss, and wxml related to each page are placed in their respective files, which looks clear and clear.

First, let's look at the index folder, that is, the initial page of the applet. The index folder contains three small files: index. js, index. wxml, and index. wxss. The applet separates JavaScript, css, and html code and places them in their own files to perform their respective duties. The js and style sheet file names must be consistent with the wxml file names in the current folder so that the js and style sheet effects can be displayed on the page. I really appreciate this design concept, which features uniform design and clear responsibilities to reduce code design complexity.

Index. wxml, which is a common template file, data-driven, and developed based on react.

 
 
  
// View container
  
   
// Bindtap binds the click-to-touch event for the container and triggers the bindViewTap event processing function when the touch leaves. bindViewTap is added through index. js page () settings.
   // The variables in braces are parsed from the index. js data object to the corresponding value, and are real-time
   
    
{UserInfo. nickName }}
    
   
    
   
    
{Motto }}
    
  
 

Index. js, which is similar to reaact, does not change the changes. Page () to register a page. An OBJECT parameter is used to specify the initial data, lifecycle function, and event processing function of the page.

Var app = getApp () // Obtain the app instance Page ({data: {motto: 'Hello World', userInfo :{}}, // customize the Event Processing function and click. userinfo is easy to trigger this function bindViewTap: function () {wx. navigateTo ({// jump page method url of the global object wx :'.. /logs '})}, onLoad: function () {// This lifecycle function console is automatically triggered when page loading occurs. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update data. the page is automatically rendered that. setData ({userInfo: userInfo })})}})

The index. wxss file only renders the current page and overwrites the same global style of app. wxss.

Then, analyze the logs log folder, which contains logs. wxml, logs. js, logs. wxss, and logs. json. Similarly, the same name can be ensured to complete effect rendering.

Logs. wxml file

 
  
  
   
// The block container has no other meanings. Wx: for: traverses the logs array and how many times the block will be copied. for-item is equivalent
   
The element is retrieved from a variable name for reference.
   
  
   
    
{Index + 1 }}. {log }}
    
  
 

Logs. js file

// Logs. jsvar util = require ('.. /.. /utils/util. js') // util. js is equivalent to a function library. in this file, we can customize extension and encapsulate some common functions and methods Page ({data: {logs: []}, onLoad: function () {this. setData ({logs: (wx. getStorageSync ('logs') | []). map (function (log) {// use wx. getStorageSync obtains the locally cached logs log data return util. formatTime (new Date (log) // Date format })})}})

Logs. json file

{"NavigationBarTitleText": "Viewing startup logs" // configuration file on the current page, set the title of the navigation bar on the top of the current page of the window, and other related content}

The basic page structure and logic are so simple that nothing is confusing.

For more details about the front-end source code and instance analysis of small programs, please follow the PHP Chinese network!

Related articles:

How does the official developer tool import the applet source code demo?

The evaluation results of four small program development tools are released.

Introduction to Applet Development Tool for mac and shortcut keys

The above is a detailed explanation of the front-end source code and instance analysis of the applet. For more information, see other related articles in the first PHP community!