<template>
	<view class="w-body">
		<w-navbar fixed left-home left-back title="环境变量" class="navbar"></w-navbar>
		<view style="padding:1rem;">
			<view>
				在js中使用环境变量:
			</view>
			<view>
				<text class="title"> title={{ title }}</text>
			</view>
			<view>
				<text class="title"> demo={{ demo }}</text>
			</view>
			<view>
				<text class="title"> baseApi={{ baseApi }}</text>
			</view>
			<view>
				<text class="title"> baseWs={{ baseWs }}</text>
			</view>
			<view>
				<text class="title"> baseResources={{ baseResources }}</text>
			</view>
			
			<view style="background-color: var(--w-primary-dark); height: 1px; margin: 1rem 0;">
				
			</view>
			<view>
				<text class="title">模板中直接使用环境变量:{{ $env.title }}</text>
			</view>
			<view>
				<text class="env">{{ $env }}</text>
			</view>
		</view>
		<w-footer></w-footer>
	</view>
</template>

<script setup>
	import {ref,getCurrentInstance} from 'vue'
	
	import {env } from '@/env.js'
	
	const {proxy} = getCurrentInstance();
	console.debug(proxy);
	const title = ref(proxy.$env.title);
	
	// let title1 = env.title;
	// let demo = env.demo;
	// let baseApi = env.baseApi;
	let {demo,baseApi,baseWs,baseResources} = env;
</script>

<style lang="scss" scoped>
	.w-body {
		padding: var(--window-top) var(--window-right) var(--window-bottom) var(--window-right);
	}
</style>