In Chapter 2 we have created a Hello WXapplet sample applet. We understand the composition of the Hello WXapplet project from the file directory structure.
The directory structure shows that there are three files starting with app (app.js, app.json, app.wxss), pages directory and utils directory under the root directory of the applet project. The pages directory stores the constituent files of 2 pages (index and log). Each page is a directory, the directory name is the unique page name, and it consists of 2~4 files prefixed with the page name.
The directory file structure of the applet is as above. The three app files on the left must be placed under the root directory of the applet, and other files are freely controlled by the developer.
app.js is the script code of the applet, which is used to monitor and process the life cycle of the applet, declare global variables, and call the rich API provided by the framework.
//app.js
App({
onLaunch: function () {
//Call API to get data from 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 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
}
})
app.json is the global configuration of the entire applet, which pages the applet consists of, the background color of the window of the applet, the style of the navigation bar, the default title, etc. (No comments are allowed in the json file)
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.wxss is the common style sheet for the whole applet.
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
where app.js and app.json are required.
The applet page is composed of 2~4 files with the same name and different suffixes under the same path:
A file with a .js suffix is a script file.
//index.js
//get application instance
var app = getApp ()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//event handler
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//Call the method of the application instance to get the global data
app.getUserInfo(function(userInfo){
//update data
that.setData({
userInfo:userInfo
})
})
}
})
A file with a .json suffix is a configuration file. (If it exists, it will overlay the same configuration items in the window of app.json. Comments cannot be added to the json file)
Stylesheet files with .wxss suffix. (If it exists, it will cascade over the style rules in app.wxss)
/**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;
}
Files with .wxml suffix are page structure files.
<!--index.wxml-->
<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>
Which is required for .js files and .wxml files.
The "path + page name" of each page in the WeChat applet needs to be written in the pages of app.json, and the first page in the pages is the homepage of the applet.