小程序中的界面跳转与HTTP请求

这篇具有很好参考价值的文章主要介绍了小程序中的界面跳转与HTTP请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、小程序界面跳转

1、wx.navigateTo

保留当前页面,只能打开非 tabBar 页面

wx.navigateTo({
  url: 'test?id=1',
}) 

2、wx.redirectTo

关闭卸载当前页面,只能打开非 tabBar 页面

wx.redirectTo({
  url: 'test?id=1'
})

3、wx.switchTab

关闭所有非tabbar页面, 只能打开 tabBar 页面

wx.switchTab({
  url: '/index'
})

4、wx.reLaunch

关闭卸载所有页面,可以打开任意页面

wx.reLaunch({
  url: 'test?id=1&course=123'
})

5、wx.navigateBack

返回前面的页面,可以指定返回多少页,如果用过redirectTo,那么被关闭的页面将返回不去

wx.navigateBack({
  delta: 2  //返回的页面数,如果 delta 大于现有页面数,则返回到首页。
})

二、路由跳转传参

路由跳转传参可以通过?的方式拼接参数。跳转到指定界面之后,可以在该页面的onLoad方法中的options参数(本身是个对象)拿到路由跳转的参数。

三、 HTTP的使用参数说明

1、参数说明

  • url 开发者服务器接口地址。注意这里需要配置域名
  • data 请求的参数
  • header 设置请求的 header,header 中不能设置 Referer,默认header[‘content-type’] = ‘application/json’
  • method(需大写)有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  • dataType json 回包的内容格式,如果设为json,会尝试对返回的数据做一次 JSON解析
  • success 收到开发者服务成功返回的回调函数。
  • fail 接口调用失败的回调函数
  • complete 接口调用结束的回调函数(调用成功、失败都会执行)

2、http请求的封装和作用

我们会发现,由于我们后台请求接口的数据格式都是表单格式的,每次发送请求会很麻烦,都需要指定请求头,另外我们这里回调函数的方式解决异步问题,写起来也可能会出现回调地域的问题。在这里我们如果想解决这些问题,就涉及到了http请求的封装。

作用:文章来源地址https://www.toymoban.com/news/detail-778177.html

  • 添加统一的请求配置
  • 可以添加请求拦截器和响应拦截器,在请求和响应之前加一些通用的处理

3、封装的实现

function request(options) {
  // 请求拦截器
  //  ...
  // 1. 加一些统一的参数,或者配置
  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
    options.url = "https://showme.myhope365.com" + options.url
  }
    // 默认的请求头
  let header = {
    "content-type": "application/x-www-form-urlencoded",
  };
  if (options.header) {
    header = {
      ...header,  
      ...options.header
    }
  }

  return new Promise((reslove, reject) => {
    // 调用接口
    wx.request({
      // 默认的配置
      // 加载传入的配置
      ...options,
      header,
      success(res) {
        // 响应拦截器,所有接口获取数据之前,都会先执行这里
        //  1. 统一的错误处理
        if (res.statusCode != 200) {
          wx.showToast({
            title: '服务器异常,请联系管理员',
          })
        }

        reslove(res)
      },
      fail(err) {
        reject(err)
       }
    })
  })
}

export function get(url, options = {}) {
  return request({
    url,
    ...options
  })
}

export function post(url, data, options = {}) {
  return request({
    url,
    data,
    method: "POST",
    ...options
  })
}

