TianSL/r-util-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(playground): ✨ 新增示例项目

Browse Source
This commit is contained in:
CodiceFabbrica
2026-06-30 11:21:16 +08:00
parent 4759dfe6b2
commit c22b72ac7b
78 changed files with 9058 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
playground/uniapp-app/.gitignore
+21
View File
@@ -0,0 +1,21 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
*.local
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
playground/uniapp-app/.npmrc
+2
View File
@@ -0,0 +1,2 @@
public-hoist-pattern[]=*dcloudio*
shamefully-hoist=false
playground/uniapp-app/index.html
+20
View File
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
playground/uniapp-app/package.json
+78
View File
@@ -0,0 +1,78 @@
{
"name": "@r-utils/playground-uniapp",
"private": true,
"version": "0.0.0",
"scripts": {
"dev:custom": "uni -p",
"dev:h5": "uni",
"dev:h5:ssr": "uni --ssr",
"dev:mp-alipay": "uni -p mp-alipay",
"dev:mp-baidu": "uni -p mp-baidu",
"dev:mp-jd": "uni -p mp-jd",
"dev:mp-kuaishou": "uni -p mp-kuaishou",
"dev:mp-lark": "uni -p mp-lark",
"dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-harmony": "uni -p mp-harmony",
"dev:mp-weixin": "uni -p mp-weixin",
"dev:mp-xhs": "uni -p mp-xhs",
"dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
"build:custom": "uni build -p",
"build:h5": "uni build",
"build:h5:ssr": "uni build --ssr",
"build:mp-alipay": "uni build -p mp-alipay",
"build:mp-baidu": "uni build -p mp-baidu",
"build:mp-jd": "uni build -p mp-jd",
"build:mp-kuaishou": "uni build -p mp-kuaishou",
"build:mp-lark": "uni build -p mp-lark",
"build:mp-qq": "uni build -p mp-qq",
"build:mp-toutiao": "uni build -p mp-toutiao",
"build:mp-harmony": "uni build -p mp-harmony",
"build:mp-weixin": "uni build -p mp-weixin",
"build:mp-xhs": "uni build -p mp-xhs",
"build:quickapp-webview": "uni build -p quickapp-webview",
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
"type-check": "vue-tsc --noEmit",
"lint": "eslint . --fix",
"format": "prettier --write src"
},
"dependencies": {
"@dcloudio/uni-app": "3.0.0-4080420251103001",
"@dcloudio/uni-app-harmony": "3.0.0-4080420251103001",
"@dcloudio/uni-app-plus": "3.0.0-4080420251103001",
"@dcloudio/uni-components": "3.0.0-4080420251103001",
"@dcloudio/uni-h5": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-alipay": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-baidu": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-harmony": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-jd": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-lark": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-qq": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-toutiao": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-weixin": "3.0.0-4080420251103001",
"@dcloudio/uni-mp-xhs": "3.0.0-4080420251103001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4080420251103001",
"@r-utils/uni-app": "workspace:^",
"@r-utils/uview-plus": "workspace:^",
"@r-utils/common": "workspace:^",
"vue": "^3.4.21",
"vue-i18n": "^9.1.9",
"vue-router": "^4.4.4"
},
"devDependencies": {
"@dcloudio/types": "^3.4.8",
"@dcloudio/uni-automator": "3.0.0-4080420251103001",
"@dcloudio/uni-cli-shared": "3.0.0-4080420251103001",
"@dcloudio/uni-stacktracey": "3.0.0-4080420251103001",
"@dcloudio/vite-plugin-uni": "3.0.0-4080420251103001",
"@vue/runtime-core": "^3.4.21",
"@vue/tsconfig": "^0.1.3",
"typescript": "^4.9.4",
"vite": "5.2.8",
"vue-tsc": "^1.0.24"
}
}
playground/uniapp-app/shims-uni.d.ts
Vendored
+10
View File
@@ -0,0 +1,10 @@
/// <reference types='@dcloudio/types' />
import 'vue'
declare module '@vue/runtime-core' {
type Hooks = App.AppInstance & Page.PageInstance;
interface ComponentCustomOptions extends Hooks {
}
}
playground/uniapp-app/src/App.vue
+13
View File
@@ -0,0 +1,13 @@
<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
onLaunch(() => {
console.log("App Launch");
});
onShow(() => {
console.log("App Show");
});
onHide(() => {
console.log("App Hide");
});
</script>
<style></style>
playground/uniapp-app/src/env.d.ts
Vendored
+8
View File
@@ -0,0 +1,8 @@
/// <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
playground/uniapp-app/src/main.ts
+8
View File
@@ -0,0 +1,8 @@
import { createSSRApp } from "vue";
import App from "./App.vue";
export function createApp() {
const app = createSSRApp(App);
return {
app,
};
}
playground/uniapp-app/src/manifest.json
+72
View File
@@ -0,0 +1,72 @@
{
"name" : "",
"appid" : "",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics": {
"enable": false
},
"vueVersion" : "3"
}
playground/uniapp-app/src/pages.json
+70
View File
@@ -0,0 +1,70 @@
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "@r-utils Playground"
}
},
{
"path": "pages/request/index",
"style": {
"navigationBarTitleText": "Request Demo"
}
},
{
"path": "pages/uni-helper/index",
"style": {
"navigationBarTitleText": "UniHelper Demo"
}
},
{
"path": "pages/bluetooth/index",
"style": {
"navigationBarTitleText": "Bluetooth Demo"
}
},
{
"path": "pages/nfc/index",
"style": {
"navigationBarTitleText": "NFC Demo"
}
},
{
"path": "pages/upload/index",
"style": {
"navigationBarTitleText": "Upload Demo"
}
},
{
"path": "pages/permission/index",
"style": {
"navigationBarTitleText": "Permission Demo"
}
},
{
"path": "pages/countdown/index",
"style": {
"navigationBarTitleText": "Countdown Demo"
}
},
{
"path": "pages/wait/index",
"style": {
"navigationBarTitleText": "Wait Demo"
}
},
{
"path": "pages/knock-test/index",
"style": {
"navigationBarTitleText": "KnockTest Demo"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
playground/uniapp-app/src/pages/bluetooth/index.vue
+47
View File
@@ -0,0 +1,47 @@
<template>
<view class="page">
<view class="section-title">BluetoothUtils 蓝牙工具 Demo</view>
<view class="demo-block">
<text class="label">蓝牙功能说明</text>
<text class="desc">BluetoothUtils 提供了蓝牙设备搜索、连接、数据传输等功能。需要在真机上运行（App 或小程序环境）。</text>
</view>
<view class="demo-block">
<text class="label">搜索设备</text>
<text class="code">BluetoothUtils.getDevices(cb, 3000)</text>
</view>
<view class="demo-block">
<text class="label">绑定设备</text>
<text class="code">BluetoothUtils.bindDevice(device, async () => { ... })</text>
</view>
<view class="demo-block">
<text class="label">发送数据</text>
<text class="code">BluetoothUtils.sendData(device, [0x1B, 0x40])</text>
</view>
<view class="demo-block">
<text class="label">获取 MTU</text>
<text class="code">BluetoothUtils.getBLEMTU(device)</text>
</view>
<view class="notice">
<text>⚠️ 蓝牙功能需要在真机环境下测试，H5 模拟器不支持</text>
</view>
</view>
</template>
<script setup lang="ts">
</script>
<style scoped>
.page { padding: 30rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #42b883; }
.demo-block { margin-bottom: 24rpx; padding: 20rpx; background: #f9f9f9; border-radius: 8rpx; }
.label { font-size: 28rpx; font-weight: bold; display: block; margin-bottom: 8rpx; }
.desc { font-size: 26rpx; color: #666; }
.code { font-size: 24rpx; color: #42b883; font-family: monospace; }
.notice { margin-top: 20rpx; padding: 16rpx; background: #fff3e0; border-radius: 8rpx; font-size: 24rpx; color: #e65100; }
</style>
playground/uniapp-app/src/pages/countdown/index.vue
+51
View File
@@ -0,0 +1,51 @@
<template>
<view class="page">
<view class="section-title">Countdown 倒计时 Demo</view>
<view class="demo-block">
<text class="label">倒计时: {{ timeDisplay }} ({{ status }})</text>
<view class="btn-group">
<button :disabled="status === 'running'" @click="start" size="mini">开始</button>
<button :disabled="status !== 'running'" @click="stop" size="mini">停止</button>
<button :disabled="status !== 'running'" @click="restart" size="mini">重新开始</button>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { Countdown } from '@r-utils/common'
const timeDisplay = ref('00:00:10')
const status = ref<'idle' | 'running' | 'stopped'>('idle')
let countdown: Countdown | null = null
function start() {
countdown = new Countdown(10)
countdown.addStepEventListener((t) => { timeDisplay.value = t })
countdown.addCountdownEventListener(() => { status.value = 'stopped' })
countdown.start()
status.value = 'running'
}
function stop() {
countdown?.stop()
status.value = 'stopped'
}
function restart() {
countdown?.restart()
status.value = 'running'
}
onUnmounted(() => { stop() })
</script>
<style scoped>
.page { padding: 30rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #42b883; }
.demo-block { margin-bottom: 24rpx; padding: 20rpx; background: #f9f9f9; border-radius: 8rpx; }
.label { font-size: 28rpx; font-weight: bold; display: block; margin-bottom: 12rpx; }
.btn-group { display: flex; gap: 16rpx; margin-top: 12rpx; }
</style>
playground/uniapp-app/src/pages/index/index.vue
+107
View File
@@ -0,0 +1,107 @@
<template>
<view class="content">
<view class="title">@r-utils/uni-app & @r-utils/common Playground</view>
<view class="desc">以下是各模块的使用示例，点击进入独立页面</view>
<view class="section-title">@r-utils/uni-app</view>
<view class="nav-list">
<navigator url="/pages/request/index" class="nav-item">
<text class="nav-label">Request — 请求封装</text>
<text class="nav-desc">类 axios 的 uni.request 封装，支持拦截器</text>
</navigator>
<navigator url="/pages/uni-helper/index" class="nav-item">
<text class="nav-label">UniHelper — 常用工具</text>
<text class="nav-desc">rpxToPx、showToast、getCurrentPage 等</text>
</navigator>
<navigator url="/pages/bluetooth/index" class="nav-item">
<text class="nav-label">BluetoothUtils — 蓝牙工具</text>
<text class="nav-desc">蓝牙设备搜索、连接、数据传输</text>
</navigator>
<navigator url="/pages/nfc/index" class="nav-item">
<text class="nav-label">NFC — NFC 功能</text>
<text class="nav-desc">NFC 标签读写</text>
</navigator>
<navigator url="/pages/upload/index" class="nav-item">
<text class="nav-label">Upload — 文件上传</text>
<text class="nav-desc">uni.uploadFile 封装</text>
</navigator>
</view>
<view class="section-title" style="margin-top: 30rpx;">@r-utils/common</view>
<view class="nav-list">
<navigator url="/pages/permission/index" class="nav-item">
<text class="nav-label">Permission — 权限校验</text>
<text class="nav-desc">权限字符串格式校验</text>
</navigator>
<navigator url="/pages/countdown/index" class="nav-item">
<text class="nav-label">Countdown — 倒计时</text>
<text class="nav-desc">基于 dayjs 的倒计时类</text>
</navigator>
<navigator url="/pages/wait/index" class="nav-item">
<text class="nav-label">wait — 等待函数</text>
<text class="nav-desc">异步等待指定时间</text>
</navigator>
<navigator url="/pages/knock-test/index" class="nav-item">
<text class="nav-label">KnockTest — 敲击测试</text>
<text class="nav-desc">顺序敲击触发回调的状态机</text>
</navigator>
</view>
</view>
</template>
<script setup lang="ts">
</script>
<style>
.content {
padding: 30rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 12rpx;
}
.desc {
font-size: 26rpx;
color: #666;
margin-bottom: 40rpx;
}
.section-title {
font-size: 28rpx;
font-weight: bold;
color: #42b883;
margin-bottom: 20rpx;
padding-bottom: 8rpx;
border-bottom: 1px solid #eee;
}
.nav-list {
display: flex;
flex-direction: column;
gap: 16rpx;
margin-bottom: 20rpx;
}
.nav-item {
padding: 20rpx 24rpx;
background: #fff;
border-radius: 12rpx;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.nav-label {
display: block;
font-size: 28rpx;
font-weight: bold;
margin-bottom: 6rpx;
}
.nav-desc {
display: block;
font-size: 24rpx;
color: #888;
}
</style>
playground/uniapp-app/src/pages/knock-test/index.vue
+46
View File
@@ -0,0 +1,46 @@
<template>
<view class="page">
<view class="section-title">KnockTest 敲击测试 Demo</view>
<view class="demo-block">
<text class="label">{{ message }}</text>
<text class="desc">成功次数: {{ successCount }}</text>
<button @click="knock" size="mini" style="margin-top: 12rpx">敲击 (Knock)</button>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { KnockTest } from '@r-utils/common'
const config = {
maxWaitTime: 5000,
operations: [
{ duration: 1000, delay: 500, times: 2 },
{ duration: 1000, delay: 500, times: 3 },
],
}
const knockTest = new KnockTest(config)
const message = ref('点击按钮按顺序触发敲击（2次 → 等待 → 3次）')
const successCount = ref(0)
knockTest.addCallback(() => {
successCount.value++
message.value = `🎉 敲击测试成功！(${successCount.value}次)`
})
function knock() {
message.value = '敲击中...'
knockTest.knock()
}
</script>
<style scoped>
.page { padding: 30rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #42b883; }
.demo-block { margin-bottom: 24rpx; padding: 20rpx; background: #f9f9f9; border-radius: 8rpx; }
.label { font-size: 28rpx; font-weight: bold; display: block; margin-bottom: 8rpx; }
.desc { font-size: 26rpx; color: #666; }
</style>
playground/uniapp-app/src/pages/nfc/index.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<view class="page">
<view class="section-title">NFC 功能 Demo</view>
<view class="demo-block">
<text class="label">NFC 功能说明</text>
<text class="desc">NFC 模块提供标签读写等功能，需要在支持 NFC 的真机上运行。</text>
</view>
<view class="notice">
<text>⚠️ NFC 功能需要在真机环境下测试</text>
</view>
</view>
</template>
<script setup lang="ts">
</script>
<style scoped>
.page { padding: 30rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #42b883; }
.demo-block { margin-bottom: 24rpx; padding: 20rpx; background: #f9f9f9; border-radius: 8rpx; }
.label { font-size: 28rpx; font-weight: bold; display: block; margin-bottom: 8rpx; }
.desc { font-size: 26rpx; color: #666; }
.notice { margin-top: 20rpx; padding: 16rpx; background: #fff3e0; border-radius: 8rpx; font-size: 24rpx; color: #e65100; }
</style>
playground/uniapp-app/src/pages/permission/index.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<view class="page">
<view class="section-title">Permission 权限校验 Demo</view>
<view class="demo-block">
<text class="label">格式: module:action:resource (三级，冒号分隔)</text>
<input v-model="input" type="text" placeholder="输入权限字符串" class="input" @input="check" />
<text :style="{ color: isValid ? '#4caf50' : '#f44336' }" class="result">
{{ isValid ? '✓ 有效' : '✗ 无效' }}
</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Permission } from '@r-utils/common'
const permissionList = ['user:read:profile', 'admin:write:config', 'invalid']
const permission = new Permission(permissionList)
const input = ref('user:read:profile')
const isValid = ref(permission.isValid(input.value))
function check() {
isValid.value = permission.isValid(input.value)
}
</script>
<style scoped>
.page { padding: 30rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #42b883; }
.demo-block { margin-bottom: 24rpx; padding: 20rpx; background: #f9f9f9; border-radius: 8rpx; }
.label { font-size: 28rpx; font-weight: bold; display: block; margin-bottom: 12rpx; }
.input { border: 1px solid #ddd; border-radius: 8rpx; padding: 12rpx; margin-bottom: 12rpx; font-size: 28rpx; }
.result { display: block; margin-top: 8rpx; font-size: 26rpx; }
</style>
playground/uniapp-app/src/pages/request/index.vue
+124
View File
@@ -0,0 +1,124 @@
<template>
<view class="page">
<view class="section-title">Request 请求封装 Demo</view>
<view class="demo-block">
<text class="label">创建 Request 实例：</text>
<text class="code">const request = new Request({ baseURL: '/api' })</text>
</view>
<view class="demo-block">
<text class="label">添加请求拦截器：</text>
<text class="code">request.interceptors.request.add(config => { config.header.token = 'xxx'; return config })</text>
</view>
<view class="demo-block">
<text class="label">添加响应拦截器：</text>
<text class="code">request.interceptors.response.add(res => { return res.data })</text>
</view>
<view class="demo-block">
<text class="label">发送请求：</text>
<text class="code">const res = await request.get('/users')</text>
</view>
<view class="demo-block">
<button @click="sendRequest" :disabled="loading">
{{ loading ? '请求中...' : '发送 GET 请求' }}
</button>
<view v-if="response" class="result">
<text>响应结果: {{ response }}</text>
</view>
<view v-if="error" class="error">
<text>请求失败: {{ error }}</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Request } from '@r-utils/uni-app'
const loading = ref(false)
const response = ref('')
const error = ref('')
const request = new Request({
baseURL: 'https://jsonplaceholder.typicode.com',
})
request.interceptors.request.add((config) => {
console.log('请求拦截器:', config.url)
return config
})
request.interceptors.response.add((res) => {
console.log('响应拦截器:', res)
return res
})
async function sendRequest() {
loading.value = true
error.value = ''
response.value = ''
try {
const res = await request.get('/todos/1')
response.value = JSON.stringify(res)
} catch (e) {
error.value = String(e)
} finally {
loading.value = false
}
}
</script>
<style scoped>
.page {
padding: 30rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 30rpx;
color: #42b883;
}
.demo-block {
margin-bottom: 24rpx;
padding: 20rpx;
background: #f9f9f9;
border-radius: 8rpx;
}
.label {
font-size: 28rpx;
font-weight: bold;
display: block;
margin-bottom: 8rpx;
}
.code {
font-size: 24rpx;
color: #666;
font-family: monospace;
}
.result {
margin-top: 16rpx;
padding: 16rpx;
background: #e8f5e9;
border-radius: 8rpx;
font-size: 24rpx;
}
.error {
margin-top: 16rpx;
padding: 16rpx;
background: #ffebee;
border-radius: 8rpx;
font-size: 24rpx;
color: #c62828;
}
</style>
playground/uniapp-app/src/pages/uni-helper/index.vue
+85
View File
@@ -0,0 +1,85 @@
<template>
<view class="page">
<view class="section-title">UniHelper 工具 Demo</view>
<view class="demo-block">
<text class="label">rpxToPx — rpx 转 px</text>
<input v-model="rpxValue" type="number" placeholder="输入 rpx 值" class="input" />
<text class="result">{{ rpxValue }}rpx = {{ pxResult }}px</text>
</view>
<view class="demo-block">
<text class="label">pxToRpx — px 转 rpx</text>
<input v-model="pxValue" type="number" placeholder="输入 px 值" class="input" />
<text class="result">{{ pxValue }}px = {{ rpxResult }}rpx</text>
</view>
<view class="demo-block">
<text class="label">showToast — 显示提示</text>
<view class="btn-group">
<button @click="showSuccessToast" size="mini">成功提示</button>
<button @click="showErrorToast" size="mini">错误提示</button>
<button @click="showNoneToast" size="mini">普通提示</button>
</view>
</view>
<view class="demo-block">
<text class="label">getCurrentPage — 获取当前页面</text>
<text class="result">当前页面路由: {{ currentPageRoute }}</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { rpxToPx, pxToRpx, showToast, getCurrentPage } from '@r-utils/uni-app'
const rpxValue = ref('100')
const pxResult = computed(() => {
try {
return rpxToPx(Number(rpxValue.value))
} catch {
return '-'
}
})
const pxValue = ref('50')
const rpxResult = computed(() => {
try {
return pxToRpx(Number(pxValue.value))
} catch {
return '-'
}
})
const currentPageRoute = computed(() => {
try {
const page = getCurrentPage()
return (page as any)?.route ?? '未知'
} catch {
return 'H5 模式下可能无法获取'
}
})
function showSuccessToast() {
showToast('操作成功', 'success')
}
function showErrorToast() {
showToast('操作失败', 'error')
}
function showNoneToast() {
showToast('这是一条提示')
}
</script>
<style scoped>
.page { padding: 30rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #42b883; }
.demo-block { margin-bottom: 24rpx; padding: 20rpx; background: #f9f9f9; border-radius: 8rpx; }
.label { font-size: 28rpx; font-weight: bold; display: block; margin-bottom: 12rpx; }
.input { border: 1px solid #ddd; border-radius: 8rpx; padding: 12rpx; margin-bottom: 12rpx; font-size: 28rpx; }
.result { display: block; margin-top: 8rpx; font-size: 26rpx; color: #42b883; }
.btn-group { display: flex; gap: 16rpx; }
</style>
playground/uniapp-app/src/pages/upload/index.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<view class="page">
<view class="section-title">Upload 文件上传 Demo</view>
<view class="demo-block">
<text class="label">上传功能说明</text>
<text class="desc">upload 函数封装了 uni.uploadFile，支持自动解析响应数据。</text>
</view>
<view class="demo-block">
<text class="label">示例代码</text>
<text class="code">import { upload } from '@r-utils/uni-app'</text>
<text class="code">const result = await upload({ url, filePath, name })</text>
</view>
<view class="notice">
<text>⚠️ 文件上传需要在真机环境下测试，且需要后端服务支持</text>
</view>
</view>
</template>
<script setup lang="ts">
</script>
<style scoped>
.page { padding: 30rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #42b883; }
.demo-block { margin-bottom: 24rpx; padding: 20rpx; background: #f9f9f9; border-radius: 8rpx; }
.label { font-size: 28rpx; font-weight: bold; display: block; margin-bottom: 8rpx; }
.desc { font-size: 26rpx; color: #666; }
.code { display: block; font-size: 24rpx; color: #42b883; font-family: monospace; margin-bottom: 4rpx; }
.notice { margin-top: 20rpx; padding: 16rpx; background: #fff3e0; border-radius: 8rpx; font-size: 24rpx; color: #e65100; }
</style>
playground/uniapp-app/src/pages/wait/index.vue
+40
View File
@@ -0,0 +1,40 @@
<template>
<view class="page">
<view class="section-title">wait 等待函数 Demo</view>
<view class="demo-block">
<text class="label">等待时间: {{ waitTime }}ms</text>
<input v-model.number="waitTime" type="number" :min="100" :step="100" class="input" />
<button :disabled="waiting" @click="handleWait" size="mini">
{{ waiting ? '等待中...' : `等待 ${waitTime}ms` }}
</button>
<text v-if="waitDone" class="result">✓ 等待完成</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { wait } from '@r-utils/common'
const waiting = ref(false)
const waitDone = ref(false)
const waitTime = ref(2000)
async function handleWait() {
waiting.value = true
waitDone.value = false
await wait(waitTime.value)
waiting.value = false
waitDone.value = true
}
</script>
<style scoped>
.page { padding: 30rpx; }
.section-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; color: #42b883; }
.demo-block { margin-bottom: 24rpx; padding: 20rpx; background: #f9f9f9; border-radius: 8rpx; }
.label { font-size: 28rpx; font-weight: bold; display: block; margin-bottom: 12rpx; }
.input { border: 1px solid #ddd; border-radius: 8rpx; padding: 12rpx; margin-bottom: 12rpx; font-size: 28rpx; }
.result { display: block; margin-top: 8rpx; font-size: 26rpx; color: #4caf50; }
</style>
playground/uniapp-app/src/shime-uni.d.ts
Vendored
+6
View File
@@ -0,0 +1,6 @@
export {}
declare module "vue" {
type Hooks = App.AppInstance & Page.PageInstance;
interface ComponentCustomOptions extends Hooks {}
}
playground/uniapp-app/src/static/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

playground/uniapp-app/src/uni.scss
+76
View File
@@ -0,0 +1,76 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color: #333; // 基本色
$uni-text-color-inverse: #fff; // 反色
$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;
/* 背景颜色 */
$uni-bg-color: #fff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
/* 边框颜色 */
$uni-border-color: #c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm: 12px;
$uni-font-size-base: 14px;
$uni-font-size-lg: 16;
/* 图片尺寸 */
$uni-img-size-sm: 20px;
$uni-img-size-base: 26px;
$uni-img-size-lg: 40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2c405a; // 文章标题颜色
$uni-font-size-title: 20px;
$uni-color-subtitle: #555; // 二级标题颜色
$uni-font-size-subtitle: 18px;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 15px;
playground/uniapp-app/tsconfig.json
+13
View File
@@ -0,0 +1,13 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
"types": ["@dcloudio/types"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
playground/uniapp-app/vite.config.ts
+7
View File
@@ -0,0 +1,7 @@
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [uni()],
});