Introduction to WeChat applets

In the development of Internet technology in full swing, the emergence of various frameworks should be the most concerned about small programs. From news forums, QQ groups, and groups, many IT-related friends like to discuss and study this small program. With curiosity, I am also involved. In the development of Internet technology in full swing, the emergence of various frameworks should be the most concerned about small programs. From news forums, QQ groups, and groups, many IT-related friends like to discuss and study this small program. With curiosity, I am also involved.

Step 1: Download the developer tool from the official website, which includes Windows 64, Windows 32, and mac. select the corresponding tool to download. The installation is skipped after the download.

Link: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html? T = 1475052055652

Step 2: download the demo.

Link: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html? T = 1475052055652

Step 3: Open the developer tool and import the decompressed demo, so that you can experience the mini-program happily.

In this process, we can know that the original small program is actually quite similar to many frameworks. Its page is no longer html, but angular mode. Style suffixes are not css but wxss; unit is not px, but rpx.

Data binding is similar to angular.

The debugging interface is as follows:

Page code:

   
      
       
   
    {{userInfo.nickName}}
     
    
      
   
    {{motto}}
     
  
 

Style:

/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;} .userinfo-avatar {  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;} .userinfo-nickname {  color: #aaa;} .usermotto {  margin-top: 200px;}

Js:

// Index. js // Obtain the application instance var app = getApp () Page ({data: {motto: 'Hello World', userInfo: {}}, // bindViewTap: function () {wx. navigateTo ({url :'.. /logs '})}, onLoad: function () {console. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo })})}})

Directory:

We can know the initialization, data acquisition, and interface calling processes of the applet page.

For more articles about small programs, refer to the PHP Chinese website!