到了这里,关于小程序中的界面跳转与HTTP请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序页面跳转与传参

    页面跳转优先采用 navigator 组件 小程序提供了两种页面路由方式: a. navigator 组件 b.通过js进行页面跳转 可以通过页面跳转时将参数传递到对应页面 页面通过options接收参数 下面代码options.id以及options.title均是从上一个页面传递而来的参数

    2024年02月11日
    浏览(38)
  • Chrome浏览器中访问http会自动跳转https下,导致请求和文件不能正常访问

    网上查了很多解决方案,例如清楚缓存等等其他方法,都不能解决该问题 例如: 地址栏输入: chrome://net-internals/#hsts 找到底部 Delete domain security policies 一栏,输入想处理的域名,点击 delete 。 搞定了,再次访问http域名不再自动跳转https了。 点击地址栏旁边的锁 打开网站设置

    2024年02月02日
    浏览(54)
  • 网络原理 - HTTP / HTTPS(1)——http请求

    目录 一、认识HTTP协议 理解 应用层协议 二、fiddler的安装以及介绍 1、fiddler的安装 2、fiddler的介绍 http请求 三、HTTP 报文格式 1、http的请求 2、http的响应 五、认识URL (1)协议方案名 (2)登录信息(认证) (3)服务器地址 (4)服务器的端口号 (5)带层次的文件路径 (6)

    2024年04月16日
    浏览(84)
  • 网络原理 - HTTP / HTTPS(4)——构造http请求

    目录 一、postman 的下载安装以及简单介绍 1、下载安装 2、postman的介绍 二、通过 Java socket 构造 HTTP 请求         构造http请求的方式有两种: (1)通过代码构造 (有一点难度)        (2)通过第三方工具构造 (非常容易)。         下面介绍第三方工具构造http请求,这

    2024年04月17日
    浏览(43)
  • 微信小程序:navigateTo页面跳转与navigateBack返回上一页,并执行相关操作

     A页面:执行方法fn,跳转到B页面         跳转方法采用 wx.navigateTo ,跳转到新的页面,保留当前页面 B页面(路径为pages/test/test的页面): ①在某一方法中执行返回操作 wx.navigateBack({     delta: 1 }) ②刷新上一个页面 prevPage.onLoad(); ③调用上一个页面的设置值得方法  p

    2024年02月12日
    浏览(56)
  • Java中的HTTP POST请求

    Java中的HTTP POST请求 在Java中,我们经常需要使用HTTP协议进行网络通信。其中,POST请求是一种常用的方式,它允许我们向服务器发送数据并获取响应。本文将介绍如何在Java中发送HTTP POST请求,并提供相应的源代码示例。 首先,我们需要导入Java标准库中的相关类和接口。在J

    2024年02月07日
    浏览(35)
  • 计算机网络—HTTP基本概念、HTTPS、HTTP状态码、HTTP缓存、HTTP请求

    参考小林coding HTTP是超文本传输协议。所谓的超文本,就是超越了普通文本的文本,最关键的是有超链接,能从一个超文本跳转到另一个超文本。 HTML是最常见的超文本,本身是纯文字文件,但是内部使用很多标签定义图片、视频等链接,再经过浏览器的解释,呈现出来的就是

    2024年02月07日
    浏览(49)
  • HTTP 协议中的请求头参数

    本文对http头部字段:Connection、Content-Length、Transfer-Encoding 、Content-Encoding、Content-Type 等进行介绍。 POST https://1.26.1.10:22/reportquery/v1/cc HTTP/1.1 Accept: / User-Agent: abcd Host: 1.26.1.10:22 Connection: Keep-Alive Content-Type: application/json;charset=UTF-8 Content-Length: 170 SequenceId: 6 ProvinceId: 32 X-TerminalNo:

    2023年04月09日
    浏览(40)
  • 【Angular中的HTTP请求】- HttpClient 详解

            大多数前端应用都要通过 HTTP 协议与服务器通讯,才能下载或上传数据并访问其它后端服务。Angular 给应用提供了一个 HTTP 客户端 API,也就是 @angular/common/http 中的 HttpClient 服务类。         要想使用 HttpClient ,就要先导入 Angular 的 HttpClientModule 。一般都是在根

    2024年02月08日
    浏览(42)
  • HarmonyOS 发送http网络请求

    好 本文 我们来说 http请求 首先 我们要操作网络内容 需要申请权限 项目中找到 main目录下的module.json5 最下面加上 这里 我在本地写了一个get接口 大家可以想办法 弄一个后端接口 首先 我们编写一个组件雏形 我们导入 @ohos.net.http 然后 通过 createHttp 获取一个http对象 然后通过对

    2024年01月23日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包