微信小程序入门与实战之路由函数与事件冒泡

路由函数NavigateTo和RedirectTo的区别

• wx.navigateTo(Object object)：
  保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

• wx.redirectTo(Object object)：
  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

可以用load和unload来验证他们的区别。

Catch与Bind事件的区别

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

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

当我们点击按钮内部（但是没有触碰到文字的时候），日志输出：

当我们点击到内部的文字时，先触发text，再触发view：

当我们将bind改为catch后，即：

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

我们这时候点击文字区域，仅仅会输出text：

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

js模块的导入导出

我们创建一个专门的保存文章数据的Js文件：

var local_database=[
  {
  }
]
module.exports={
  postList:local_database
}

我们的文章页面的js文件需要对data,js进行导入，这里我们不能使用绝对路径，会报错，只能使用相对路径：

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

对导出进行简化：

var local_database=[
  {
  }
]
export{
  postList
}

对导入进行优化：

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

用列表渲染展示导入的数组的数据

  onLoad(options) {
    this.setData({
      postList:postList
    })
  },

或者直接用ES6语法 简写：

  onLoad(options) {
    this.setData({
      postList
    })
  },

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

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

列表渲染的wxkey赋值规则

wx:key 的值以两种形式提供：

1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

2.保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。