# 便捷工具

此专题内容为一些方便用户快速,便捷使用的小工具,可能是uView的一些方法的简易版,或者对uni的一些方法进行二次封装,方便用户 快速使用。

# os()

此方法用于返回平台的名称,为小写的iosandroid

uni.$u.os()
✅ Copy success!

# sys()

此方法用于获取设备的信息,相当于uni.getSystemInfoSync()的效果

uni.$u.sys()
✅ Copy success!

# platform

属性用于获取当前运行的平台名称,相较于uni-app系统自带的条件编译的区别是,此方式让我们可以通过jsif | else if进行判断, 您可以结合实际场景进行使用。

  • 注意:此属性返回的结果,和uni-app的条件编译名称有差别,并且结果都为小写。

使用前配置:如果您的项目为vue-cli模式,必须要在根目录vue.config.js进行配置才有效,如下:

// vue.config.js,如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']
}
✅ Copy success!

使用:

// 返回'h5'
uni.$u.platform

// 条件判断
const { platform } = uni.$u
if(platform === 'app') {
	......
} else if(platform === 'nvue') {
	......
}
✅ Copy success!

# 各平台对应返回值如下表:

平台 返回值
VUE3,HBuilderX 3.2.0+ vue3
VUE2 vue2
App plus
App nvue nvue
H5 h5
微信小程序 weixin
支付宝小程序 alipay
百度小程序 baidu
字节跳动小程序、飞书小程序 toutiao
QQ小程序 qq
快手小程序 kuaishou
360小程序 360
微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序 mp
快应用通用(包含联盟、华为) webview
快应用联盟 webview-union
快应用华为 webview-huawei

# range(min, max, value)

此方法用于限制value的大小,如果其在minmax之间,则不变;如果其小于min,则取min值;如果其大于max,则取max值。

// 最终结果为5
uni.$u.range(1, 5, 8)

// 最终结果为4
uni.$u.range(1, 5, 4)
✅ Copy success!

# getPx(value [, unit = false])

此方法用于返回带单位的值的数值结果,如果第二个参数为true,返回的结果将会带上px的单位;可接受的值如下:

  • upxrpx单位,返回使用uni.upx2px转换后,为px单位的结果
  • px单位,返回去掉px单位的具体数值
  • 具体数值,如5,将会返回5
// 返回10
uni.$u.getPx('10rpx')

// 返回12
uni.$u.getPx('12px')

// 返回14
uni.$u.getPx(14)

// 返回类似10px的结果
uni.$u.getPx('20rpx', true)
✅ Copy success!

# sleep(value)

延时一定时间进行回调,类似于promise的使用方式

  • value,数值,单位默认为ms
// 300ms后触发回调
uni.$u.sleep(300).then(() => {
	console.log('定时结束')
})
✅ Copy success!

# $parent.call(instance [, name])

用于抹平各端差异,在组件中向上获取父组件或者页面的实例。

  • instance,实例,传this即可,不可修改
  • name,可选,页面或者父组件的name属性值,不传则默认查找页面(最顶层)的实例
// 页面内容
<template>
	<child></child>
</template>

<script>
export default {
	// 此处为页面级,所以name值可选
	name: 'page',
	......
}
</script>

// 组件内容
<script>
export default {
	mounted() {
		// 将会得到父页面的this实例
		uni.$u.$parent.call(this, 'page')
	}
}
</script>
✅ Copy success!

# addStyle(style [, target = 'object'])

用于将字符串形式的内联样式样式转为对象形式,或者将对象形式的样式写法转为字符串形式。

  • style,样式,可为对象或者字符串形式
  • target,可选,转换结果的类型,默认为object;如果为object则返回对象形式的结果,如果为string则返回字符串形式的结果
// 将会返回'padding: 10px; margin: 20px'
const style = { padding: '10px', margin: '20px' }
uni.$u.addStyle(style, 'string')

// 将会返回{ padding: '10px', margin: '20px' }
const style = "padding: 10px; margin: 20px"
uni.$u.addStyle(style)
✅ Copy success!

# addUnit(value [, unit = 'px'])

用于给值加上单位,如果值已有单位,则直接原样返回,如果值为数值,则加上unit参数的单位。

  • value,可为55px6rpx100%等格式的值
  • unit,可选,默认为px,如果第一个参数为数值,则拼接上此单位
// 返回5px
uni.$u.addUnit(5)
uni.$u.addUnit('5px')

// 返回5rpx
uni.$u.addUnit(5, 'rpx')
✅ Copy success!

# priceFormat(value [, decimals = 0 [, decimalPoint = '.' [, thousandsSeparator = ',']]])

此方法可用于对数值形式的金额进行格式化

  • value,需要格式化的金额数值,只能为数值,如300.52300,而不能为诸如带千分位的写法3,000.5
  • decimals,可选,格式化后小数点的位数,默认为0,小数最后一位会进行四舍五入
  • decimalPoint,可选,小数点的符号,默认为.
  • thousandsSeparator,可选,千分位分隔符,默认为英文逗号,
// 返回3,002.37
uni.$u.priceFormat(3002.365, 2)

// 返回3,002
uni.$u.priceFormat(3002.365)
✅ Copy success!

# page()

此方法用于获取当前页面的路径,返回的路径以/开头。

// 返回类似/pages/example/components的结果
uni.$u.page()
✅ Copy success!

# pages() 2.0.22

本方法为getCurrentPages()的封装,用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

uni.$u.pages()
✅ Copy success!
本站由 提供CDN及云存储服务