微信小程序笔记

微信小程序笔记

1. 利用小程序提供的 API 跳转：

转自：微信小程序页面跳转方法总结

// 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，但是 redirectTo 
wx.navigateTo({
  url: 'page/home/home?user_id=111'
})

// 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

wx.navigateTo({
  url: 'page/home/home?user_id=111'　　// 页面 A
})

wx.navigateTo({
  url: 'page/detail/detail?product_id=222'　　// 页面 B
})

// 跳转到页面 A
wx.navigateBack({
  delta: 2
})


//返回上一页
wx.navigateBack({ 
    changed: true 
});

// 关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
  url: 'page/home/home?user_id=111'
})

// 跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。
wx.switchTab({
  url: 'page/index/index'
})

// 关闭所有页面，打开到应用内的某个页面。
wx.reLanch({
  url: 'page/home/home?user_id=111'
})

　2. wxml 页面组件跳转（可以通过设置open-type属性指明页面跳转方式）：

// navigator 组件默认的 open-type 为 navigate 
跳转到新页面
// redirect 对应 API 中的 wx.redirect 方法
在当前页打开
// switchTab 对应 API 中的 wx.switchTab 方法
切换 Tab
// reLanch 对应 API 中的 wx.reLanch 方法
关闭所有页面，打开到应用内的某个页面
// navigateBack 对应 API 中的 wx.navigateBack 方法
关闭当前页面，返回上一级页面或多级页面
 

 

---

向页面传递参数

转自：如何在微信小程序的页面间传递数据？

全局变量实际上是定义了一个全局的对象，并在每个页面中引入。

在初始化代码的时候，小程序会读取一个 app.js的文件，在这里我们可以定义我们所需要的全局变量。

然后在页面中，可以通过 getApp()方法获取到全局应用对象，可以对全局变量进行读取并更改：

由于 app.js在项目中是用来做基础配置的，因此不建议将很多变量放在这里配置。一般情况下会将一些持久化的常量配置在这里，对于经常需要变动的量不建议用这个方法。

使用本地缓存

本地缓存是微信小程序提供的一个功能， 可以将用户产生的数据做本地的持久化，类似于 NoSQL，可以进行读取和修改的操作。

那么在不同的页面之间，如何利用它，进行数据的交互呢？

假设我们在 A 页面保存了用户的信息。

这样做，这个数据就存在了本地。当在 B 页面需要使用的时候，可以直接的获取到数据池中的数据，并进行 CRUD 操作：

需要注意的是，在 回到 A 页面的时候，小程序需要重新读取数据。这时候，可以选择放在生命周期的 onShow中对数据重新加载

父级往子级页面（模板）的数据传递

我们通常会在页面之间进行跳转、重定向的操作。 这时候，我们可以选择将部分数据放在 url里面，并在新页面 的时候进行初始化。

在 D 页面中，我们可以这样接收到到所传进来的参数：

wx.navigateTo和 wx.redirectTo不允许跳转到 tab 所包含的页面，只能用 wx.switchTab跳转。需要注意的是， wx.switchTab中的 url不能传参数。

微信新提供的 wx.reLaunch接口可以传入参数。

---