小程序入门(四)——网络数据请求与页面导航

428 阅读2分钟

网络数据请求

1. 小程序中的网络数据请求的限制

  • 只能请求HTTPS类型的接口
  • 必须将接口的域名添加到信任列表中(要自行配置)

2. 配置request合法域名

注意事项:

(1)只支持HTTPS协议
(2)不能使用IP地址或localhost
(3)必须经过ICP备案
(4)一个月内最多修改5次

3.发起GET请求

调用微信小程序提供的wx.request()方法,可以发起GET数据请求

image.png

4.发起Post请求

image.png

5.在页面刚加载时请求数据

  • 只需要在onLoad调用要加载的函数即可

例如这个数字转换汉字的函数:

image.png

image.png

image.png

页面导航

  • 页面导航指的是页面之间的相互跳转。例如h5中的a标签
  1. 声明式导航 在页面上声明一个导航组件,通过点击 组件实现页面跳转

  2. 编程式导航 调用小程序的导航API,实现页面的跳转

声明式导航

1.导航到tabBar页面

  • 这里需要导航组件,指定url(要以/开头)为页面跳转地址,open-type为跳转的方式,值为switchTab

image.png

2.导航到非tabBar页面

  • 这里需要导航组件,指定url(要以/开头)为页面跳转地址,open-type(可省略)为跳转的方式,值为navigate

image.png

3. 后退导航

  • 这里需要导航组件,指定url(要以/开头)为页面跳转地址,open-type(为跳转的方式,值为navigateBack,delta的值为后退的层级

image.png

编程式导航

1.导航到tabBar页面

image.png

image.png

2.导航到非tabBar页面

  • 调用wx.navigateTo(),其他类似switchTab

image.png

3. 后退导航

  • 调用wx.navigateBack(),除delta属性控制层数(一层默认不写),其他类似switchTab

image.png

导航传参

1. 声明式导航传参

  • 导航组件的url属性用来指定将要跳转到的页面路径,可携带参数

    1. 参数和路径间使用?分隔
    2. 参数键与参数值用=连接
    3. 不同参数用&分隔

image.png 切换跳转界面的 image.png 查看参数

2.编程式导航传参

image.png

3.在onLoad中接收导航参数

  • 声明式和编程式导航传递的参数 image.png 这里为了方便使用在data内声明一个参数对象query,onLoad内给它赋值: image.png

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 1天,点击查看活动详情