微信小程序实践页面跳转数据绑定 API调用

微信小程序开发涉及页面跳转、数据绑定和API调用等核心功能，下面通过代码示例和实践说明如何实现这些功能：

一、页面跳转

微信小程序提供多种页面跳转方式：

1. 保留当前页面跳转（可返回）

// 跳转到新页面，保留当前页面
wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=test', // 传递参数
})

2. 关闭当前页面跳转（不可返回）

wx.redirectTo({
  url: '/pages/home/home'
})

3. 接收页面参数

在目标页面的 onLoad 生命周期中接收参数：

Page({
  onLoad(options) {
    console.log(options.id);    // 输出 123
    console.log(options.name);  // 输出 test
  }
})

二、数据绑定

微信小程序使用 Mustache 语法（双大括号）实现数据动态渲染。

1. 定义数据

Page({
  data: {
    message: "Hello World",
    user: { name: "Alice", age: 25 },
    list: ["Apple", "Banana", "Cherry"]
  }
})

2. 在 WXML 中绑定数据

<view>{{message}}</view>
<view>{{user.name}} - {{user.age}}</view>
<view wx:for="{{list}}" wx:key="index">{{item}}</view>

3. 更新数据

通过 setData 方法修改数据并触发视图更新：

this.setData({
  message: "New Message",
  "user.age": 26  // 修改嵌套属性
})

三、API 调用

微信小程序提供丰富的原生 API，如网络请求、本地存储等。

1. 网络请求（wx.request）

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  data: { key: 'value' },
  success: (res) => {
    console.log('请求成功:', res.data);
    this.setData({ list: res.data });
  },
  fail: (err) => {
    console.error('请求失败:', err);
  }
})

2. 本地存储（wx.setStorage）

// 存储数据
wx.setStorageSync('key', 'value');

// 读取数据
const value = wx.getStorageSync('key');

3. 异步 API 封装（Promise）

使用 async/await 简化异步操作：

async function fetchData() {
  try {
    const res = await wx.request({
      url: 'https://api.example.com/data',
      method: 'GET'
    });
    this.setData({ list: res.data });
  } catch (err) {
    console.error(err);
  }
}

四、综合实践示例

场景：从列表页跳转到详情页，调用 API 加载数据

列表页 WXML

<view wx:for="{{items}}" wx:key="id" bindtap="navigateToDetail" data-id="{{item.id}}">
  {{item.title}}
</view>

列表页 JS

Page({
  data: { items: [] },
  onLoad() {
    wx.request({
      url: 'https://api.example.com/items',
      success: (res) => {
        this.setData({ items: res.data });
      }
    });
  },
  navigateToDetail(e) {
    const id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    });
  }
})

详情页 JS

Page({
  data: { detail: {} },
  onLoad(options) {
    const id = options.id;
    wx.request({
      url: `https://api.example.com/detail/${id}`,
      success: (res) => {
        this.setData({ detail: res.data });
      }
    });
  }
})

五、注意事项

页面栈限制
wx.navigateTo 最多保留 10 层页面栈，超限需使用 wx.redirectTo。
数据绑定性能
避免频繁调用 setData，复杂数据可局部更新：

   this.setData({ 'user.age': 26 });

API 安全域名
需在「小程序后台」配置请求的合法域名。

通过结合页面跳转、数据绑定和 API 调用，可以实现复杂的业务逻辑和流畅的用户体验。

微信小程序实践 页面跳转 数据绑定 API调用