浦东网站备案流程,中国会展公司排名前十的公司,学校做好网站建设目的,免费的网站空间微信小程序的路由系统和其他Web应用类似#xff0c;主要通过页面路径和URL参数进行页面导航和数据传递。下面详细介绍微信小程序路由的基本使用方法和相关技巧。
1. 基本页面导航
1.1 配置页面路径
在微信小程序的 app.json 文件中#xff0c;需要配置小程序的页面路径。这…微信小程序的路由系统和其他Web应用类似主要通过页面路径和URL参数进行页面导航和数据传递。下面详细介绍微信小程序路由的基本使用方法和相关技巧。
1. 基本页面导航
1.1 配置页面路径
在微信小程序的 app.json 文件中需要配置小程序的页面路径。这里定义了小程序中包含的所有页面路径。
{pages: [pages/index/index,pages/detail/detail]
}1.2 使用导航 API 跳转页面
微信小程序提供了多种导航 API可以在页面之间进行跳转。
wx.navigateTo保留当前页面跳转到应用内的某个页面使用 wx.navigateBack 可以返回到原页面wx.redirectTo关闭当前页面跳转到应用内的某个页面wx.switchTab跳转到指定的 tabBar 页面并关闭其他所有非 tabBar 页面wx.reLaunch关闭所有页面打开到应用内的某个页面 例子使用 wx.navigateTo 跳转页面 wx.navigateTo({url: /pages/detail/detail?id123nameJohn
});2. URL 参数传递
2.1 传递参数
在跳转页面时可以在 URL 中附加参数例如上面的例子中我们在 URL 中附加了 id 和 name 参数。
2.2 获取参数
在目标页面的 onLoad 方法中可以通过 options 参数获取传递过来的参数 Page({onLoad: function (options) {console.log(options.id); // 输出 123console.log(options.name); // 输出 John}
});3. 动态构建 URL 参数
有时需要传递动态生成的参数可以通过字符串拼接或模板字符串来实现
const id 123;
const name John;
wx.navigateTo({url: /pages/detail/detail?id${id}name${name}
});4. 复杂数据传递
如果需要传递复杂的数据例如对象或数组可以将数据转换为 JSON 字符串传递并在目标页面进行解析。
4.1 传递 JSON 字符串
const data {id: 123,name: John,items: [1, 2, 3]
};
wx.navigateTo({url: /pages/detail/detail?data${encodeURIComponent(JSON.stringify(data))}
});4.2 解析 JSON 字符串
在目标页面中通过 decodeURIComponent 和 JSON.parse 解析数据 Page({onLoad: function (options) {const data JSON.parse(decodeURIComponent(options.data));console.log(data.id); // 输出 123console.log(data.name); // 输出 Johnconsole.log(data.items);// 输出 [1, 2, 3]}
});5. 使用全局数据或本地存储
当传递的数据过大或复杂时URL 参数可能不是最佳选择。可以使用全局数据或本地存储。
5.1 使用全局数据
在 app.js 中定义全局数据
App({globalData: {userInfo: null}
});在页面中设置和获取全局数据
// 设置全局数据
const app getApp();
app.globalData.userInfo {id: 123,name: John
};// 获取全局数据
Page({onLoad: function () {const app getApp();const userInfo app.globalData.userInfo;console.log(userInfo.id); // 输出 123console.log(userInfo.name); // 输出 John}
});5.2 使用本地存储
通过 wx.setStorageSync 和 wx.getStorageSync 来存储和获取数据
// 设置本地存储
wx.setStorageSync(userInfo, {id: 123,name: John
});// 获取本地存储
Page({onLoad: function () {const userInfo wx.getStorageSync(userInfo);console.log(userInfo.id); // 输出 123console.log(userInfo.name); // 输出 John}
});
