微信开发工具

最新推荐文章于 2024-04-03 16:52:13 发布

红色波浪号

最新推荐文章于 2024-04-03 16:52:13 发布

阅读量227

点赞数 1

文章标签： javascript 前端小程序

本文链接：https://blog.csdn.net/m0_72815229/article/details/128123338

版权

本文介绍了微信小程序中常用的UI组件和交互功能，包括显示Toast提示、使用模态框进行用户确认、本地存储数据的异步和同步操作，以及不同类型的页面跳转方法如navigateTo、redirectTo、switchTab和navigateBack，帮助开发者实现更丰富的用户体验。

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

1.Toast

Page({
  onLoad: function() {
    wx.showToast({ // 显示Toast
      title: '已发送',
      icon: 'success',
      duration: 1500
    })
    // wx.hideToast() // 隐藏Toast
  }
})

2.模态框

Page({
  onLoad: function() {
    wx.showModal({
      title: '标题',
      content: '告知当前状态，信息和解决方法',
      confirmText: '主操作',
      cancelText: '次要操作',
      success: function(res) {
        if (res.confirm) {
          console.log('用户点击主操作')
        } else if (res.cancel) {
          console.log('用户点击次要操作')
        }
      }
    })
  }
})

3.本地存储

异步存储
    wx.setStorage({
      data: {name:"天亮教育",age:4},//需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
      key: 'list',//本地缓存中指定的 key
})
同步存储
wx.setStorageSync('list1', {name:"尚云科技",age:5})
读取本地数据
	在小程序中可以通过wx.getStorage/wx.getStorageSync将数据存储到本地。
异步操作
    wx.getStorage({
      key: 'list',
      success(res){
        console.log(res);
      }
    })
同步操作
const list = wx.getStorageSync('list')

4.小程序的界面跳转

wx.navigateTo
wx.navigateTo({
  url: 'test?id=1',
})
保留当前页面，只能打开非 tabBar 页面。
wx.redirectTo
wx.redirectTo({
  url: 'test?id=1'
})
关闭卸载当前页面，只能打开非 tabBar 页面。
wx.switchTab
wx.switchTab({
  url: '/index'
})
关闭所有非tabbar页面， 只能打开 tabBar 页面。
wx.reLaunch
wx.reLaunch({
  url: 'test?id=1'
})
关闭卸载所有页面，可以打开任意页面。
wx.navigateBack
wx.navigateBack({
  delta: 2  //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
})