A brief discussion on WeChat mini programs

In the raging development of Internet technology, various frameworks have emerged, and the WeChat applet should be the one that attracts the most attention at the moment. From news forums to QQ groups and WeChat groups, many friends who work in IT like to discuss and study this small program. Out of curiosity, I got involved.

The first step is to download the WeChat developer tools from the official website. It is divided into windows64, windows32 and mac. Select the corresponding one to download. Install after downloading, skip the steps.

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

The second step is to download the demo.

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

The third step is to open the WeChat developer tools , import the decompressed demo, so that you can happily experience the mini program.

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 like angular mode. The style suffix is ​​not css but wxss; the unit is no longer px but rpx.

Data binding is similar to angular.

The debugging interface is as follows:

Page code:

<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

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
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

Directory:

As you can see from app.json, the page is imported from here.

Look at app.js again, as shown below:

We can know the process of mini program page initialization, data acquisition and interface calling.

For more articles related to WeChat mini programs, please pay attention to the PHP Chinese website!