微信小程序基础组件

VIP文章 Crush_you

已于 2022-11-05 08:56:26 修改

阅读量551

点赞数

分类专栏：微信小程序文章标签：微信小程序

于 2022-11-05 08:38:54 首次发布

本文链接：https://blog.csdn.net/Crush_you/article/details/127682857

版权

屏幕面前的你搜到这篇文章，全方位无死角的说明你是小白到不能再小白的人，请仔细观看下文，下面会教你用一些基础的组件，请详细阅读。

微信小程序提示框

wx.showToast({
   
    title: '成功',//提示信息
    icon: 'success',//图标自带图标：success/error/loading/none
    img:'xxxx/xxxx',//自定义图标
    duration: 2000,      // 延迟时间
    mask:false,//是否显示透明蒙层
});

微信小程序提示框

wx.showModal({
   
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
   
    if (res.confirm) {
   
      console.log('用户点击确定')
    } else if (res.cancel) {
   
      console.log('用户点击取消')
    }
  }
})

跳转页面的使用

//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
 wx.switchTab({
   
  url: '/index'
})

//关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
   
  url: 'test?id=1'
})

//关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.redirectTo({
   
  url: 'test?id=1'
})

//保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateTo({
   
  url: 'test?id=1',
  events: {
   
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
   
      console.log(data)
    },
    someEvent: