更新记录
1.1.10(2025-04-02) 下载此版本
首次提交
平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | - | - | - | - | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | - | - | - | - | - | - | - | - | - | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| √ | × | × |
***-ui
开发ing...
目录
[TOC]
说明
个人使用,减少项目中冗余代码,不定期更新版本
使用中有任何问题,或者优化意见,欢迎***讨论
// 微信搜索用户 ***-ui 添加请备注来意 \^o^/
特性
提升使用uni-app 开发微信小程序,微信公众号,手机App的速度
封装了常用的CSS,JS,组件
提升开发效率,减少代码体积,优化代码结构
安装&引入^_~
1、使用npm方式安装
npm install ***-ui
2、在main.js文件中引入并注册,注意这两行要放在import Vue之后。
import *** from "***-ui";
Vue.use(***);
3、在pages.json中配置easycom组件模式
"easycom": {
"^t-(.*)": "***-ui/components/t-$1/t-$1.vue"
},
4、引入css样式
<style>
@import "***-ui/libs/css/index.css";
</style>
**5、在更目录新建*Config.js文件,此文件为全部页面配置文件
一般情况下,请不要修改原有属性
// 自定义初始变量
export let dataC = {
MP_NAME:'盈悦人生小程序',
BASE_URL:'http://yyjk.tjweimob.com/api',
BASE_URL_TWO:'http://yyjk.tjweimob.com/',
}
// 全局onload
export let onLoadC = {
}
// 全局onShow
export let onShowC = {
}
// 全局onReady
export let onReadyC = {
}
// 全局onHide
export let onHideC = {
}
// 全局onUnload
export let onUnload = {
}
// 全局methods
export let methodsC = {
showToastC(title,s = 1000){
uni.showToast({
title,
icon:'none',
mask:true,
duration:s,
})
},
}
配置easycom规则后,自动按需引入,无需import组件,直接引用即可。
<template>
<u-button text="按钮"></u-button>
</template>
使用方法
按照上述方式安装引入后,配合下方每个方法的详细介绍,方便食用 \^o^/
组件篇
1、自定义头部
2、钟表选择时间段
方法篇
1、解析身份证号
参数
| 参数说明 | 类型 |
|---|---|
| 身份证号 eg:***0302288 | String |
返回字段
| 字段 | 表示 |
|---|---|
| province | 省 |
| city | 市 |
| town | 区 |
| year | 出生年 |
| month | 出生月 |
| day | 出生日 |
| age | 年龄 |
| gender | 性别 |
| code | 地区代码 |
let res = uni.tCheckIdCard('***0302288');
console.log(res);
// {
// age: 30
// city: "张家口市"
// code: "130701"
// day: "30"
// gender: 0
// month: "10"
// province: "河北省"
// town: "市辖区"
// year: "1993"
// }
2、倒计时
参数
| 参数说明 | 类型 |
|---|---|
| 倒计时常(s) | Number |
| 回调函数 | Function |
| 间隔时间 = (1000) | Number |
| 返回文本间距 = ('\u0020') 小间距 / '\u3000' 大间距 | String |
返回字段
| 字段 | 表示 |
|---|---|
| all | 周天时分秒 |
| week | 周 |
| day | 天 |
| hour | 时 |
| minute | 分 |
| second | 秒 |
| sTime | 剩余时间 |
返回:剩余时间
uni.tCountDown(1000000,e => {
console.log(e);
});
// {
// all: "01 04 13 46 40"
// day: "04"
// hour: "13"
// minute: "46"
// sTime: 999999
// second: "40"
// week: "01"
// }
3、时间戳转日期
参数
| 参数说明 | 类型 |
|---|---|
| 时间戳(ms 13位) | Number |
返回字段
| 字段 | 表示 |
|---|---|
| all | 年月日时分秒 |
| Dates | 年月日 |
| Times | 时分秒 |
| year | 年 |
| month | 月 |
| day | 日 |
| hour | 时 |
| minute | 分 |
| second | 秒 |
| week | 周 |
let dates = uni.tFormatTime(new Date('2021-12-12').getTime());
console.log(dates);
// {
// Dates: "2021-12-12"
// Times: "08:00:00"
// all: "2021-12-12 08:00:00"
// day: "12"
// hour: "08"
// minute: "00"
// month: "12"
// second: "00"
// week: "07"
// year: 2021
// }
4、截取URL参数
参数
| 参数说明 | 类型 |
|---|---|
| 带参URL eg:'index/index?test=' + 123 + '&name=' + '小明' | String |
返回字段
let urlParams = uni.tGetParam('index/index?test=' + 123 + '&name=' + '小明')
console.log(urlParams);
// {
// name: "小明"
// test: "123"
// }
5、微信公众号获取code
参数
| 参数说明 | 类型 |
|---|---|
| 回调函数 | Function |
| appId | String |
返回字段
onShow() {
// 截取url中的code 该方法注意写在onshow中
uni.tHfiveLogin((e)=>{
console.log(e); // code
})
},
// 传qppid拉起授权页面
uni.tHfiveLogin((e)=>{
console.log(e);
},'wx987c4d003d2cd21eg')
6、请求封装
7、
样式篇
样式说明

收藏人数:
https://www.npmjs.com/package/xiaotian-ui
下载插件并导入HBuilderX
赞赏(0)
下载 3
赞赏 0
下载 11534772
赞赏 1813
赞赏
京公网安备:11010802035340号