微信小程序实战学习——小程序页面之间的跳转,发送请求

导读:本篇文章讲解 微信小程序学习总结(五)——小程序页面之间的跳转,发送请求,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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

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
  },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/12328.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!