Compare commits
No commits in common. 'main' and 'master' have entirely different histories.
@ -0,0 +1,36 @@
|
||||
###
|
||||
# 全局环境变量
|
||||
# .env 需要本地全局环境变量请创建:.env.local
|
||||
# 自定义环境变量必须是以VITE_开始
|
||||
# @Author : J.L.Zhou
|
||||
# @EMail : 12020042@qq.com
|
||||
# @Tel : 151 1104 7708
|
||||
# @CreateTime : 2023-05-16 10:02:21
|
||||
# @LastEditos : J.L.Zhou
|
||||
# @LastEditTime : 2023-05-16 10:02:21
|
||||
# @Version : 1.0
|
||||
# Copyright 2023 jlzhou.top Inc. All rights reserved.
|
||||
# Warning: this content is only for internal circulation of the company.
|
||||
# It is forbidden to divulge it or use it for other commercial purposes.
|
||||
###
|
||||
|
||||
# 项目标题,建议全局配置
|
||||
VITE_APP_TITLE=示例项目
|
||||
|
||||
# 版权信息
|
||||
VITE_APP_COPY=Copyright 2023 jlzhou.top Inc. All rights reserved.
|
||||
|
||||
# 首页显示DEMO
|
||||
VITE_APP_DEMO=0
|
||||
# 请求后端api的基础地址
|
||||
# 小程序需加入白名单,并设置跨域
|
||||
VITE_APP_BASE_API=http://127.0.0.1:8080/
|
||||
|
||||
# 外部资源的基础地址
|
||||
# 小程序需加入白名单,并设置跨域
|
||||
VITE_APP_BASE_RESOURCES=http://127.0.0.1:8080/
|
||||
|
||||
# WebSocket的基础地址
|
||||
VITE_APP_BASE_WS=ws://127.0.0.1:8080/
|
||||
|
||||
VITE_APP_TEST1=全局测试变量
|
||||
@ -0,0 +1,33 @@
|
||||
###
|
||||
# 开发环境变量
|
||||
# .env.development 需要本地开发环境变量请创建:.env.development.local
|
||||
# 自定义环境变量必须是以VITE_开始
|
||||
# @Author : J.L.Zhou
|
||||
# @EMail : 12020042@qq.com
|
||||
# @Tel : 151 1104 7708
|
||||
# @CreateTime : 2023-05-16 10:02:21
|
||||
# @LastEditos : J.L.Zhou
|
||||
# @LastEditTime : 2023-05-16 10:02:21
|
||||
# @Version : 1.0
|
||||
# Copyright 2023 jlzhou.top Inc. All rights reserved.
|
||||
# Warning: this content is only for internal circulation of the company.
|
||||
# It is forbidden to divulge it or use it for other commercial purposes.
|
||||
###
|
||||
|
||||
|
||||
|
||||
# 请求后端api的基础地址
|
||||
# 小程序需加入白名单,并设置跨域
|
||||
VITE_APP_BASE_API=http://127.0.0.1:8080/
|
||||
|
||||
# 外部资源的基础地址
|
||||
# 小程序需加入白名单,并设置跨域
|
||||
VITE_APP_BASE_RESOURCES=http://127.0.0.1:8080/
|
||||
|
||||
# WebSocket的基础地址
|
||||
VITE_APP_BASE_WS=ws://127.0.0.1:8080/
|
||||
|
||||
VITE_APP_TEST2=测试开发环境变量
|
||||
|
||||
# 首页显示DEMO
|
||||
VITE_APP_DEMO=1
|
||||
@ -0,0 +1,29 @@
|
||||
###
|
||||
# 本地开发环境变量
|
||||
# 自定义环境变量必须是以VITE_开始
|
||||
# @Author : J.L.Zhou
|
||||
# @EMail : 12020042@qq.com
|
||||
# @Tel : 151 1104 7708
|
||||
# @CreateTime : 2023-05-16 10:02:21
|
||||
# @LastEditos : J.L.Zhou
|
||||
# @LastEditTime : 2023-05-16 10:02:21
|
||||
# @Version : 1.0
|
||||
# Copyright 2023 jlzhou.top Inc. All rights reserved.
|
||||
# Warning: this content is only for internal circulation of the company.
|
||||
# It is forbidden to divulge it or use it for other commercial purposes.
|
||||
###
|
||||
|
||||
|
||||
|
||||
# 请求后端api的基础地址
|
||||
# 小程序需加入白名单,并设置跨域
|
||||
VITE_APP_BASE_API=http://127.0.0.1:8080/
|
||||
|
||||
# 外部资源的基础地址
|
||||
# 小程序需加入白名单,并设置跨域
|
||||
VITE_APP_BASE_RESOURCES=http://127.0.0.1:8080/
|
||||
|
||||
# WebSocket的基础地址
|
||||
VITE_APP_BASE_WS=ws://127.0.0.1:8080/
|
||||
|
||||
VITE_APP_TEST22=测试本地开发环境变量
|
||||
@ -0,0 +1,30 @@
|
||||
###
|
||||
# 生产环境变量
|
||||
# .env.development 需要本地生产环境变量请创建:.env.development.local
|
||||
# 自定义环境变量必须是以VITE_开始
|
||||
# @Author : J.L.Zhou
|
||||
# @EMail : 12020042@qq.com
|
||||
# @Tel : 151 1104 7708
|
||||
# @CreateTime : 2023-05-16 10:02:21
|
||||
# @LastEditos : J.L.Zhou
|
||||
# @LastEditTime : 2023-05-16 10:02:21
|
||||
# @Version : 1.0
|
||||
# Copyright 2023 jlzhou.top Inc. All rights reserved.
|
||||
# Warning: this content is only for internal circulation of the company.
|
||||
# It is forbidden to divulge it or use it for other commercial purposes.
|
||||
###
|
||||
|
||||
|
||||
|
||||
# 请求后端api的基础地址
|
||||
# 小程序需加入白名单,并设置跨域
|
||||
VITE_APP_BASE_API=http://127.0.0.1:8080/
|
||||
|
||||
# 外部资源的基础地址
|
||||
# 小程序需加入白名单,并设置跨域
|
||||
VITE_APP_BASE_RESOURCES=http://127.0.0.1:8080/
|
||||
|
||||
# WebSocket的基础地址
|
||||
VITE_APP_BASE_WS=ws://127.0.0.1:8080/
|
||||
|
||||
VITE_APP_TEST3=测试生产环境变量
|
||||
@ -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?
|
||||
@ -1,4 +1,3 @@
|
||||
# uni-preset-vue-vite
|
||||
# 移动端基础工程
|
||||
|
||||
移动端基础工程
|
||||
uniapp+vue3+vite+pinia+uviewPlus+多环境
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"types": [
|
||||
"@dcloudio/types",
|
||||
"miniprogram-api-typings",
|
||||
"mini-types"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
{
|
||||
"name": "uni-preset-vue",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev:app": "uni -p app",
|
||||
"dev:app-android": "uni -p app-android",
|
||||
"dev:app-ios": "uni -p app-ios",
|
||||
"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-weixin": "uni -p mp-weixin",
|
||||
"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:app": "uni build -p app",
|
||||
"build:app-android": "uni build -p app-android",
|
||||
"build:app-ios": "uni build -p app-ios",
|
||||
"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-weixin": "uni build -p mp-weixin",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-components": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-h5": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-mp-alipay": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-mp-baidu": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-mp-jd": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-mp-kuaishou": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-mp-lark": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-mp-qq": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-mp-toutiao": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-3071120230427001",
|
||||
"clipboard": "^2.0.11",
|
||||
"dayjs": "^1.11.7",
|
||||
"pinia": "2.0.22",
|
||||
"pinia-plugin-unistorage": "^0.0.17",
|
||||
"uview-plus": "^3.1.30",
|
||||
"vue": "^3.2.45",
|
||||
"vue-i18n": "^9.1.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@dcloudio/types": "^3.3.2",
|
||||
"@dcloudio/uni-automator": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-3071120230427001",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-3071120230427001",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-3071120230427001",
|
||||
"sass": "^1.59.3",
|
||||
"sass-loader": "10",
|
||||
"vite": "4.1.4"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,41 @@
|
||||
/**
|
||||
* 将环境变量去掉VITE_APP_后,转换成小驼峰命名规则的属性的对象
|
||||
* export: env,useEnv
|
||||
* env: 转换后的环境变量
|
||||
* useEnv: vue插件,本质将转换后环境变量绑定:app.config.globalProperties.$env
|
||||
* @Author : J.L.Zhou
|
||||
* @EMail : 12020042@qq.com
|
||||
* @Tel : 151 1104 7708
|
||||
* @CreateTime : 2023-05-16 10:44:48
|
||||
* @LastEditos : J.L.Zhou
|
||||
* @LastEditTime : 2023-05-16 10:44:48
|
||||
* @Version : 1.0
|
||||
* Copyright 2023 jlzhou.top Inc. All rights reserved.
|
||||
* Warning: this content is only for internal circulation of the company.
|
||||
* It is forbidden to divulge it or use it for other commercial purposes.
|
||||
*/
|
||||
|
||||
console.debug("原始的环境变量",import.meta.env);
|
||||
const env = {};
|
||||
let name,value;
|
||||
for(name in import.meta.env){
|
||||
if(!name.startsWith("VITE_APP_")){
|
||||
continue;
|
||||
}
|
||||
value = import.meta.env[name];
|
||||
name = name.substr(9).toLowerCase().split(/_+/);
|
||||
for (var i = 1; i < name.length; i++) {
|
||||
name[i]=name[i].substr(0,1).toUpperCase()+name[i].substr(1);
|
||||
}
|
||||
name = name.join("");
|
||||
env[name] = value;
|
||||
}
|
||||
console.debug('转换后的环境变量',env);
|
||||
|
||||
const useEnv = {
|
||||
install(app){
|
||||
app.config.globalProperties.$env=env;
|
||||
}
|
||||
}
|
||||
export {env,useEnv};
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
import {
|
||||
createSSRApp
|
||||
} from "vue";
|
||||
import App from "./App.vue";
|
||||
import {useEnv} from "./env.js"
|
||||
import uviewPlus from 'uview-plus'
|
||||
import {wPlugin} from './w-components'
|
||||
import {store} from './store'
|
||||
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App);
|
||||
app
|
||||
.use(store)
|
||||
.use(useEnv)
|
||||
.use(uviewPlus)
|
||||
.use(wPlugin)
|
||||
return {
|
||||
app
|
||||
};
|
||||
}
|
||||
|
||||
@ -0,0 +1,72 @@
|
||||
{
|
||||
"name" : "示例项目",
|
||||
"appid" : "__UNI__59B9EAC",
|
||||
"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" : "wxa02013cebc06dde4",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view class="w-body">
|
||||
<w-navbar fixed left-home left-back title="自定义全局变量" class="navbar"></w-navbar>
|
||||
<view style="padding:1rem;">
|
||||
<view>自定义全局变量<text style="font-size:1.5rem;font-weight: bold;">$w</text>,在模板和js中可以直接使用</view>
|
||||
<view class="title">安全区域:</view>
|
||||
<view class="border">
|
||||
$w.left:{{$w.left}} |
|
||||
$w.top:{{$w.top}} |
|
||||
$w.right:{{$w.right}} |
|
||||
$w.bottom:{{$w.bottom}}
|
||||
</view>
|
||||
|
||||
<view class="title">路由:</view>
|
||||
<view class="border">
|
||||
<view hover-class="hover" @tap="$w.back()">$w.back()</view>
|
||||
<view hover-class="hover" @tap="$w.back(2)">$w.back(2)</view>
|
||||
<view hover-class="hover" @tap="$w.to('/pages/demo/demo1')">$w.to('/pages/demo/demo1')</view>
|
||||
</view>
|
||||
|
||||
<view class="title">uni:</view>
|
||||
<view class="border">
|
||||
<view>$w.uni:方便在魔板中直接调用uni相关方法</view>
|
||||
</view>
|
||||
|
||||
<view class="title">prototype(原生方法):</view>
|
||||
<view class="border">
|
||||
<view class="b">Date.prototype.format</view>
|
||||
<view>d=new Date()</view>
|
||||
<view>d.format() : {{d.format()}}</view>
|
||||
<view>d.format('yyyy年MM月dd日HH时mm分ss秒S毫秒') : {{d.format('yyyy年MM月dd日HH时mm分ss秒S毫秒')}}</view>
|
||||
|
||||
<view class="b">String.prototype.toDate</view>
|
||||
<view>'2011-11-12'.toDate() : {{'2011-11-12'.toDate()}}</view>
|
||||
<view>'2011-11-12 17:59'.toDate('yyyy-MM-dd HH:mm') : {{'2011-11-12 17:59'.toDate('yyyy-MM-dd HH:mm')}}</view>
|
||||
|
||||
<view class="b">Number.prototype.toDate</view>
|
||||
<view>结果.format("yyyy-MM-dd HH:mm")</view>
|
||||
<view>Number(0).toDate() : {{Number(0).toDate().format("yyyy-MM-dd HH:mm")}}</view>
|
||||
<view>d.getTime().toDate() : {{d.getTime().toDate().format("yyyy-MM-dd HH:mm")}}</view>
|
||||
|
||||
<view class="b">Number.prototype.toChina</view>
|
||||
<view>Number(0).toChina() : {{Number(0).toChina()}}</view>
|
||||
<view>Number(10).toChina() : {{Number(10).toChina()}}</view>
|
||||
<view>Number(12).toChina() : {{Number(12).toChina()}}</view>
|
||||
<view>Number(123).toChina() : {{Number(123).toChina()}}</view>
|
||||
<view>Number(120).toChina() : {{Number(120).toChina()}}</view>
|
||||
<view>Number(1234567890123).toChina() : {{Number(1234567890123).toChina()}}</view>
|
||||
|
||||
<view class="b">Number.prototype.toTime</view>
|
||||
<view>Number(0).toTime() : {{Number(0).toTime()}}</view>
|
||||
<view>Number(10).toTime() : {{Number(10).toTime()}}</view>
|
||||
<view>Number(100).toTime() : {{Number(100).toTime()}}</view>
|
||||
<view>Number(1000).toTime() : {{Number(1000).toTime()}}</view>
|
||||
<view>Number(10000).toTime() : {{Number(10000).toTime()}}</view>
|
||||
|
||||
<view class="b">String.prototype.toTime</view>
|
||||
<view>'00:00:00'.toTime() : {{'00:00:00'.toTime()}}</view>
|
||||
<view>'01:02:03'.toTime() : {{'01:02:03'.toTime()}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const d=new Date();
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-body {
|
||||
.title {
|
||||
font-size:1rem;
|
||||
color:var(--w-main-dark-1);
|
||||
font-weight: bold;
|
||||
}
|
||||
.border {
|
||||
font-size:0.8rem; border:solid 1px var(--w-main); padding: 1rem; margin: 1rem 0;
|
||||
& > .b:first-child{
|
||||
padding-top: 0;
|
||||
}
|
||||
view {
|
||||
padding: .5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.b {
|
||||
font-weight: bold;
|
||||
padding: 1rem 0 .1rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.hover {
|
||||
background-color: var(--w-bg-dark);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<view class="w-body">
|
||||
<w-navbar fixed left-home left-back title="环境变量" class="navbar"></w-navbar>
|
||||
<view style="padding:1rem;">
|
||||
<view>
|
||||
<text class="title">js中获取环境变量:{{ title }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="title">模板中直接使用环境变量:{{ $env.title }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="env">{{ $env }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref,getCurrentInstance} from 'vue'
|
||||
|
||||
const {proxy} = getCurrentInstance();
|
||||
console.debug(proxy);
|
||||
const title = ref(proxy.$env.title);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-body {
|
||||
padding: var(--window-top) var(--window-right) var(--window-bottom) var(--window-right);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<view class="w-body">
|
||||
<w-navbar fixed left-home left-back title="数据仓库示例" class="navbar"></w-navbar>
|
||||
<view style="padding:1rem;">
|
||||
<view>demo1Store非持久化仓库示例数据:</view>
|
||||
<view style="font-size:0.8rem; border:solid 1px var(--w-main-light-1); padding: .5rem; margin: 1rem 0;">
|
||||
<view>demo1Store.name : {{demo1Store.name}}</view>
|
||||
<view>demo1Store.getName : {{demo1Store.getName}}</view>
|
||||
<view>demo1Store.sex : {{demo1Store.sex}}</view>
|
||||
<view>demo1Store.getSex : {{demo1Store.getSex}}</view>
|
||||
<view>demo1Store.age : {{demo1Store.age}}</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="$u.toast(demo1Store.name)">读取属性name</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="$u.toast(demo1Store.getName)">读取计算属性getName</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="demo1Store.name='张三'">设置属性name='张三'</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="demo1Store.setName('李四')">执行方法setName('李四')</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="demo1Store.$reset()">执行$reset()重置</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-divider></u-divider>
|
||||
|
||||
<view>demo2Store持久化仓库示例数据:</view>
|
||||
<view style="font-size:0.8rem; border:solid 1px var(--w-main); padding: 1rem; margin: 1rem 0;">
|
||||
<view>demo2Store.name : {{demo2Store.name}}</view>
|
||||
<view>demo2Store.getName : {{demo2Store.getName}}</view>
|
||||
<view>demo2Store.sex : {{demo2Store.sex}}</view>
|
||||
<view>demo2Store.getSex : {{demo2Store.getSex}}</view>
|
||||
<view>demo2Store.age : {{demo2Store.age}}</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="$u.toast(demo2Store.name)">读取属性name</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="$u.toast(demo2Store.getName)">读取计算属性getName</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="demo2Store.name='张三'">设置属性name='张三'</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="demo2Store.setName('李四')">执行方法setName('李四')</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="demo2Store.$reset()">执行$reset()重置</u-button>
|
||||
</view>
|
||||
<view>
|
||||
<u-button type="primary" plain @tap="$w.uni.clearStorage()">清空缓存(不建议)</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
useDemo1Store,
|
||||
useDemo2Store
|
||||
} from '@/store'
|
||||
|
||||
const demo1Store = useDemo1Store();
|
||||
const demo2Store = useDemo2Store();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-body {
|
||||
.btns {
|
||||
|
||||
view {
|
||||
margin: .2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view class="demo-index">
|
||||
<w-navbar fixed left-home title="实例页面" class="navbar"></w-navbar>
|
||||
<w-safe-area style="--top:44px;--bottom:1.35rem;">
|
||||
|
||||
<u-list height="100%" paging-enabled>
|
||||
<u-list-item>
|
||||
<u-cell isLink url="/pages/demo/demo0" title="自定义全局变量"></u-cell>
|
||||
</u-list-item>
|
||||
<u-list-item>
|
||||
<u-cell isLink url="/pages/demo/demo1" title="自定义环境变量"></u-cell>
|
||||
</u-list-item>
|
||||
<u-list-item>
|
||||
<u-cell isLink url="/pages/demo/demo2" title="数据仓库示例"></u-cell>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</w-safe-area>
|
||||
<w-footer></w-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.demo-index {
|
||||
.navbar {}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<view class="w-body">
|
||||
<view class="content">
|
||||
<view class="title">{{$env.title}}</view>
|
||||
<navigator url="/pages/demo/index" class="demo">demo</navigator>
|
||||
</view>
|
||||
<w-loader opacity="1" height="70vh"></w-loader>
|
||||
<image mode="aspectFit" lazy-load class="wave" src="/static/wave.svg" />
|
||||
<w-footer custom-style=""></w-footer>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-body {
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 50vh;
|
||||
z-index: 1;
|
||||
color: var(--w-bg-dark);
|
||||
font-weight: bold;
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: .5rem;
|
||||
text-shadow: .2rem .2rem 0 #0006;
|
||||
}
|
||||
|
||||
.demo {
|
||||
background-color: #0002;
|
||||
width: 6rem;
|
||||
margin: 1rem auto 0;
|
||||
font-size: 1rem;
|
||||
border-radius: 5rem;
|
||||
cursor: pointer;
|
||||
transition: all .5s;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wave {
|
||||
background-color: var(--w-main);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
aspect-ratio: 4/1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<view class="w-body">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad,onShow } from '@dcloudio/uni-app'
|
||||
import { ref } from 'vue'
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-body{
|
||||
--navbar-height:44px
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,17 @@
|
||||
<svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 24 150 28" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160
|
||||
44c30 0
|
||||
58-18 88-18s
|
||||
58 18 88 18
|
||||
58-18 88-18
|
||||
58 18 88 18
|
||||
v44h-352z"></path>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="50" y="6" fill="#ffffff"></use>
|
||||
<use xlink:href="#gentle-wave" x="20" y="3" fill="#ffffff33"></use>
|
||||
<use xlink:href="#gentle-wave" x="80" y="0" fill="#ffffff66"></use>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 639 B |
@ -0,0 +1,10 @@
|
||||
import { createPinia } from 'pinia';
|
||||
import { createUnistorage } from 'pinia-plugin-unistorage'
|
||||
|
||||
const store = createPinia()
|
||||
store.use(createUnistorage())
|
||||
|
||||
export { store }
|
||||
export { useAuthStore } from './modules/auth'
|
||||
export { useDemo1Store } from './modules/demo1'
|
||||
export { useDemo2Store } from './modules/demo2'
|
||||
@ -0,0 +1,36 @@
|
||||
import {defineStore, storeToRefs} from 'pinia'
|
||||
/**
|
||||
* 授权仓库
|
||||
*/
|
||||
export const useAuthStore = defineStore('useAuthStore', {
|
||||
state: () => {
|
||||
return {
|
||||
/**
|
||||
* 登录用户信息
|
||||
*/
|
||||
user:undefined,
|
||||
/**
|
||||
* 授权令牌
|
||||
*/
|
||||
token:undefined,
|
||||
/**
|
||||
* 用户角色列表
|
||||
*/
|
||||
roles:[],
|
||||
/**
|
||||
* 用户权限列表
|
||||
*/
|
||||
permission:[]
|
||||
}
|
||||
},
|
||||
//计算字段
|
||||
getters: {
|
||||
|
||||
},
|
||||
//方法
|
||||
actions: {
|
||||
|
||||
},
|
||||
unistorage: true // 开启后对 state 的数据读写都将持久化
|
||||
|
||||
})
|
||||
@ -0,0 +1,30 @@
|
||||
import {defineStore} from 'pinia'
|
||||
/**
|
||||
* 测试非持久化数据仓库
|
||||
*/
|
||||
export const useDemo1Store = defineStore('useDemo1Store', {
|
||||
state: () => {
|
||||
return {
|
||||
name:undefined,
|
||||
age:18,
|
||||
sex:true
|
||||
}
|
||||
},
|
||||
//计算字段
|
||||
getters: {
|
||||
getName(){
|
||||
return this.name || '匿名'
|
||||
},
|
||||
getSex(){
|
||||
return this.sex?'男':'女';
|
||||
}
|
||||
},
|
||||
//方法
|
||||
actions: {
|
||||
setName(name){
|
||||
this.name = name;
|
||||
}
|
||||
},
|
||||
unistorage: false // 开启后对 state 的数据读写都将持久化
|
||||
|
||||
})
|
||||
@ -0,0 +1,32 @@
|
||||
import {
|
||||
defineStore
|
||||
} from 'pinia'
|
||||
/**
|
||||
* 测试持久化数据仓库
|
||||
*/
|
||||
export const useDemo2Store = defineStore('useDemo2Store', {
|
||||
state: () => {
|
||||
return {
|
||||
name: undefined,
|
||||
age: 18,
|
||||
sex: true
|
||||
}
|
||||
},
|
||||
//计算字段
|
||||
getters: {
|
||||
getName() {
|
||||
return this.name || '匿名'
|
||||
},
|
||||
getSex() {
|
||||
return this.sex ? '男' : '女';
|
||||
}
|
||||
},
|
||||
//方法
|
||||
actions: {
|
||||
setName(name) {
|
||||
this.name = name;
|
||||
}
|
||||
},
|
||||
unistorage: true // 开启后对 state 的数据读写都将持久化
|
||||
|
||||
})
|
||||
@ -0,0 +1 @@
|
||||
# 自定义组件库
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<view class="w-footer" :style="{'--w-bottom':$w.bottom+'px'}">
|
||||
{{$env.copy}}
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-footer {
|
||||
position: fixed;
|
||||
bottom:var(--w-bottom);
|
||||
left:0;
|
||||
font-size: .75rem;
|
||||
color:var(--w-main);
|
||||
text-shadow: .1rem .1rem 0 #0002;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
padding: .3rem 0;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view class="loader-root" :style="{'--opacity':props.opacity,'--height':props.height}">
|
||||
<view class="loader">
|
||||
<view class="face">
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
<view class="face">
|
||||
<view class="circle"></view>
|
||||
</view>
|
||||
<view class="logo"><img class="img" src="/static/logo.png" loading="lazy"></view>
|
||||
</view>
|
||||
<view v-if="props.title" class="loader-title">{{props.title}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import wx from '../../mixins/mp-weixin.js'
|
||||
export default {
|
||||
mixins:[wx]
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
title:{
|
||||
type:String,
|
||||
default:"加载中..."
|
||||
},
|
||||
opacity: {
|
||||
type:Number,
|
||||
default:1
|
||||
},
|
||||
height: {
|
||||
type:String,
|
||||
default:"100vh"
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loader {
|
||||
width: 20em;
|
||||
height: 20em;
|
||||
font-size: 1.5vmin;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loader .face {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
animation: animate 3s linear infinite;
|
||||
}
|
||||
|
||||
.loader .face:nth-child(1) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--w-error-light);
|
||||
border-color: currentColor transparent transparent currentColor;
|
||||
border-width: 0.2em 0.2em 0em 0em;
|
||||
--deg: -45deg;
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
.loader .face:nth-child(2) {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
color: var(--w-success-light);
|
||||
border-color: currentColor currentColor #0000 #0000;
|
||||
border-width: 0.2em 0em 0em 0.2em;
|
||||
--deg: -135deg;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.loader .face .circle {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 0.1em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: #0000;
|
||||
transform: rotate(var(--deg));
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.loader .face .circle::before {
|
||||
position: absolute;
|
||||
top: -.5em;
|
||||
right: -0.45em;
|
||||
content: '';
|
||||
width: .6em;
|
||||
height: .6em;
|
||||
background-color: currentColor;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 .5em .15em currentColor;
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
.loader-root {
|
||||
width: 100%;
|
||||
height: var(--height,100vh);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
opacity:1;
|
||||
transition: opacity 5s,display 5s / 5s;
|
||||
|
||||
&::before {
|
||||
background-image: radial-gradient(closest-side,var(--w-main-light-1),var(--w-main));
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: var(--opacity,1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.loader-title {
|
||||
margin: 4vmin 0 10vmin;
|
||||
font-size: 3vmin ;
|
||||
color: var(--w-bg-dark);
|
||||
text-shadow: .2vmin .2vmin 0 var(--w-main);
|
||||
letter-spacing: .3vmin;
|
||||
position: relative;
|
||||
}
|
||||
.loader .logo .img {
|
||||
width: 17vmin;
|
||||
height: 17vmin;
|
||||
}
|
||||
.loader .logo {
|
||||
background-image: linear-gradient(to bottom,#FFF,#aaa);
|
||||
padding: 3vmin ;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 .5vmin #fff inset, 0 0 2vmin #0006;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<view class="w-navbar" :style="{'--w-top':$w.top+'px'}" >
|
||||
<view class="w-navbar-body" :class="{'w-navbar-body-fixed':props.fixed}">
|
||||
<view v-if="!props.leftHide && (props.leftBack || props.leftHome)" class="w-navbar-body-left"><slot name="left">
|
||||
<view class="w-navbar-left" :class="{'w-navbar-left-bg':props.leftBg,'w-navbar-left-icon-margin':props.leftBack && props.leftHome}">
|
||||
<view v-if="props.leftBack" @tap.stop.prevent="$w.back()" class="icon"><u-icon name="arrow-left" color="currentColor" size="18"></u-icon></view>
|
||||
<view v-if="props.leftHome" @tap.stop.prevent="$w.uni.reLaunch({url:props.leftHomePage})" class="icon"><u-icon name="home" color="currentColor" size="18"></u-icon></view>
|
||||
</view>
|
||||
</slot></view>
|
||||
<view v-if="!props.rightHide" class="w-navbar-body-right"><slot name="right"></slot></view>
|
||||
<view class="w-navbar-body-title"><slot>{{props.title}}</slot></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
fixed:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
|
||||
title:{
|
||||
type:String,
|
||||
default:"页面标题",
|
||||
},
|
||||
leftHide:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
rightHide:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
leftBg:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
leftBack:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
leftHome:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
leftHomePage:{
|
||||
type:String,
|
||||
default:"/pages/index/index",
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.w-navbar {
|
||||
position: relative;
|
||||
--h:var(--height,44px);
|
||||
height: calc(var(--h) + var(--w-top));
|
||||
font-size: var(--font-size,calc(var(--h) * .4));
|
||||
color: var(--color,var(--w-bg));
|
||||
z-index: var(--z-index,var(--w-z-index));
|
||||
|
||||
&-body {
|
||||
position: relative;
|
||||
height: var(--h);
|
||||
box-sizing: content-box;
|
||||
padding-top: var(--w-top);
|
||||
background-image: linear-gradient(to right,var(--color-1,var(--w-main)),var(--color-2,var(--w-main-light)),var(--color1,var(--w-main)));
|
||||
display: flex;
|
||||
|
||||
&-fixed {
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
height: var(--h);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
text-shadow: 1px 1px 0 #0006;
|
||||
font-weight: bold;
|
||||
letter-spacing: .2em;
|
||||
}
|
||||
&-left,&-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
&-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&-left {
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
padding: 5px;
|
||||
background-color: #0000;
|
||||
margin-left: 5px;
|
||||
border-radius: 100px;
|
||||
border: solid 1px #FFF0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&-icon-margin .icon {
|
||||
margin: 0 5px;
|
||||
}
|
||||
&-bg {
|
||||
border: solid 1px #FFF8;
|
||||
background-color: #0007;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,10 @@
|
||||
# w-safe-var 安全区域
|
||||
> 提供--w-top,--w-right,--w-bottom,--w-left四个CSS变量,方便子孙元素使用
|
||||
|
||||
可以传入的css变量:
|
||||
- `--position`:定位方式,默认:flex;
|
||||
- `--top`: 安全区域内的top偏移值,默认:0;
|
||||
- `--right`: 安全区域内的right偏移值,默认:0;
|
||||
- `--bottom`: 安全区域内的bottom偏移值,默认:0;
|
||||
- `--left`: 安全区域内的left偏移值,默认:0;
|
||||
- `--z-index`: z轴坐标,默认: --w-z-index - 1;
|
||||
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<view class="w-safe-area" :style="{'--w-top':$w.top+'px','--w-right':$w.right+'px','--w-bottom':$w.bottom+'px','--w-left':$w.left+'px'}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.w-safe-area {
|
||||
position: var(--position,fixed);
|
||||
left: calc(var(--left,0px) + var(--w-left));
|
||||
top: calc(var(--top,0px) + var(--w-top));
|
||||
right: calc(var(--right,0px) + var(--w-right));
|
||||
bottom: calc(var(--bottom,0px) + var(--w-bottom));
|
||||
z-index: calc(var(--z-index,var(--w-z-index)) - 1);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,2 @@
|
||||
# w-safe-var 安全区域变量
|
||||
> 提供--w-top,--w-right,--w-bottom,--w-left四个CSS变量,方便子孙元素使用
|
||||
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<view :style="{'--w-top':$w.top+'px','--w-right':$w.right+'px','--w-bottom':$w.bottom+'px','--w-left':$w.left+'px'}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import wx from '../../mixins/mp-weixin.js'
|
||||
export default {
|
||||
mixins:[wx]
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,32 @@
|
||||
import {
|
||||
util
|
||||
} from './modules/util.js'
|
||||
import prototypes from './modules/prototypes.js'
|
||||
import {
|
||||
PageAnimationTypeIn,
|
||||
PageAnimationTypeOut
|
||||
} from './modules/PageAnimationType.js'
|
||||
|
||||
const $w = {
|
||||
uni,
|
||||
...uni.getSystemInfoSync().safeAreaInsets,
|
||||
...util,
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const wPlugin = {
|
||||
install(Vue){
|
||||
prototypes();
|
||||
Vue.config.globalProperties.$w = $w;
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
util,
|
||||
$w,
|
||||
wPlugin,
|
||||
PageAnimationTypeIn,
|
||||
PageAnimationTypeOut
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
.w-lines {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.w-flex {
|
||||
@include flex;
|
||||
&-column {
|
||||
@include flex(column);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flex($d: row) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: $d;
|
||||
}
|
||||
page,view {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
page,.w-var {
|
||||
|
||||
--w-step: #{$w-step};
|
||||
|
||||
--w-z-index: #{$w-z-index};
|
||||
|
||||
--w-z-index-top: #{$w-z-index-top};
|
||||
|
||||
|
||||
@include varColor($colors,$w-step);
|
||||
}
|
||||
|
||||
:root {
|
||||
--w-step: #{$w-step};
|
||||
|
||||
--w-z-index: #{$w-z-index};
|
||||
|
||||
--w-z-index-top: #{$w-z-index-top};
|
||||
|
||||
|
||||
@include varColor($colors,$w-step);
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
export const PageAnimationTypeIn = ["slide-in-right","slide-in-left","slide-in-top","slide-in-bottom","pop-in","fade-in","zoom-out","zoom-fade-out","none"]
|
||||
export const PageAnimationTypeOut = ["slide-out-right","slide-out-left","slide-out-top","slide-out-bottom","pop-out","fade-out","zoom-in","zoom-fade-in","none"]
|
||||
@ -0,0 +1,41 @@
|
||||
import {
|
||||
PageAnimationTypeIn,
|
||||
PageAnimationTypeOut
|
||||
} from "./PageAnimationType"
|
||||
export const util = {
|
||||
back(delta = 1, animationType = 'random', animationDuration = 300) {
|
||||
if (!PageAnimationTypeOut.includes(animationType)) {
|
||||
animationType = PageAnimationTypeOut[util.random(0, PageAnimationTypeOut.length)];
|
||||
}
|
||||
return new Promise((success, fail) => {
|
||||
uni.navigateBack({
|
||||
delta,
|
||||
animationType,
|
||||
animationDuration,
|
||||
success,
|
||||
fail
|
||||
});
|
||||
});
|
||||
},
|
||||
to(url = "", events = {}, animationType = 'random', animationDuration = 300) {
|
||||
if (!PageAnimationTypeIn.includes(animationType)) {
|
||||
animationType = PageAnimationTypeIn[util.random(0, PageAnimationTypeIn.length)];
|
||||
}
|
||||
return new Promise((success, fail) => {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
events,
|
||||
animationType,
|
||||
animationDuration,
|
||||
success,
|
||||
fail
|
||||
});
|
||||
});
|
||||
},
|
||||
random(min = 0, max = 10) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
},
|
||||
px(num=0) {
|
||||
return num+"px";
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
export const customStyle = {
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
}
|
||||
|
||||
export const customClass = {
|
||||
customClass: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
/**
|
||||
说明:
|
||||
1. 在页面中建议使用css变量,原因有2:
|
||||
1.1. 主题更换/暗黑主题,可以改变父(根)标签的css变量实现
|
||||
1.2. 自定义组件设置css变量改变组件式样,这点在微信小程序及virtualHost下注意
|
||||
2. $变量对应css变量:$w-z-index -> --w-z-index
|
||||
3. 颜色变量说明,$colors中有main的键,对应的变量有
|
||||
3.1. --w-main: 颜色值
|
||||
3.2. --w-main-light: 颜色值 亮度 + $w-step
|
||||
3.3. --w-main-light-1: 颜色值 亮度 + $w-step * 2
|
||||
3.4. --w-main-light-2: 颜色值 亮度 + $w-step * 3
|
||||
3.5. --w-main-dark: 颜色值 亮度 - $w-step
|
||||
3.6. --w-main-dark-1: 颜色值 亮度 - $w-step * 2
|
||||
3.7. --w-main-dark-2: 颜色值 亮度 - $w-step * 3
|
||||
3.8. --w-main-h: 颜色色相
|
||||
3.9. --w-main-s: 颜色饱和度
|
||||
3.10. --w-main-l: 颜色亮度
|
||||
3.11. $w-step对应--w-step,亮度变化基础值
|
||||
4.如果需要更多的颜色:
|
||||
4.1. 使用css的hsl函数构造颜色: hsl(var(--w-main-h),var(--w-main-s),calc(var(--w-main-l) + 50%))
|
||||
4.2. 使用css的hsla函数构造透明度颜色: hsl(var(--w-main-h),var(--w-main-s),var(--w-main-l),.5)
|
||||
4.3. 使用css函数构造颜色,比较scss函数构造颜色在写法上显得麻烦一些,尽量使用预定义的颜色
|
||||
4.4. 构造颜色时,色相\饱和度\亮度\透明度都可以自由设置,但建议只修改亮度和透明度
|
||||
*/
|
||||
//颜色亮度变化值
|
||||
$w-step: 10;
|
||||
// 普通z轴基础坐标
|
||||
$w-z-index:100;
|
||||
// 顶层z轴基础坐标
|
||||
$w-z-index-top:99999;
|
||||
|
||||
$colors:
|
||||
(
|
||||
"main": #2564a1,
|
||||
"text": #333,
|
||||
"bg": #F8F8F8,
|
||||
"primary": #3c9cff,
|
||||
"warn": #eaa339,
|
||||
"success": #5ac725,
|
||||
"info": #999,
|
||||
"error": #f56c6c
|
||||
);
|
||||
|
||||
|
||||
|
||||
@mixin varColor($map,$step) {
|
||||
@each $name , $value in $map {
|
||||
--w-#{$name}:#{$value};
|
||||
--w-#{$name}-h:#{hue($value)};
|
||||
--w-#{$name}-s:#{saturation($value)};
|
||||
--w-#{$name}-l:#{lightness($value)};
|
||||
--w-#{$name}-light:#{hsl(hue($value),saturation($value),lightness($value) + $step)};
|
||||
--w-#{$name}-light-1:#{hsl(hue($value),saturation($value),lightness($value) + ($step * 2))};
|
||||
--w-#{$name}-light-2:#{hsl(hue($value),saturation($value),lightness($value) + ($step * 3))};
|
||||
--w-#{$name}-dark:#{hsl(hue($value),saturation($value),lightness($value) - $step)};
|
||||
--w-#{$name}-dark-1:#{hsl(hue($value),saturation($value),lightness($value) - ($step * 2))};
|
||||
--w-#{$name}-dark-2:#{hsl(hue($value),saturation($value),lightness($value) - ($step * 3))};
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import uni from '@dcloudio/vite-plugin-uni'
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
uni(),
|
||||
],
|
||||
})
|
||||
Loading…
Reference in New Issue