合同小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

464 lines
12 KiB

  1. # lime-shared 工具库
  2. - 本人插件的几个公共函数
  3. - 按需引入
  4. ## 安装
  5. 在插件市场导入即可
  6. ## 文档
  7. [shared](https://limex.qcoon.cn/shared/overview.html)
  8. ## 使用
  9. 按需引入只会引入相关的方法,不要看着 插件函数列表多 而占空间,只要不引用不会被打包
  10. ```js
  11. import {getRect} from '@/uni_modules/lime-shared/getRect'
  12. ```
  13. ## 目录
  14. + [getRect](#api_getRect): 获取节点尺寸信息
  15. + [addUnit](#api_addUnit): 将未带单位的数值添加px,如果有单位则返回原值
  16. + [unitConvert](#api_unitConvert): 将带有rpx|px的字符转成number,若本身是number则直接返回
  17. + [canIUseCanvas2d](#api_canIUseCanvas2d): 环境是否支持使用 canvas 2d
  18. + [getCurrentPage](#api_getCurrentPage): 获取当前页
  19. + [base64ToPath](#api_base64ToPath): 把base64的图片转成临时路径
  20. + [pathToBase64](#api_pathToBase64): 把图片的临时路径转成base64
  21. + [sleep](#api_sleep): async 内部程序等待一定时间后再执行
  22. + [throttle](#api_throttle): 节流
  23. + [debounce](#api_debounce): 防抖
  24. + [random](#api_random): 返回指定范围的随机数
  25. + [range](#api_range): 生成区间数组
  26. + [clamp](#api_clamp): 夹在min和max之间的数值
  27. + [floatAdd](#api_floatAdd): 返回两个浮点数相加的结果
  28. + [fillZero](#api_fillZero): 补零,如果传入的是个位数则在前面补0
  29. + [exif](#api_exif): 获取图片exif
  30. + [selectComponent](#api_selectComponent): 获取页面或当前实例的指定组件
  31. + [createAnimation](#api_createAnimation): uni.createAnimation
  32. + [animation](#api_animation): 数值从一个值到另一个值的过渡
  33. + [camelCase](#api_camelCase): 字符串转换为 camelCase 或 PascalCase 风格的命名约定
  34. + [kebabCase](#api_kebabCase): 将字符串转换为指定连接符的命名约定
  35. + [closest](#api_closest): 在给定数组中找到最接近目标数字的元素
  36. + [shuffle](#api_shuffle): 将给定的数组打乱
  37. + [isBase64](#api_isBase64): 判断字符串是否为base64
  38. + [isNumber](#api_isNumber): 检查一个值是否为数字类型
  39. + [isNumeric](#api_isNumeric): 检查一个值是否为数字类型或表示数字的字符串
  40. + [isString](#api_isString): 检查一个值是否为字符串类型
  41. + [composition-api](#api_composition-api): 为兼容vue2
  42. ## Utils
  43. ### getRect <a id="api_getRect"></a>
  44. - 返回节点尺寸信息
  45. ```js
  46. // 组件内需要传入上下文
  47. // 如果是nvue 则需要在节点上加与id或class同名的ref
  48. getRect('#id',this).then(res => {})
  49. ```
  50. ##### 兼容性
  51. | uni-app | uni-app x |
  52. |------------|----------------------------------|
  53. | √ | √ |
  54. ### addUnit <a id="api_addUnit"></a>
  55. - 将未带单位的数值添加px,如果有单位则返回原值
  56. ```js
  57. addUnit(10)
  58. // 10px
  59. ```
  60. ##### 兼容性
  61. | uni-app | uni-app x |
  62. |------------|----------------------------------|
  63. | √ | √ |
  64. ### unitConvert <a id="api_unitConvert"></a>
  65. - 将带有rpx|px的字符转成number,若本身是number则直接返回
  66. ```js
  67. unitConvert('10rpx')
  68. // 5 设备不同 返回的值也不同
  69. unitConvert('10px')
  70. // 10
  71. unitConvert(10)
  72. // 10
  73. ```
  74. ##### 兼容性
  75. | uni-app | uni-app x |
  76. |------------|----------------------------------|
  77. | √ | √ |
  78. ### canIUseCanvas2d <a id="api_canIUseCanvas2d"></a>
  79. - 环境是否支持使用 canvas 2d
  80. ```js
  81. canIUseCanvas2d()
  82. // 若支持返回 true 否则 false
  83. ```
  84. ##### 兼容性
  85. | uni-app | uni-app x |
  86. |------------|----------------------------------|
  87. | √ | √ |
  88. ### getCurrentPage <a id="api_getCurrentPage"></a>
  89. - 获取当前页
  90. ```js
  91. const page = getCurrentPage()
  92. ```
  93. ##### 兼容性
  94. | uni-app | uni-app x |
  95. |------------|----------------------------------|
  96. | √ | √ |
  97. ### base64ToPath <a id="api_base64ToPath"></a>
  98. - 把base64的图片转成临时路径
  99. ```js
  100. base64ToPath(`xxxxx`).then(res => {})
  101. ```
  102. ##### 兼容性
  103. | uni-app | uni-app x |
  104. |------------|----------------------------------|
  105. | √ | √ |
  106. ### pathToBase64 <a id="api_pathToBase64"></a>
  107. - 把图片的临时路径转成base64
  108. ```js
  109. pathToBase64(`xxxxx/xxx.png`).then(res => {})
  110. ```
  111. ##### 兼容性
  112. | uni-app | uni-app x |
  113. |------------|----------------------------------|
  114. | √ | √ |
  115. ### sleep <a id="api_sleep"></a>
  116. - 睡眠,让 async 内部程序等待一定时间后再执行
  117. ```js
  118. async next () => {
  119. await sleep(300)
  120. console.log('limeui');
  121. }
  122. ```
  123. ##### 兼容性
  124. | uni-app | uni-app x |
  125. |------------|----------------------------------|
  126. | √ | √ |
  127. ### throttle <a id="api_throttle"></a>
  128. - 节流
  129. ```js
  130. throttle((nama) => {console.log(nama)}, 200)('limeui');
  131. ```
  132. ##### 兼容性
  133. | uni-app | uni-app x |
  134. |------------|----------------------------------|
  135. | √ | √ |
  136. ### debounce <a id="api_debounce"></a>
  137. - 防抖
  138. ```js
  139. debounce((nama) => {console.log(nama)}, 200)('limeui');
  140. ```
  141. ##### 兼容性
  142. | uni-app | uni-app x |
  143. |------------|----------------------------------|
  144. | √ | √ |
  145. ### random <a id="api_random"></a>
  146. - 返回指定范围的随机数
  147. ```js
  148. random(1, 5);
  149. ```
  150. ##### 兼容性
  151. | uni-app | uni-app x |
  152. |------------|----------------------------------|
  153. | √ | √ |
  154. ### range <a id="api_range"></a>
  155. - 生成区间数组
  156. ```js
  157. range(0, 5)
  158. // [0,1,2,3,4,5]
  159. ```
  160. ##### 兼容性
  161. | uni-app | uni-app x |
  162. |------------|----------------------------------|
  163. | √ | √ |
  164. ### clamp <a id="api_clamp"></a>
  165. - 夹在min和max之间的数值,如小于min,返回min, 如大于max,返回max,否侧原值返回
  166. ```js
  167. clamp(0, 10, -1)
  168. // 0
  169. clamp(0, 10, 11)
  170. // 10
  171. clamp(0, 10, 9)
  172. // 9
  173. ```
  174. ##### 兼容性
  175. | uni-app | uni-app x |
  176. |------------|----------------------------------|
  177. | √ | √ |
  178. ### floatAdd <a id="api_floatAdd"></a>
  179. - 返回两个浮点数相加的结果
  180. ```js
  181. floatAdd(0.1, 0.2) // 0.3
  182. ```
  183. ##### 兼容性
  184. | uni-app | uni-app x |
  185. |------------|----------------------------------|
  186. | √ | √ |
  187. ### fillZero <a id="api_fillZero"></a>
  188. - 补零,如果传入的是`个位数`则在前面补0
  189. ```js
  190. fillZero(9);
  191. // 09
  192. ```
  193. ##### 兼容性
  194. | uni-app | uni-app x |
  195. |------------|----------------------------------|
  196. | √ | √ |
  197. ### exif <a id="api_exif"></a>
  198. - 获取图片exif
  199. - 支持临时路径、base64
  200. ```js
  201. uni.chooseImage({
  202. count: 1, //最多可以选择的图片张数
  203. sizeType: "original",
  204. success: (res) => {
  205. exif.getData(res.tempFiles[0], function() {
  206. let tagj = exif.getTag(this, "GPSLongitude");
  207. let Orientation = exif.getTag(this, 'Orientation');
  208. console.log(tagj, Orientation)
  209. })
  210. }
  211. })
  212. ```
  213. ##### 兼容性
  214. | uni-app | uni-app x |
  215. |------------|----------------------------------|
  216. | √ | x |
  217. ### selectComponent <a id="api_selectComponent"></a>
  218. - 获取页面或当前实例的指定组件,会在页面或实例向所有的节点查找(包括子组件或子子组件)
  219. - 仅vue3,vue2没有测试过
  220. ```js
  221. // 当前页面
  222. const page = getCurrentPage()
  223. selectComponent('.custom', {context: page}).then(res => {
  224. })
  225. ```
  226. ##### 兼容性
  227. | uni-app | uni-app x |
  228. |------------|----------------------------------|
  229. | √ | x |
  230. ### createAnimation <a id="api_createAnimation"></a>
  231. - 创建动画,与uni.createAnimation使用方法一致,只为了抹平nvue
  232. ```html
  233. <view ref="ball" :animation="animationData"></view>
  234. ```
  235. ```js
  236. const ball = ref(null)
  237. const animation = createAnimation({
  238. transformOrigin: "50% 50%",
  239. duration: 1000,
  240. timingFunction: "ease",
  241. delay: 0
  242. })
  243. animation.scale(2,2).rotate(45).step()
  244. // nvue 无导出数据,这样写只为了平台一致,
  245. // nvue 需要把 ref 传入,其它平台不需要
  246. const animationData = animation.export(ball.value)
  247. ```
  248. ##### 兼容性
  249. | uni-app | uni-app x |
  250. |------------|----------------------------------|
  251. | √ | √ |
  252. ##### 兼容性
  253. | uni-app | uni-app x |
  254. |------------|----------------------------------|
  255. | √ | √ |
  256. ### camelCase <a id="api_camelCase"></a>
  257. - 将字符串转换为 camelCase 或 PascalCase 风格的命名约定
  258. ```js
  259. camelCase("hello world") // helloWorld
  260. camelCase("hello world", true) // HelloWorld
  261. ```
  262. ##### 兼容性
  263. | uni-app | uni-app x |
  264. |------------|----------------------------------|
  265. | √ | √ |
  266. ### kebabCase <a id="api_kebabCase"></a>
  267. - 将字符串转换为指定连接符的命名约定
  268. ```js
  269. kebabCase("helloWorld") // hello-world
  270. kebabCase("hello world_example") // hello-world-example
  271. kebabCase("helloWorld", "_") // hello_world
  272. ```
  273. ##### 兼容性
  274. | uni-app | uni-app x |
  275. |------------|----------------------------------|
  276. | √ | √ |
  277. ### closest <a id="api_closest"></a>
  278. - 在给定数组中找到最接近目标数字的元素
  279. ```js
  280. closest([1, 3, 5, 7, 9], 6) // 5
  281. ```
  282. ##### 兼容性
  283. | uni-app | uni-app x |
  284. |------------|----------------------------------|
  285. | √ | √ |
  286. ### shuffle <a id="api_shuffle"></a>
  287. - 在给定数组中找到最接近目标数字的元素
  288. ```js
  289. shuffle([1, 3, 5, 7, 9])
  290. ```
  291. ##### 兼容性
  292. | uni-app | uni-app x |
  293. |------------|----------------------------------|
  294. | √ | √ |
  295. ### isBase64 <a id="api_isBase64"></a>
  296. - 判断字符串是否为base64
  297. ```js
  298. isBase64('xxxxx')
  299. ```
  300. ##### 兼容性
  301. | uni-app | uni-app x |
  302. |------------|----------------------------------|
  303. | √ | √ |
  304. ### isNumber <a id="api_isNumber"></a>
  305. - 检查一个值是否为数字类型
  306. ```js
  307. isNumber('0') // false
  308. isNumber(0) // true
  309. ```
  310. ##### 兼容性
  311. | uni-app | uni-app x |
  312. |------------|----------------------------------|
  313. | √ | √ |
  314. ### isNumeric <a id="api_isNumeric"></a>
  315. - 检查一个值是否为数字类型或表示数字的字符串
  316. ```js
  317. isNumeric('0') // true
  318. isNumeric(0) // true
  319. ```
  320. ##### 兼容性
  321. | uni-app | uni-app x |
  322. |------------|----------------------------------|
  323. | √ | √ |
  324. ### isString <a id="api_isString"></a>
  325. - 检查一个值是否为数字类型或表示数字的字符串
  326. ```js
  327. isString('0') // true
  328. isString(0) // false
  329. ```
  330. ##### 兼容性
  331. | uni-app | uni-app x |
  332. |------------|----------------------------------|
  333. | √ | √ |
  334. ## composition-api <a id="api_composition-api"></a>
  335. - 因本人插件需要兼容vue2/vue3,故增加一个vue文件,代替条件编译
  336. - vue2需要在main.js加上这一段
  337. ```js
  338. // vue2
  339. import Vue from 'vue'
  340. import VueCompositionAPI from '@vue/composition-api'
  341. Vue.use(VueCompositionAPI)
  342. ```
  343. ```js
  344. //使用
  345. import {computed, onMounted, watch, reactive} from '@/uni_modules/lime-shared/vue'
  346. ```
  347. ##### 兼容性
  348. | uni-app | uni-app x |
  349. |------------|----------------------------------|
  350. | √ | x |