微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解

一、前言

微信小程序开发可以将用户服务端的代码结合小程序客户端的特点来开发应用。小程序语法兼容与Web不同，可说是一门独特的技术。在日常开发中，跳转页面、传递参数、获得数据操作是常见的需求。本文将带你熟悉小程序中跳转页面、传递参数和数据获取的操作。

二、跳转页面

小程序跳转页面的方式有两种：通过<navigator>组件和通过wx.navigateTo方法。

1. <navigator>组件跳转页面

在小程序中，使用<navigator>组件可实现页面的跳转。当用户点击该组件时，将会跳转到对应的页面。

示例代码：

<!-- index.wxml -->

<navigator url="/pages/detail/detail">去详情页</navigator>

在以上代码中，我们使用了<navigator>组件，并设置了url属性为/pages/detail/detail，表示点击该组件后将会跳转到 detail 页面。

2. wx.navigateTo方法跳转页面

使用wx.navigateTo方法可实现页面跳转，该方法可传递参数。

示例代码：

// index.js

wx.navigateTo({
  url: '/pages/detail/detail?name=Nick&age=18',
})

在以上代码中，我们使用了wx.navigateTo方法，传递了参数name和age，表示detail页面可以通过options参数获取到这些参数值。

// detail.js

Page({
  onLoad: function (options) {
    console.log(options.name) // 输出：Nick
    console.log(options.age) // 输出：18
  }
})

三、传递参数

上一节中介绍了如何实现页面跳转，本节我们将学习如何在页面之间传递参数。

在使用wx.navigateTo方法跳转页面时，可以通过在url参数中添加参数来传递参数。

示例代码：

wx.navigateTo({
  url: '/pages/detail/detail?id=1',
})

在跳转后的页面中，我们可以在onLoad生命周期函数中获取到传递的参数：

Page({
  onLoad: function (options) {
    console.log(options.id) // 输出：1
  }
})

在页面中，我们也可以通过setData方法来传递参数。当然，这需要在全局变量中存储数据。

示例代码：

// index.js

wx.setStorageSync('data', 'Hello World!')

wx.navigateTo({
  url: '/pages/detail/detail',
})

在跳转后的页面中，我们可以通过wx.getStorageSync方法来获取数据。

// detail.js

Page({
  onLoad: function () {
    console.log(wx.getStorageSync('data')) // 输出：Hello World!
  }
})

四、获得数据

1. 发送请求

小程序可以通过wx.request、wx.uploadFile等方法向服务端发送请求。

示例代码：

wx.request({
  url: 'https://api.example.com/data',
  success: function (res) {
    console.log(res.data) // 服务器返回的数据
  }
})

在以上代码中，我们向服务端发送请求，并在成功回调函数中输出服务器返回的数据。

2. 关于异步和回调

在小程序中，请求数据的函数都是异步的。如果需要在请求完成后操作服务器返回的数据，需要使用回调函数。

示例代码：

function getData(callback) {
  wx.request({
    url: 'https://api.example.com/data',
    success: function (res) {
      callback(res.data)
    }
  })
}

getData(function (data) {
  console.log(data) // 服务器返回的数据
})

在以上代码中，我们定义了一个getData函数，通过回调函数获取服务器返回的数据。

五、总结

本文详细介绍了微信小程序中跳转页面、传递参数和数据获取的操作。通过以上的学习，我们相信你已经对小程序开发有了更深入的认识，并且能够在日常开发中灵活运用这些语法。