[wechat applet] how to build a building block development?

We explained the code composition of the project above , Understand the function of each file, language type and web The difference between web development languages .
Today, let's discuss the building block development of wechat applet , In fact, we don't need to write the underlying code of some functions , Just use a few lines of code to call the functions of wechat environment , To implement our complex applications , Improve the efficiency of our developers .

One , Host environment

In mobile terminal , We know that it can be divided into Android The environment and iOS Environmental Science , Their functions cannot be shared , Like Android WeChat APP stay iOS The end cannot be executed .
These are like APP The implementation of the environment depends on some functions provided by the environment .

Our small programs rely on the environment of mobile wechat
With the help of the host environment of mobile wechat , Realize some functions that ordinary web pages cannot realize , As we are familiar with wechat payment 、 Geographical location, etc , Of course, if your mobile phone doesn't have wechat , Applets cannot rely on this environment , It is also impossible to execute .
Mobile wechat provides the applet with functions in four directions

1. Communication model
2. Operating mechanism
3. Components
4. API

Two , Communication model

First, we need to understand the two concepts of render layer and logic layer ：

• WXSS and WXML Work on the render layer , Leave it to webview Rendering , There are multiple... In the render layer webview Threads ;
• JS Working at the logical level , from JScore Thread running JS Script . The two are separate , That is, we mentioned in the previous chapter that the pursuit of rendering is separated from logic MVVM Pattern .

Wechat applet has two types of communication , as follows ：

• One is the communication between rendering layer and logic layer , There is a wechat client between the two (Native) Forward
• The second is the communication between the logical layer and the third-party server , Sometimes we need to pull the server data from the applet , Or data response to the third-party server , At this time, we also use wechat client (Native) forward .

Such as HTTP request and Web socket Represent data request and data response respectively .

3、 ... and , Operating mechanism

Complete execution of a small program , What is the operating mechanism of wechat client ? Understanding these can help us better develop small programs .
First, before the wechat client opens the applet , Will download the entire applet code package to the local .
Then it will pass app.json Go and get the documents inside pages Field , So as to get all the page paths of your current applet .
Remember pages Is there anything in it ？

{
    	"pages":[
		"pages/index/index",
				"pages/logs/logs"
	]
}

In this configuration , The applet will put the first line of the page path, that is index The corresponding page serves as the home page , As the first page we open the applet .
After the applet starts , Wechat clients will go to app.js file , That is, the entry file of the project , Instantiate a small program ,App Example of onlaunch Events trigger , Execute callback function .

App({
    
	onLaunch: function(){
    
		// Code  
		}})

Since you want to display the page , The wechat client will reprint the code of the home page first , Then go to the... Under the page .json The configuration file , Then reprint the page WXML and WXSS File to render the page .
Finally, the client will reprint .js Entrance file , adopt Pages Function instantiates a page ,Pages The function generally contains data Paragraph and onload Event callback function , As shown below ：

Pages({
    
	data: {
     // Data involved in page rendering  
			logs: []
					},	
			onLoad: function(){
    
					// onload event , Execute the function after page rendering 
			}	
})

data Store the data involved in the rendering of the page in , These data need to be bound in the rendering layer .
onLoad The event is triggered after the page is loaded, that is, after rendering , Then call the callback function inside .

Four , Components, components

We can understand it as , Wechat provides us developers with some convenient ways to make complex functions , like WXML Medium <map></map> label , Just this line of code , We can display the map in the page , Even after we add some attribute value settings , A map showing a specific location . such , We can use the components provided by wechat like building blocks , Make some complicated pages , Realize advanced functions , Is it very human ！

In the next chapter, we will start to learn and practice the view component ！

5、 ... and ,API

Provide some unique functions , Such as obtaining user information 、 Wechat payment and so on , We developers can use API Use it directly .
For example, we need to call wechat scanning function , We can directly ：

wx.scanCode({
    
	success: (res) => {
    
			console.log(res)
	}
})

Similar to components , It's just API Relatively, it can provide more complex functions , because API In fact, it is equivalent to calling the built-in function of wechat environment to realize the function , Wechat applet encapsulates some source code that can complete some functions , As API For developers .

---

This is the end of today's small program , If it helps you , You can pay attention to the follow-up updates of Niuniu , Thank you for your support ！

Debt see ~