day04-页面导航&跳过域名校验&网络请求&自定义组件&wepy入门使用

目标

• 能够实现页面之间的导航跳转
• 能够发起网络数据请求
• 能够定义并使用小程序中的自定义组件
• 能够安装WePY框架
• 能够使用WePY框架创建小程序项目
• 能够知道WePY框架中基本的开发规范

页面导航（★★★）

页面导航的两种方式

页面导航就是页面之间的跳转，小程序中页面之间的导航有两种方式：

• 声明式导航：通过点击 navigator 组件实现页面跳转的方式
• 编程式导航：通过调用小程序的 API 接口实现跳转的方式

声明式导航

导航到非 tabBar 页面

非 tabBar 页面指的是没有被当作 tabBar 进行切换的页面

示例代码如下：

<navigator url='/pages/info/info'>去info页面</navigator>

**注意：**上述代码使用 url 属性指定要跳转到的页面路径；其中，页面路径应该以 / 开头，且路径必须提前在 app.json 的 pages 节点下声明，才能实现正常的跳转

导航到 tabBar 页面

tabBar 页面指的是被当作 tabBar 进行切换的页面。如果 navigator 组件单纯使用 url 属性，无法导航到 tabBar 页面，需要结合**open-type** 属性进行导航

示例代码如下：

<navigator url="/pages/list/lists" open-type='switchTab'>去tabBar页面</navigator>

关于 navigator 组件的更多用法，请翻阅官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

后退导航

如果要后退到上一页面或多级页面，需要把 open-type 设置为 navigateBack，同时使用 delta 属性指定后退的层数，示例代码如下：

<navigator open-type='navigateBack' delta='1'>
    返回上一页
</navigator>

编程式导航

导航到非 tabBar 页面

通过 wx.navigateTo(Object object) 方法，可以跳转到应用内的某个页面。但是不能跳到 tabbar 页面

Object 参数对象的属性列表如下：

属性	类型	是否必填	说明
url	string	是	需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ?分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码如下：

结构绑定事件

<view bindtap='tapHandler'>前进</view>

在js中编写代码

tapHandler:function(){
   
    wx.navigateTo({
   
      url: '/pages/list/lists',//跳转的路径
      success:function(){
   //成功后的回调
        console.log('success')
      },
      fail:function(){
   //失败后的回调
        console.log('fail')
      },
      complete:function(){
   //不管成功还是失败都会回调
        console.log('complete')
      }
    })
  }

导航到 tabBar 页面

通过 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。其中 Object 参数对象的属性列表如下

属性	类型	是否必填	说明
url	string	是	需要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码如下：

结构绑定事件

<view bindtap='tapHandler'>前进</view>

在js中编写代码

tapHandler:function(){
   
    wx.switchTab({
   
      url: '/pages/list/lists',//跳转的路径
      success:function(){
   //成功后的回调
        console.log('success')
      },
      fail:function(){
   //失败后的回调
        console.log('fail')
      },
      complete:function(){
   //不管成功还是失败都会回调
        console.log('complete')
      }
    })
  }

后退导航

通过 wx.navigateBack(Object object) 方法，关闭当前页面，返回上一页面或多级页面。其中 Object 参数对象的属性列表如下：

属性	类型	是否必填	说明
delta	number	是	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码如下：

结构绑定事件

<view bindtap='tapHandler'>前进</view>

在js中编写代码

tapHandler:function(){
   
    wx.navigateBack({
   
      delta: 1,//返回的页面数
      success:function(){
   //成功后的回调
        console.log('success')
      },
      fail:function(){
   //失败后的回调
        console.log('fail')
      },
      complete:function(){
   //不管成功还是失败都会回调
        console.log('complete')
      }
    })
  }

导航传参

声明式导航传参

navigator 组件的 url 属性用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间使用 ?分隔，参数键与参数值用 = 相连，不同参数用 & 分

隔

代码示例如下：

<navigator url=‘/pages/logs/logs?name=zs&age=20’>去logs页面</navigator>

编程式导航传参

wx.navigateTo(Object object) 方法的 object 参数中，url 属性用来指定需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分

隔，参数键与参数值用 = 相连，不同参数用 & 分隔。

代码示例如下：

wx.navigateTo({
   
  url: '/pages/logs/logs?name=zs&age=20',
})

页面接收导航传递过来的参数

不论是声明式导航还是编程式导航，最终导航到的页面可以在 onLoad 生命周期函数中接收传递过来的参数。

代码示例如下：

/**
* 生命周期函数--监听页面加载
*/
onLoad: function