环境,环境变量,自定义组件,demo
parent
c263790378
commit
5f2a5bb71f
@ -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,25 @@
|
|||||||
|
<template>
|
||||||
|
<view class="w-body">
|
||||||
|
<view>
|
||||||
|
<text class="title">js中获取环境变量:{{ title }}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text class="title">模板中直接使用环境变量:{{ $env.title }}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text class="env">{{ $env }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref,getCurrentInstance} from 'vue'
|
||||||
|
const {proxy} = getCurrentInstance();
|
||||||
|
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>
|
||||||
@ -1,48 +1,63 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<view class="w-body">
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<image class="logo" src="/static/logo.png"></image>
|
<view class="title">{{$env.title}}</view>
|
||||||
<view class="text-area">
|
<navigator url="/pages/demo/demo1" class="demo">demo</navigator>
|
||||||
<text class="title">{{ title }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
|
<w-loader title="" opacity="1" height="70vh"></w-loader>
|
||||||
|
<image mode="aspectFit" lazy-load class="wave" src="/static/wave.svg" />
|
||||||
|
<w-footer custom-style=""></w-footer>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: 'Hello',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onLoad() {},
|
|
||||||
methods: {},
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
.content {
|
.w-body {
|
||||||
display: flex;
|
position: relative;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
.content {
|
||||||
justify-content: center;
|
position: absolute;
|
||||||
}
|
text-align: center;
|
||||||
|
line-height: 2;
|
||||||
.logo {
|
width: 100%;
|
||||||
height: 200rpx;
|
left: 0;
|
||||||
width: 200rpx;
|
top: 50vh;
|
||||||
margin-top: 200rpx;
|
z-index: 1;
|
||||||
margin-left: auto;
|
color: $uni-text-color-inverse;
|
||||||
margin-right: auto;
|
font-weight: bold;
|
||||||
margin-bottom: 50rpx;
|
|
||||||
}
|
.title {
|
||||||
|
font-size: 1.5rem;
|
||||||
.text-area {
|
letter-spacing: .5rem;
|
||||||
display: flex;
|
text-shadow: .2rem .2rem 0 $uni-text-color;
|
||||||
justify-content: center;
|
}
|
||||||
}
|
|
||||||
|
.demo {
|
||||||
.title {
|
background-color: #0002;
|
||||||
font-size: 36rpx;
|
width: 6rem;
|
||||||
color: #8f8f94;
|
margin: 1rem auto 0;
|
||||||
}
|
font-size: 1rem;
|
||||||
|
border-radius: 5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all .5s;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
background-color: $w-color-1;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
aspect-ratio: 4/1;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</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.
|
Before Width: | Height: | Size: 3.9 KiB 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 @@
|
|||||||
|
# 自定义组件库
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<view class="w-footer-root" :style="customStyle">
|
||||||
|
{{$env.copy}}
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import wx from '../mixins/mp-weixin.js'
|
||||||
|
export default {
|
||||||
|
mixins:[wx]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
// useMixin(myMixin);
|
||||||
|
const props = defineProps({
|
||||||
|
customStyle:{
|
||||||
|
type:[String,Object],
|
||||||
|
default:""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.w-footer-root {
|
||||||
|
position: fixed;
|
||||||
|
bottom:var(--window-bottom);
|
||||||
|
left:0;
|
||||||
|
font-size: .75rem;
|
||||||
|
color:$uni-text-color;
|
||||||
|
text-shadow: .1rem .1rem 0 $uni-text-color-inverse;
|
||||||
|
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: #0d9be0;
|
||||||
|
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: #7bc528;
|
||||||
|
border-color: currentColor currentColor transparent transparent;
|
||||||
|
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,$w-color-2,$w-color-1);
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: var(--opacity,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.loader-title {
|
||||||
|
margin: 4vmin 0 10vmin;
|
||||||
|
font-size: 3vmin;
|
||||||
|
color:#ccc;
|
||||||
|
text-shadow: .2vmin .2vmin 0 $w-color-1;
|
||||||
|
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>
|
||||||
Loading…
Reference in New Issue