微信小程序常用JS封装

最新推荐文章于 2024-09-03 11:01:15 发布

godShenzzZ

最新推荐文章于 2024-09-03 11:01:15 发布

阅读量217

点赞数

文章标签：微信小程序 javascript

本文链接：https://blog.csdn.net/qq_41261218/article/details/133907792

版权

本文介绍了微信小程序中的页面跳转功能，包括wx.switchTab用于切换tabBar页面，wx.redirectTo和wx.navigateTo的区别，以及如何使用wx.navigateBack返回上一页。同时，详细讲解了图片预览功能wx.previewImage的用法。

摘要由CSDN通过智能技术生成

1.页面跳转

wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

<button catchtap="toHandler" data-url="/pages/index/index">点击跳转</button>


  toHandler(e) {
    const url = e.currentTarget.dataset.url;
    if (!url) {
      wx.showToast({
        title: '敬请期待~',
        icon: "none"
      })
      return false;
    }
    this.urlHandler(url);
  },
  urlHandler(url, isRedirect = false) {
    // 此处 判断是否是tabbar页面
    if (url.indexOf("/pages/index/index") > -1 || url.indexOf("/pages/user/user")) {
      wx.switchTab({
        url,
      })
    } else {
      if (isRedirect) {
        wx.redirectTo({
          url
        })
      } else {
        wx.navigateTo({
          url
        })
      }
    }
  },

2.图片预览

wx.previewImage 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

<image data-current="{{cover}}" src="{{cover}}" bindtap="previewImage" />

  // 图片预览
  preview(e) {
    const current = e.currentTarget.dataset.current;
    const urls = e.currentTarget.dataset.urls || [current];
    wx.previewImage({
      current, // 当前显示图片的地址
      urls // 需要预览的图片列表
    })
  },