1.每个页面需要四个文件
1.1.JS文件 必须
页面逻辑,相当于Android中的Activity或是Fragment。
1.2.WXML文件 必须
页面结构,相当于Android中的xml布局。
1.3.JSON文件 不必须
页面配置,相当于 Android中的String配置View的显示文字。
1.4.WXSS文件 不必不
页面样式,相当于Android中的Style配置每个布局的样式。
2.结合代码讲解
2.1.JS文件代码
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
作用:操作。
2.2.WXML文件代码
<view class="index_top_view1">
<text class="index_top_view1_text1">{{text1name}}</text>
</view>
<view class="index_top_view2">
<text class="index_top_view1_text1">{{text2name}}</text>
</view>
作用:显示页面布局。
2.3.JSON文件代码
{
"navigationBarTitleText": "首页"
}
作用:配置信息,比如配置该页面的标题。
2.4.WXSS文件代码
.text1wxss {
width: 128rpx;
height: 128rpx;
color: #bbb;
}
.text2wxss {
width: 128rpx;
height: 128rpx;
color: #000;
}
作用:配置wxml的样式 比如 颜色 字体等等。
2.5.各个文件关系讲解
2.6.跳转页面
2.6.1.wxml代码
<button type="default" bindtap='defaultButton'>默认颜色(可点击)</button>
<button type="primary" bindtap='primaryButton'>微信绿色(可点击)</button>
<button type="warn" bindtap='warnButton'>警告红色(可点击)</button>
2.6.2.wxss代码
button {
margin: 20px;
}
2.6.3.JS代码
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 默认按钮点击
*/
defaultButton: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
/**
* 绿色按钮点击
*/
primaryButton: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
/**
* 警告按钮点击
*/
warnButton: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
2.6.4.效果