微信小程序之页面四个文件详解以及跳转事件

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.效果