大数据综合课程设计（四）

路由跳转

打开微信开发者工具，打开上回的小程序，在pages文件夹下新建一个log文件夹，app.json确认一下页面路径。

打开index.wxml复制

注释掉的是事件绑定

<view class="goStudy" bindtap="handleParent">

   <text bindtap='handleChild'>hello world</text>

  </view>

</view>

并注释掉其中未注释的改为

<view class="goStudy" bindtap="toLog">

   <text>hello world</text>

  </view>

</view>

对应事件的回调回到index.js中

在页面的初始数据后面加入

输入注释：跳转至log页面的方法

输入：

 toLog(){

    wx.reLaunch({

      url: '/pages/log/log',

    })

  },

pages/log/log时会报错因为这个是相对路径

  //wx.rediectTo关闭当前页面回到主页

  //wx.navigateTo 保留当前页面不用重建页面

  //wx.reLaunch关闭所有页面

进行编译后点击hello world 跳转页面

如果想要更改页面窗口进入log.json

编写代码：

{

  "usingComponents": {},

  "navigationBarTitleText": "日志"

}

生命周期函数

index.js中把生命周期函数代码编为

/**

   * 生命周期函数--监听页面加载

   */

  onLoad:function (options) {

    console.log('onLoad() 监听页面加载');

    //修改msg的状态数据,语法：this.setData

    //console.log(this.data.msg)//this代表当前页面实例对象

    //setTimeout(()=>{

      //this.setData({

        //msg:'xiugaihou '

      //})

    //  console.log(this.data.msg)

  //  },2000)

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady:function(options) {

    console.log('onReady() 监听页面初次渲染完成');

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow:function(options) {

    console.log('onShow() 监听页面显示');

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide:function(options) {

    console.log('onHide() 监听页面隐藏');

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload:function() {

    console.log('onUnload() 监听页面卸载');

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh:function(options) {

  },

//修改msg的状态数据,语法：this.setData

    //console.log(this.data.msg)//this代表当前页面实例对象

    //setTimeout(()=>{

      //this.setData({

        //msg:'xiugaihou '

      //})

    //  console.log(this.data.msg)

  //  },2000)

这些注释掉为了让操作台更加干净点

编译结果为

在onLoad中编译

debugger；

//断点

结果与官网有出入，以官网为主

注释掉debugger；

关于钩子函数：

onLoad和onReady只执行一次而onShow（页面显示）执行多次

关闭页面相当于销毁页面

关于生命周期函数