uniapp框架——初始化vue3项目(搭建ai项目第一步)

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

1. uni.$emit(eventName,OBJECT)
触发全局的自定义事件。附加参数都会传给监听器回调。
2. u服务器托管网ni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
3. uni.$once(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
4. uni.$off([eventName, callback])
移除全局自定义事件监听器。

{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTitleText": ""
			}
		}
]

	
		
			{{state.title}}
		

		
			{{state.btnText}}
		
	



	import {
		reactive,
		onMounted,
		ref
	} from 'vue'
	const state = reactive({
		title: 'AI模拟面试',
		btnText: '模拟面试',
		drawerVisible: false
	})
	const drawRef = ref(null);
	const monitorBtn = () => {
		console.log('模拟面试')
	}

	const reverseDrawer = () => {
		closeDrawer()
	}
	// 打开窗口
	function showDrawer() {
		console.log('drawRef',drawRef)
	}
	// 关闭窗口
	function closeDrawer() {
		drawRef.value.close()
	}



	.container {
		width: 100%;
		height: 100vh;
		background: url('https://yongma16.xyz/staticFile/common/img/ling.jpg');
		background-repeat: no-repeat;
		background-size: 100%;
		/* fallback for old browsers */
		/* background: -webkit-linear-gradient(to bottom, #8f94fb, #4e54c8); */
		/* Chrome 10-25, Safari 5.1-6 */
		/* background: linear-gradient(to bottom, #8f94fb, #4e54c8); */
		/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

		margin: 0;
		padding: 0;
	}

	.container-header {
		position: absolute;
		width: 100%;
		text-align: center;
		font-family: Helvetica;
		color: rgba(255,255,255,1);
		background: rgba(41, 128, 221,.1);
		font-size: 18px;
		font-weight: bold;
		top: 0px;
	}

	.container-bottom {
		position: absolute;
		bottom: 20px;
		width: 100%;
		text-align: center;
	}

	.button {
		width: 200px;
		background: rgba(255,255,255,.5);
	}
	.drawer-box{
		width: 100%;
	}
	.drawer-box .uni-drawer__content{
		width:100%;
	}

	

		
			
				
					
					
				
				
					
					
				
				
					
				
			

		
		
			
		
				进入面试
		
			
		

	



	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	const baseFormRef = ref(null);
	const state = reactive({
		// 基础表单数据
		baseFormData: {
			// 行业
			industry: '',
			// 岗位
			post: '',
			// 工作年限
			workAge: ''
		},
		rules: {
			industry: {
				rules: [{
					required: true,
					errorMessage: '请选择行业',
				}]
			},
			post: {
				rules: [{
					required: true,
					errorMessage: '请选择岗位',
				}]
			},
			workAge: {
				rules: [{
					required: false,
					errorMessage: '请设置工作年限',
				}]
			}
		},
		industryData: [{
				value: 'net',
				text: "互联网"
			},
			{
				value: 'house',
				text: "房地产"
			},
			{
				value: 'drink',
				text: "餐饮店"
			}
		],
		postData: [{
				value: 'front',
				text: "web前端vue2 vue3 "
			},
			{
				value: 'back',
				text: "后端 java spring cloud"
			}
		],
	})

	const changeIndustry = (value) => {
		console.log('切换行业', value)
		state.baseFormData.industry = value
	}

	const changePost = (value) => {
		console.log('切换岗位', value)
		state.baseFormData.post = value
	}

	const confirm = () => {
		console.log('confirm')
		baseFormRef.value.validate(['industry', 'post', 'workAge'], (err, formData) => {
			if (!err) {
				console.log('success', formData)
				//userDetail
				uni.navigateTo({
					url: '/pages/chat/index'
				});
			}
		})
	}
	onMounted(()=>{
		baseFormRef.value.setRules(state.rules)
	})



	.container {
		height: 100vh;
		padding: 20px;
		background: 服务器托管网 linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, .6)), url('https://yongma16.xyz/staticFile/common/img/ling.jpg');
		background-repeat: no-repeat;
		background-size: 100%;
	}