微信小程序开发vlog

最新推荐文章于 2025-05-21 23:45:20 发布

原创最新推荐文章于 2025-05-21 23:45:20 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

18 篇文章

订阅专栏

本文档介绍了微信小程序中的图片预览功能，重点讲解了wx.previewImage()的方法使用，以及如何处理iOS系统下小程序内部图片无法显示的问题。此外，还详细讨论了自定义组件的注册和页面跳转的多种方式，包括wx.switchTab(), wx.reLaunch(), wx.redirectTo()和wx.navigateTo()，以及页面路由中关于文案空格显示的技巧。" 121012703,11344054,理解递推算法：从斐波那契到数的划分,"['算法', '排序算法', '递推']

1:图片预览

wx.previewImage();

data-src必需为网络（http）链接，小程序内部图片在ios系统下无法显示；

文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html

示例：

wxml:

<image src="" mode="widthFix" data-src=" " bindtap="previewImage"></image>

js:

  previewImage: function (e) {
    var current = e.target.dataset.src;
    if (current){
      wx.previewImage({
        current: current,
        urls: [current],
      })
    }
  },

2：有关自定义组件

如果多个页面都有运用到此组件，可直接在app.json内注册，这样可以直接运用于多个页面：

  "usingComponents": {
    "kefu": "/components/kefu/kefu"
  }

3:页面的跳转(路由)

文档见：https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html

tabbar页面是指：

app.json内"tabBar":{}内注册的页面

App.WxService.navigateTo(url，{所带参数})

  navigateTo(e) {
    App.WxService.navigateTo('/pages/details/details', {
      id: e.currentTarget.dataset.id,
    })
  },

wx.switchTab(Object object):跳至tabbar页面，路径后不能带参数，并关闭其他所有非 tabBar 页面

    wx.switchTab({
      url: '/pages/details/details',
      success(res) {
        console.log('跳转成功')
      },
      fail(res) {
        console.log('失败')

      },
      complete(res) {
        console.log('完成')

      },
    })

wx.reLaunch(Object object):跳至非tabbar页面，关闭所有页面；

wx.reLaunch({
  url: 'test?id=1'
})

wx.redirectTo(Object object):跳至非tabbar页面，关闭当前页面

wx.redirectTo({
  url: 'test?id=1'
})

wx.navigateTo(Object object)：保留当前(最多10层)，页面会被加入栈堆（页面数据保留不被删除），跳至非tabbar页面

  navigateTo(e) {
    wx.navigateTo({
     url: '/pages/details/details?id='+e.currentTarget.dataset.id,
    })
  },

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

var pages = getCurrentPages， //获取页面栈
     currpage = pages[pages.length - 1], //当前页面
     prevPage = pages[pages.length - 2]; //上一个页面（父页面）
prevPage.setData({
    id : id
})  // 对上一个页面直接调用setData进行数据修改绑定

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

4:文案空格显示

组件需要是：<text>，添加space属性：ensp nbsp emsp

<text space="nbsp">  {{item.mobile}}</text>