Learning Address: https://www.w3cschool.cn/weixinapp/9wou1q8j.html
1. Registered address: https://mp.weixin.qq.com
2. Development Tools Download: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3. Create a project
4. The generated code
Click on the left navigation Developer Tools "Edit", we can see that this project has been initialized and contains some simple code file. The key is also essential, is app.js, app.json, app.wxss three. Where .jssuffix is the script file .jsonsuffix file is the configuration file, .wxssthe suffix is the style sheet file. Small micro-channel program to read these files, and generates the applet instance .
app.js script code is a small program. We can listen for and handle applet lifecycle functions in this file, we declare global variables. Invocation Framework provides a rich API, synchronous and synchronous storage of the present embodiment reads the local data.
//app.js
App({
onLaunch: function () {
// call the API to retrieve 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 Log 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 configuration of the entire global applet. We can be configured in this file small program which is composed of pages, the configuration window background color of the applet, configure the navigation bar style, configure the default title. Note that the file can not add any comments.
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.wxss public stylesheet entire applet. We can use style rules app.wxss declared directly in the class property page component.
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
5. Create a page
We have two pages, index pages and logs page, that page and welcome small startup log display page, they are in the pages directory. Micro letter applet in each page of a page name] + [path will need to write in app.json of pages, and the pages of the first page is the home applet.
Each applet page is composed of four different file extension of the same name by the same path, such as: index.js, index.wxml, index.wxss, index.json . .jsThe file is a script file suffix, .jsonsuffix file is the configuration file, .wxssthe suffix is the style sheet file .wxmlextension of the file is the page structure file.
index.wxml page file structure:
<!--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>
index.js page of the script file, in this file we can monitor and deal with the life cycle of a page function, access applet instance, represent and process data, page response interaction events.
//index.js
// Get application examples
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 application example of a method to obtain global data
app.getUserInfo(function(userInfo){
//update data
that.setData({
userInfo:userInfo
})
})
}
})
index.wxss is the page style sheet:
/**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;
}
Page style sheet is non-essential. When a page style sheets, style rules in a style sheet page will be stacked covering style rules app.wxss in. If you do not specify a page style sheets can also be used app.wxss style rules specified in the configuration file directly to the page.
index.json is the page's profile:
Page profiles are not necessary. When a page configuration file, configuration items on this page will override the same configuration items app.json in the window. If you do not specify a page configuration file, the default configuration app.json directly on the page.
logs of page structure
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
logs page uses the control codes to organize tags, in use the binding data, and the data node, loop unrolling.<block/><block/>wx:forlogslogs
//logs.js
was util = require ( '../../ utils / util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
Results are as follows:
