慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第4章第二个页面新闻阅读页面-小程序的事件机制——捕捉与回调

小程序的事件机制——捕捉与回调

1.修改文件 app.json，welcome 页面调回首页

{
  "pages": [
    "pages/welcome/welcome",
    "pages/posts/posts"
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "sitemapLocation": "sitemap91.json"
}

2.进入目录 pages/welcome，修改文件 welcome.wxml

<!-- wxml用来编写页面骨架的文件 -->
<!-- <view>等同于<div>作用就是容器和分隔文档 -->
<view class="container">
    <image class="user-avator" src="/images/avatar.png"></image>
    <text class="user-name">Hello，七月</text>
    <!--按钮最好不要用小程序提供的<button></button>，用另外方式替代，这是经验-->
    <view class="meto-container" bind:tap="onTap">
        <text class="meto">开启小程序之旅</text>
    </view>      
</view>

3.进入目录 pages/welcome，修改文件 welcome.js

Page({
  onTap:function() {
    console.log('onTap');
  }
})

4.测试查看效果，点击 welcome 页面的 "开启小程序之旅" 按钮

5.进入目录 pages/welcome，修改文件 welcome.js，跳转到新闻页面

Page({
  onTap:function() {
    wx.navigateTo('../posts/posts');
    console.log('onTap');
  }
})

6.测试查看效果，有错误，原因是需要传入的是对象而不是字符串

7.进入目录 pages/welcome，修改文件 welcome.js

Page({
  onTap:function() {
    wx.navigateTo({
      url:'../posts/posts'
    });
    //console.log('onTap');
  }
})

8.测试查看效果，可以跳转，另外会出现一段警告，这只是一端警告而已，提示使用 wx:for 需要 加上 wx:key，但是加了其实是没有性能上的提升，有一些地方使用了是可以提升性能的，如果想它不出现，可以去使用 wx:for 的文件代码中修改

9.进入目录 pages/posts，修改文件 posts.wxml，添加 wx:key 并随意加上一个值

<view>
  <swiper vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000">
    <swiper-item><image src="/images/wx.png"></image></swiper-item>
    <swiper-item><image src="/images/vr.png"></image></swiper-item>
    <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
  </swiper>
  <block wx:key="1" wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx">
    <text>{{idx}}</text>
    <view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.author_img}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.post_img}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="../../images/icon/chat.png"></image>
        <text class="post-like-font">{{item.collect_num}}</text>
        <image class="post-like-image" src="../../images/icon/view.png"></image>
        <text class="post-like-font">{{item.view_num}}</text>
      </view>
    </view> 
  </block>  
</view>

10.测试查看效果，警告不见了

11.进入目录 pages/welcome，修改文件 welcome.js，还有一种连接方式 redirectTo

Page({
  onTap:function() {
    //wx.navigateTo({
    //  url:'../posts/posts'
    //});

    wx.redirectTo({
      url: '../posts/posts',
    })
    //console.log('onTap');
  }
})

12.navigateTo 和 redirectTo 的区别是前一个可以返回上一页，后一个不行。是否可以返回前一页面是跟页面的生命周期有关的

13.进入目录 pages/welcome，修改文件 posts.js，将 unLoad、onReady 和 onShow 里面的 console.log 去掉，为防混乱

// pages/posts/posts.js
Page({
  //产生事件 捕捉事件 回调函数 处理事件
  /**
   * 页面的初始数据
   */
  data: {
    date:'Nov 18 2019',
    title:'正是虾肥蟹壮时'
  },

  process:function() {
    var date = 'Nov 18 2019';

    //页面里使用DOM，但是小程序不能这样写
    var date_ele = document.getElementById('id');
    date_ele.text = date; 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var posts_content = [{
      date:'Nov 18 2019',
      title:'正是虾肥蟹壮时',
      post_img: '/images/post/crab.png',
      author_img: '/images/avatar/1.png',
      content:'菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满，',
      view_num:'112',
      collect_num:'96'
    }, {
      date: "Sep 20 2016",
      title: "比利·林恩的中场故事",
      post_img: "/images/post/bl.png",
      author_img: '/images/avatar/1.png',
      content: "一 “李安是一位绝不会重复自己的导演，本片将极富原创性李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。",
      view_num: 96,
      collect_num: 92,

    }]

    this.setData({posts_key:posts_content});
    //console.log("onload");
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //console.log("onready");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //console.log("onshow");
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onhide");
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onunload");
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

14.进入目录 pages/welcome，修改文件 welcome.js，先使用 redirectTo

Page({
  onTap:function() {
    //wx.navigateTo({
    //  url:'../posts/posts'
    //});

    wx.redirectTo({
      url: '../posts/posts',
    })
    //console.log('onTap');
  },
  onUnload:function() {
    console.log('welcome page is unload');
  },
  onHide:function() {
    console.log('welcome page is onhide');
  }
})

15.测试查看，redirectTo 调用了 unload

16.进入目录 pages/welcome，修改文件 welcome.js，这次改成使用 navigateTo

Page({
  onTap:function() {
    wx.navigateTo({
      url:'../posts/posts'
    });

    //wx.redirectTo({
    //  url: '../posts/posts',
    //})
    //console.log('onTap');
  },
  onUnload:function() {
    console.log('welcome page is unload');
  },
  onHide:function() {
    console.log('welcome page is onhide');
  }
})

17.测试查看，navigateTo 调用了 unhide

18.redirectTo 调用了 unload（即卸载），一旦调用了卸载，welcome 页面已经不存在了，自然无法返回。navigateTo 只是调用了 onhide（隐藏）而已，所以可以返回