小程序 学习四 页面的注册及周期函数

首先先在小程序项目中中新建一个页面(page)

先在根目录的pages下新建一个文件夹new_page

选中new_page文件夹，点击右键，在小程序的开发工具上会有一个新建page的选项，点击之后会直接在new_page目录下新建四个文件

1.  new_page.js
2.  new_page.wxml
3.  new_page.wxss
4.  new_page.json

请注意这四个文件可以和new_page文件夹名字不一样，但四个文件必须同名，否则小程序会找不到依赖文件路径，我也推荐文件夹和文件名字一致，以免造成混淆

到这里，建立一个小程序page就完成了，值得注意的是，在小程序的开发工具中（我使用的是小程序的官方开发工具），当你新建一个page之后，在根目录的app.json中你可以看到pages中新增了一条数据

app.json

{
  "pages": [
    "pages/index/index",
    "pages/about/about",
    "pages/new_page/new_page"//新增的page记录
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

这就是page路由的注册，虽然即便不在这里注册地址，也能通过navigateTo等切换路由接口访问到，但是如果你需要把page用做底部导航栏tabBar中，那么你就必须在“pages”中注册地址

wxml 文件

  你可以在这里面使用小程序的标签进行页面的搭建，它会自动引入同目录下wxss的样式表。具体使用类似于css样式表同时，你还可以使用小程序的标签语法

wxss文件

1.   你可以在这里对wxml中的元素进行样式编辑，它支持css中的大多数的标签选择器但有在优先级上有所不同 优先级 标签选择器<类选择器<id选择器
2.   wxml文件只使用与之同名的wxss，如果出现当前页面css样式过多，书写不下的情况，那么你可以在当前wxss目录下新建一个wxss文件，并在于wxml文件同名的wxss文件中使用@import引入
3.   在page下面的wxss样式，只作用于当前page的wxml文件,其余js、json文件也是一样

json文件

1.  页面独享的配置文件，只对一个page生效。具体配置内容

js文件

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

 每个页面js文件，只执行并且仅仅只能执行一次page({})方法，否则会出先未知错误

每个页面都有自己独立的生命周期，同时也会提供上诉的生命周期函数，每个生命周期函数我们可以执行一些自己的业务代码。但还是首先了解这几个生命周期都有什么作用吧

onLoad

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //页面加载时触发 一个页面只会调用一次 并且接收一个参数。包含当前打开页面路径的参数
    console.log(options);
  },

例如 当前页面是以go_to_about方法进入的

 go_to_about(){
    wx.navigateTo({
      url: '/pages/about/about?id=12',
    })
  }
//那么onLoad 中的options打印的值就是 {id: "12"}

onShow

1.   可以多次触发
2.   当小程序从后台切换到前台，并且显示的页面是当前页面的时候会 触发当前页面的onShow，并且在小程序的onShow（app.js下面的，小程序生命周期而非页面生命周期）之后执行
3.   当页面切换时，当前页面显示的页面会触发onSHhow
4.   与小程序的onShow不同，页面的onShow不接收参数
5.   当页面第一次加载时，onShow执行在onReady之前

onReady

1.  页面第一次渲染完成时执行，这个页面生命周期只会执行一次
2.  不接收参数
3.  使用改变视图的api 如wx.setNavigationBarTitle，请在onReady之后使用

onHide

1.  页面进入后台太时触发，包括小程序进入后台时也会触发
2.  不接收参数
3.   在小程序onHide之前执行，与onShow相反

onUnload

1. 页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
2. 不接收参数

onPullDownRefresh

1. 监听用户下拉事件
2. 不接收参数
3. 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
4. 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
5. 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachbottom

1. 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
2. 在触发距离内滑动期间，本事件只会被触发一次

onPagescroll

1.  监听页面滚动事件
2.  接收一个参数
3.  {scrollTop：Number}滚动条的高度

onShareAppMessage

1.   监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
2. 接收一个参数 object
3. 
4. return一个object
5. 
6. 值得注意的是进入转发页面的时候 小程序和页面的onHide都会触发，离开转发页面时两者的onShow都会触发

onResize

1.  小程序屏幕旋转时触发
2. 接受一个参数

onTapItemTap

1.  页面作为tab导航页面中的一项，并且在tap上被选中时触发
2. 接收一个参数