整合 tailwindcss 及 信息获取
This commit is contained in:
parent
20f7f5a433
commit
b4d20cd3fe
GPG Key ID:
BD85FF18B373C341
@ -2,6 +2,7 @@
|
||||
"name": "uni-preset-vue",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"postinstall": "weapp-tw patch",
|
||||
"dev:app": "uni -p app",
|
||||
"dev:app-android": "uni -p app-android",
|
||||
"dev:app-ios": "uni -p app-ios",
|
||||
@ -78,8 +79,13 @@
|
||||
"@vicons/material": "^0.12.0",
|
||||
"@vicons/utils": "^0.1.4",
|
||||
"@vue/runtime-core": "^3.4.21",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.47",
|
||||
"postcss-loader": "^8.1.1",
|
||||
"sass": "^1.79.5",
|
||||
"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>
|
||||
|
||||
<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 */
|
||||
|
||||
button {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import App from './App'
|
||||
import "./api/http"
|
||||
import pinia from './stores'
|
||||
import "./tailwind.css"
|
||||
|
||||
// #ifndef VUE3
|
||||
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>
|
||||
<view class="container">
|
||||
<uni-section title="电池信息" type="line">
|
||||
<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 setup>
|
||||
import BatteryInfo from "./components/battery-info.vue"
|
||||
import NetworkInfo from "./components/network-info.vue"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<BatteryInfo/>
|
||||
<NetworkInfo/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
|
||||
</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 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/
|
||||
export default defineConfig({
|
||||
build:{
|
||||
@ -7,5 +16,20 @@ export default defineConfig({
|
||||
},
|
||||
plugins: [
|
||||
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