第五章由函数与事件冒泡

5.1 路由函数NavigateTo和RedirectTo的区别

1.wx.redirectTo
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
2.NavigateTo
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

5.2 Catch和Bind事件的区别

<view catch:tap="onViewTap" class="journey-container">
<text bind:tap="onTextTap" class="journey">开启小程序之旅</text>

onViewTap:function (params) {
    console.log("on tap View")
  },
  onTextTap:function (params) {
    console.log("on tap Text")
  },

catch:

bind:

bind和catch的区别就在于，一个是允许冒泡，一个是阻止冒泡。

5.3 js模块的导入导出(require和=与import)

导出：

var postList = [
]
//导出
export{
  postList
}
// module.exports={
//   postList:local_database
// }

导入

// var postData=require("../../data/data.js")
// console.log(postData)

//导入
import{postList} from '../../data/data.js'
console.log(postList)

5.4 从列表页面跳转到文章详情页面

post.wxml:

<view>
<swiper vertical="{{false}}" interval="3000" circular indicator-dots="{{true}}" autoplay="true" >
<swiper-item >
  <image src="/images/post/sls.JPG"></image>
</swiper-item>
<swiper-item>
  <image src="/images/post/bl.png">
</image>
</swiper-item>
<swiper-item>
  <image src="/images/3jpg.jpg">
</image>
</swiper-item>
</swiper>

<block wx:for="{{postList}}" wx:key="postId"  wx:for-item="item" wx:for-index="idx">
  <!-- 序号 -->
  
  <view bind:tap="onGoToDetail" class="post-container">

<view class="post-author-date">
  <image catch:tap="onMaxImag" class="post-author" src="{{item.avatar}}"></image>
  <text  class="post-date">{{item.date}}</text>
</view>
<text class="post-title">{{item.title}}</text>
<!-- <text class="post-title">如果在儿童和成年人之间展开一场全能比赛，你觉得儿童会在哪些方面胜出?</text> -->

<image class="post-image" src="{{item.imgSrc}}"></image>

<text class="post-content">{{item.content}}</text>

<view class="post-like">
  <!-- <image class="post-like-image" src="/images/icon/chat.png"></image> -->
  <l-icon class="post-like-image" color="#666" size="32" name="favor"/>
  <text class="post-like-font">{{item.collection}}</text>
  <!-- <image class="post-like-image" src="/images/icon/view.png"></image> -->
  <l-icon  class="post-like-image" color="#666" size="32" name="eye"/>
  <text class="post-like-font">{{item.reading}}</text>
</view>

<!-- <l-icon  color="#34BFA3" size="128" name="cart"/>
<l-icon name="research"/> -->

</view>
</block>

</view>

post.js:

// pages/posts/posts.js
// var postData=require("../../data/data.js")
// console.log(postData)

//导入
import{postList} from '../../data/data.js'
console.log(postList)
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //初始值
    a:"如果在儿童和成年人之间展开一场全能比赛，你觉得儿童会在哪些方面胜出?",
    b:"2021",
    c:"2022",
    flag:true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //setData
    //更新
    //创建+更新
    //json
    //ES6
   
   this.setData({
     postList
   })

  },
  onGoToDetail(event){
    wx.navigateTo({
      url: '/pages/post-detail/post-detail'
    })

  },

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

  },

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

  },

  /**
   * 生命周期函数--监听页面隐藏
   * 条件触发
   */
  onHide: function () {
    console.log("onHide")

  },

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

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("onReachBottom")

  },

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

  }
})

data.js: