便捷工具 | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架

# 便捷工具

# 平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

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

# os()

此方法用于返回平台的名称，为小写的ios或android

import { os } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  console.log(os());
});

import { os } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    console.log(os());
  }
}

# sys()

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

import { sys } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  console.log(sys());
});

import { sys } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    console.log(sys());
  }
}

# platform

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

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

使用：

import { platform } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  // 返回'h5'
  console.log(platform);
  
  // 条件判断
  if(platform === 'app') {
    // ...
  } else if(platform === 'nvue') {
    // ...
  }
});

import { platform } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    // 返回'h5'
    console.log(this.$u.platform);
    
    // 条件判断
    const { platform } = this.$u
    if(platform === 'app') {
      // ...
    } else if(platform === 'nvue') {
      // ...
    }
  }
}

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

平台	返回值
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的大小，如果其在min和max之间，则不变；如果其小于min，则取min值；如果其大于max，则取max值。

import { range } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  // 最终结果为5
  console.log(range(1, 5, 8));
  
  // 最终结果为4
  console.log(range(1, 5, 4));
});

import { range } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    // 最终结果为5
    console.log(range(1, 5, 8));
    
    // 最终结果为4
    console.log(range(1, 5, 4));
  }
}

# getPx(value [, unit = false])

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

带upx和rpx单位，返回使用uni.upx2px转换后，为px单位的结果
带px单位，返回去掉px单位的具体数值
具体数值，如5，将会返回5

import { getPx } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  // 返回10
  console.log(getPx('10rpx'));
  
  // 返回12
  console.log(getPx('12px'));
  
  // 返回14
  console.log(getPx(14));
  
  // 返回类似10px的结果
  console.log(getPx('20rpx', true));
});

import { getPx } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    // 返回10
    console.log(getPx('10rpx'));
    
    // 返回12
    console.log(getPx('12px'));
    
    // 返回14
    console.log(getPx(14));
    
    // 返回类似10px的结果
    console.log(getPx('20rpx', true));
  }
}

# sleep(value)

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

value，数值，单位默认为ms

import { sleep } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(async () => {
  // 300ms后触发回调
  await sleep(300);
  console.log('定时结束');
});

import { sleep } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    // 300ms后触发回调
    sleep(300).then(() => {
      console.log('定时结束');
    });
  }
}

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

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

instance，实例，传this即可，不可修改
name，可选，页面或者父组件的name属性值，不传则默认查找页面(最顶层)的实例

<!-- 页面内容 -->
<template>
  <child></child>
</template>

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

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

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

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

style，样式，可为对象或者字符串形式
target，可选，转换结果的类型，默认为object；如果为object则返回对象形式的结果，如果为string则返回字符串形式的结果

import { addStyle } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  // 将会返回'padding: 10px; margin: 20px'
  const style1 = { padding: '10px', margin: '20px' }
  console.log(addStyle(style1, 'string'));
  
  // 将会返回{ padding: '10px', margin: '20px' }
  const style2 = "padding: 10px; margin: 20px"
  console.log(addStyle(style2));
});

import { addStyle } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    // 将会返回'padding: 10px; margin: 20px'
    const style1 = { padding: '10px', margin: '20px' }
    console.log(addStyle(style1, 'string'));
    
    // 将会返回{ padding: '10px', margin: '20px' }
    const style2 = "padding: 10px; margin: 20px"
    console.log(addStyle(style2));
  }
}

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

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

value，可为5，5px，6rpx，100%等格式的值
unit，可选，默认为px，如果第一个参数为数值，则拼接上此单位

import { addUnit } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  // 返回5px
  console.log(addUnit(5));
  console.log(addUnit('5px'));
  
  // 返回5rpx
  console.log(addUnit(5, 'rpx'));
});

import { addUnit } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    // 返回5px
    console.log(addUnit(5));
    console.log(addUnit('5px'));
    
    // 返回5rpx
    console.log(addUnit(5, 'rpx'));
  }
}

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

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

value，需要格式化的金额数值，只能为数值，如300.52，300，而不能为诸如带千分位的写法3,000.5
decimals，可选，格式化后小数点的位数，默认为0，小数最后一位会进行四舍五入
decimalPoint，可选，小数点的符号，默认为.
thousandsSeparator，可选，千分位分隔符，默认为英文逗号,

import { priceFormat } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  // 返回3,002.37
  console.log(priceFormat(3002.365, 2));
  
  // 返回3,002
  console.log(priceFormat(3002.365));
});

import { priceFormat } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    // 返回3,002.37
    console.log(priceFormat(3002.365, 2));
    
    // 返回3,002
    console.log(priceFormat(3002.365));
  }
}

# page()

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

import { page } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  // 返回类似/pages/example/components的结果
  console.log(page());
});

import { page } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    // 返回类似/pages/example/components的结果
    console.log(page());
  }
}

# pages() 2.0.22

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

import { pages } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  console.log(pages());
});

import { pages } from '@/uni_modules/uview-plus';

export default {
  onLoad() {
    console.log(pages());
  }
}

← 介绍 Http请求 →