微信小程序学习总结(五)——小程序页面之间的跳转，发送请求

一、小程序页面之间的跳转

1.使用navigayor标签

1)小程序区别于html的a标签，小程序中没有a标签，使用的是navigator替代html的a标签，navigator标签使用的是相对路径

2)页面间传值(类似于html的a标签使用get请求的方式在url中使用?以及&拼接参数及参数值)

demo2页面获得参数是在js文件中的页面初始化函数onload(options)获得：

结果：

3)跳转页面无返回

在navigator标签内使用redirect属性即可达到跳转页面无返回的效果，redirector的默认值是true,所以属性值可加可不加

4)navigator点击效果

navigator默认点击高亮效果，可以自我设置效果展示，在wxss文件中对应的标签使用hover-class定义展示效果

tips:任意一个非navigator标签可以在标签的样式上使用cursor:pointer来定义展示点击高亮的效果，但此时的高亮效果只能是默认展示的效果，无法自定义!

2.可以使用事件结合api的方式实现页面的跳转

<button type="primary" bindtap="goNextPage">使用事件跳转demo2</button>

在js中：可以使用navigateTo(有返回)或者redirectTo(无返回实现跳转)

Page({
  goNextPage:function(){
    //跳转页面
    wx.navigateTo({
      url: '../demo2/demo2',
    })

    //相当于navigator标签加上redirect
    // wx.redirectTo({
    //   url: '../demo2/demo2',
    // })
  }
})

也可使用navigateBack实现返回的跳转方式：

backHandler :function(){
    // wx.navigateBack({})//默认的是返回上一级页面

    //指定delta就是返回指定层数(当前页面往回倒几层)
    wx.navigateBack({
      delta: 2  //当前页面往回倒2层
    })
 }

tips：

1.若navigateBack函数中的delta指定的数太大(超出打开历史页面的记录数)的话会返回到打开的第一页

2.此时带参数与navigator传参一致使用?以及&在url中拼接

二、发送请求

注：

1.小程序开发区别于web，在web开发中可以使用ajax请求，小程序使用wx.request的请求api，小程序没有跨域之说

2.小程序开发时使用异步请求wx.request中的url，其中url必须满足必须在后台配置相关路径，必须是https协议，域名必须备案这三个条件；若实在不配置的话，可以忽略(只能在开发环境中，无法预览更别说生产)

onLoad: function (options) {
    wx.request({
      //此处没有跨域的概念
      url: 'https://douban.uieee.com/v2/music/search?q=booty',
      header:{
        'Content-Type':'json'
      },
      success: function(res){
        console.log(res)
      }
    })
    //1.发送异步请求不再是web的ajax而是wx.request
    //2.没有跨域
    //3.请求的地址必须在管理后台添加白名单
    //4.域名必须备案，服务端必须采用https
  },