整合 tailwindcss 及 信息获取
This commit is contained in:
parent
20f7f5a433
commit
b4d20cd3fe
GPG Key ID:
BD85FF18B373C341
@ -2,6 +2,7 @@
|
|||||||
"name": "uni-preset-vue",
|
"name": "uni-preset-vue",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"postinstall": "weapp-tw patch",
|
||||||
"dev:app": "uni -p app",
|
"dev:app": "uni -p app",
|
||||||
"dev:app-android": "uni -p app-android",
|
"dev:app-android": "uni -p app-android",
|
||||||
"dev:app-ios": "uni -p app-ios",
|
"dev:app-ios": "uni -p app-ios",
|
||||||
@ -78,8 +79,13 @@
|
|||||||
"@vicons/material": "^0.12.0",
|
"@vicons/material": "^0.12.0",
|
||||||
"@vicons/utils": "^0.1.4",
|
"@vicons/utils": "^0.1.4",
|
||||||
"@vue/runtime-core": "^3.4.21",
|
"@vue/runtime-core": "^3.4.21",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"postcss": "^8.4.47",
|
||||||
|
"postcss-loader": "^8.1.1",
|
||||||
"sass": "^1.79.5",
|
"sass": "^1.79.5",
|
||||||
"sass-loader": "10.1.1",
|
"sass-loader": "10.1.1",
|
||||||
"vite": "5.2.8"
|
"tailwindcss": "^3.4.14",
|
||||||
|
"vite": "5.2.8",
|
||||||
|
"weapp-tailwindcss": "^3.6.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
1082
pnpm-lock.yaml
1082
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -13,8 +13,11 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '@dcloudio/uni-ui/lib/uni-scss/index.scss';
|
@import 'tailwindcss/base';
|
||||||
|
@import 'tailwindcss/utilities';
|
||||||
|
@import 'tailwindcss/components';
|
||||||
|
|
||||||
|
@import '@dcloudio/uni-ui/lib/uni-scss/index.scss';
|
||||||
/*每个页面公共css */
|
/*每个页面公共css */
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import App from './App'
|
import App from './App'
|
||||||
import "./api/http"
|
import "./api/http"
|
||||||
import pinia from './stores'
|
import pinia from './stores'
|
||||||
|
import "./tailwind.css"
|
||||||
|
|
||||||
// #ifndef VUE3
|
// #ifndef VUE3
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|||||||
78
src/pages/device-info/components/battery-info.vue
Normal file
78
src/pages/device-info/components/battery-info.vue
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<uni-section title="电池信息" type="line">
|
||||||
|
<view class="m-2">
|
||||||
|
<uni-row>
|
||||||
|
<uni-col span="24">
|
||||||
|
<view>
|
||||||
|
<view>
|
||||||
|
电量
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<progress :percent="ctx.batteryInfo.level" show-info stroke-width="5"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
|
||||||
|
<uni-col span="24">
|
||||||
|
<view class="my-1">
|
||||||
|
<uni-row>
|
||||||
|
<uni-col span="12">
|
||||||
|
<view>
|
||||||
|
<text>是否充电中</text>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
|
||||||
|
<uni-col span="12">
|
||||||
|
<view class="flex text-right justify-end">
|
||||||
|
<uni-tag v-if="ctx.batteryInfo.isCharging" text="是" type="success"/>
|
||||||
|
<uni-tag v-else text="否" type="error"/>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
</uni-row>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
</uni-row>
|
||||||
|
</view>
|
||||||
|
</uni-section>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {onLoad, onUnload} from "@dcloudio/uni-app"
|
||||||
|
import {reactive} from "vue"
|
||||||
|
|
||||||
|
const ctx = reactive({
|
||||||
|
batteryInfo: {
|
||||||
|
isCharging: false,
|
||||||
|
level: 0,
|
||||||
|
errMsg: "",
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function getBatteryInfo(){
|
||||||
|
uni.getBatteryInfo({
|
||||||
|
success: (res) => {
|
||||||
|
ctx.batteryInfo = res
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let timer: number
|
||||||
|
onLoad(() => {
|
||||||
|
getBatteryInfo()
|
||||||
|
clearInterval(timer)
|
||||||
|
timer = setInterval(()=>{
|
||||||
|
getBatteryInfo()
|
||||||
|
}, 5 * 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnload(() => {
|
||||||
|
clearInterval(timer)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
60
src/pages/device-info/components/network-info.vue
Normal file
60
src/pages/device-info/components/network-info.vue
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<script setup>
|
||||||
|
import {onLoad, onUnload} from "@dcloudio/uni-app"
|
||||||
|
import {reactive} from "vue"
|
||||||
|
|
||||||
|
const ctx = reactive({
|
||||||
|
networkType: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
function getNetworkType() {
|
||||||
|
uni.getNetworkType({
|
||||||
|
success: (res) => {
|
||||||
|
ctx.networkType = res.networkType
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let timer = void 0
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
getNetworkType()
|
||||||
|
timer = setInterval(() => {
|
||||||
|
getNetworkType()
|
||||||
|
}, 10 * 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnload(() => {
|
||||||
|
clearInterval(timer)
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<uni-section title="电池信息" type="line">
|
||||||
|
<view class="m-2">
|
||||||
|
<uni-row>
|
||||||
|
<uni-col span="24">
|
||||||
|
<view class="my-1">
|
||||||
|
<uni-row>
|
||||||
|
<uni-col span="12">
|
||||||
|
<view>
|
||||||
|
<text>网络类型</text>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
|
||||||
|
<uni-col span="12">
|
||||||
|
<view class="flex text-right justify-end">
|
||||||
|
<text>{{ctx.networkType}}</text>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
</uni-row>
|
||||||
|
</view>
|
||||||
|
</uni-col>
|
||||||
|
</uni-row>
|
||||||
|
</view>
|
||||||
|
</uni-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,58 +1,15 @@
|
|||||||
<template>
|
<script setup>
|
||||||
<view class="container">
|
import BatteryInfo from "./components/battery-info.vue"
|
||||||
<uni-section title="电池信息" type="line">
|
import NetworkInfo from "./components/network-info.vue"
|
||||||
<uni-row>
|
|
||||||
<uni-col span="24">
|
|
||||||
<view class="uni-ma-2">
|
|
||||||
<view>
|
|
||||||
电量
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
<progress :percent="ctx.batteryInfo.level" show-info stroke-width="5" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
<uni-col span="24">
|
|
||||||
<view class="uni-ma-2">
|
|
||||||
<uni-row>
|
|
||||||
<uni-col span="12">
|
|
||||||
<view>
|
|
||||||
是否充电中
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
|
|
||||||
<uni-col span="12" style="text-align: right;">
|
|
||||||
<view>
|
|
||||||
<uni-tag v-if="ctx.batteryInfo.isCharging" text="是" type="success" />
|
|
||||||
<uni-tag v-else text="否" type="error" />
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
</uni-row>
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
</uni-row>
|
|
||||||
</uni-section>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { onLoad } from "@dcloudio/uni-app"
|
|
||||||
import {reactive} from "vue"
|
|
||||||
const ctx = reactive({
|
|
||||||
batteryInfo: {
|
|
||||||
isCharging: false,
|
|
||||||
level: 0,
|
|
||||||
errMsg: "",
|
|
||||||
}
|
|
||||||
})
|
|
||||||
uni.getBatteryInfo({
|
|
||||||
success: (res)=>{
|
|
||||||
ctx.batteryInfo = res
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<BatteryInfo/>
|
||||||
|
<NetworkInfo/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
3
src/tailwind.css
Normal file
3
src/tailwind.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
29
tailwind.config.js
Normal file
29
tailwind.config.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
const resolve = (p) => {
|
||||||
|
return path.resolve(__dirname, p);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
// 增加前辍避免样式冲突
|
||||||
|
// prefix: 'zhs-',
|
||||||
|
// 注意此处，一定要 `path.resolve` 一下, 传入绝对路径
|
||||||
|
// 你要有其他目录，比如 components，也必须在这里，添加一下
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/index.html",
|
||||||
|
"./pages/**/*.{html,js,ts,jsx,tsx,vue}",
|
||||||
|
"./src/pages/**/*.{html,js,ts,jsx,tsx,vue}",
|
||||||
|
"./components/**/*.{html,js,ts,jsx,tsx,vue}"
|
||||||
|
],
|
||||||
|
corePlugins: {
|
||||||
|
// 跨多端可以 h5 开启，小程序关闭
|
||||||
|
preflight: false,
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,5 +1,14 @@
|
|||||||
|
import path from "path";
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import uni from '@dcloudio/vite-plugin-uni'
|
import uni from '@dcloudio/vite-plugin-uni'
|
||||||
|
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
|
||||||
|
// 注意： 打包成 h5 和 app 都不需要开启插件配置
|
||||||
|
const isH5 = process.env.UNI_PLATFORM === "h5";
|
||||||
|
const isApp = process.env.UNI_PLATFORM === "app";
|
||||||
|
const weAppTailwindcssDisabled = isH5 || isApp;
|
||||||
|
const resolve = (p) => {
|
||||||
|
return path.resolve(__dirname, p);
|
||||||
|
};
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
build:{
|
build:{
|
||||||
@ -7,5 +16,20 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
uni(),
|
uni(),
|
||||||
|
uvwt({
|
||||||
|
rem2rpx: true,
|
||||||
|
disabled: weAppTailwindcssDisabled
|
||||||
|
})
|
||||||
],
|
],
|
||||||
|
css: {
|
||||||
|
postcss: {
|
||||||
|
plugins: [
|
||||||
|
require("tailwindcss")({
|
||||||
|
// 注意此处，手动传入 `tailwind.config.js` 的绝对路径
|
||||||
|
config: resolve("./tailwind.config.js"),
|
||||||
|
}),
|
||||||
|
require("autoprefixer"),
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user