微信小程序wx

给tabber设置红点

wx.showTabBarRedDot({
      index:2,
 })

给tabber设置BarBadge

wx.setTabBarBadge({
      index: 1,
      text: '1'
 })

红点和BarBadge 一次只能生效一个

交互

弹窗

wx.showToast({
  title: '成功', // 标题
  icon: 'success', // 小图标
  duration: 2000, // 显示多久
  // image 自定义图标的本地路径，image 的优先级高于 icon
  // mask  默认是false 是否显示透明蒙层，防止触摸穿透	
}) 

拟态框

wx.showModal({
  title: '提示', // 标题
  content: '这是一个模态弹窗', // 内容
  success (res) { // 成功回调
    if (res.confirm) { // res.confirm里面是Boolean值
      console.log('用户点击确定')
    } else if (res.cancel) { // res.cancel里面是Boolean值
      console.log('用户点击取消')
    }
  }
  // showCancel 是否显示取消按钮
  // cancelText 取消按钮里面的文本内容 默认 “取消”
  // cancelColor 取消按钮的颜色，必须是 16 进制格式的颜色字符串
  // confirmText 确认按钮的文本内容 默认“确认” ，最多 4 个字符
  // confirmColor 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
  
}) 

显示加载

wx.showLoading({
  title: '加载中', //标题
  // mask 在加载动画时，是否打开遮罩层 默认值“false” 是否显示透明蒙层，防止触摸穿透
})

setTimeout(function () {
  wx.hideLoading() // 用来关闭Loading的一个函数
}, 2000)

打开活动面板

wx.showActionSheet({
  itemList: ['A', 'B', 'C'], // 活动面板中的内容
  // itemColor 按钮的文字颜色
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

给navtitle添加一个加载效果

wx.showNavigationBarLoading({
	success(){},
	fail(){},
	complete(){
		setTimeOut(()=>{
			wx.hideNavigationBarLoading()
		},200)
	}
})

给nav设置标题

wx.setNavigationBarTitle({
  title: '当前页面'
})

给bar设置颜色

wx.setNavigationBarColor({
  frontColor: '#ffffff',
  // 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
  backgroundColor: '#454842',
  // 背景颜色值，有效值为十六进制颜色
  animation: { // 添加动画效果
    duration: 400, // 演出动画的时间
    timingFunc: 'easeIn' // 动画变化方式
  }
  // timingFunc
  // 'linear'    动画从头到尾的速度是相同的	
  // 'easeIn'	 动画以低速开始	
  // 'easeOut' 	 动画以低速结束	
  // 'easeInOut' 动画以低速开始和结束	
})

获取当前界面的一些属性（比如当前的高和宽）

console.log(wx.getSystemInfoSync());

隐藏子页面的返回按钮（7.0.7开始生效）

wx.hideHomeButton(); // 要写在onShow中

设置下拉背景字体的样式

wx.setBackgroundTextStyle({
  textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark
})