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

2023-12-15 10:20:26


yma16-logo

?前言

大家好,我是yma16,本文分享关于 uniapp框架——初始化vue3项目(搭建ai项目第一步)。
vue3系列相关文章:
vue3 + fastapi 实现选择目录所有文件自定义上传到服务器
前端vue2、vue3去掉url路由“ # ”号——nginx配置
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
认识vite_vue3 初始化项目到打包
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容
前端vue3——html2canvas给网站截图生成宣传海报
拖拽相关文章
前端——html拖拽原理
前端vue3——实现二次元人物拼图校验

💖 小程序系列文章

小程序组件传值
小程序自定义微信昵称和头像
小程序制作markdown博客
小程序结合chatgpt制作聊天页面
小程序复制到粘贴板的功能实现
小程序的markdown代码块复制功能
小程序图片二维码识别
小程序获取openid联动django实现
微信小程序_搜索图片功能实现
uniapp框架

uni-app 是一个使用 Vue.js
开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

?uniapp创建项目

工具:hbuilder

💖 初始化项目

创建项目选择vue3,uni ui
uni-create
选择运行
run
目录结构

┌─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内置的常用样式变量

💖 uni实例生命周期

下面我只枚举常用的几个

api说明
onInit监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad
onLoad监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参),参考示例。
onShow监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化

💖 组件生命周期

组件的生命周期同框架的生命周期
如:

  1. vue2则是vue2的生命周期
  2. vue3则是vue3的生命周期

💖 页面调用

  1. getApp()能获取globalData充当全局变量使用
  2. getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,数组中的元素为页面实例,第一个元素为首页,最后一个元素为当前页面。
  3. $getAppWebview() 可以得到当前webview的对象实例

💖 页面通讯

事件传递冒泡
事件定义

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

参数类型定义

属性类型
eventName事件名称
callback回调函数

💖 路由

uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。

路由方式页面栈表现触发时机
初始化新页面入栈uni-app 打开的第一个页面
打开新页面新页面入栈调用 API uni.navigateTo 、使用组件
页面重定向当前页面出栈,新页面入栈调用 API uni.redirectTo 、使用组件
页面返回页面不断出栈,直到目标返回页调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换页面全部出栈,只留下新的 Tab 页面调用 API uni.switchTab 、使用组件 、用户切换 Tab
重加载页面全部出栈,只留下新的页面调用 API uni.reLaunch 、使用组件

?搭建首页

创建vue3的页面,在pages.json引用

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

index.vue

<template>
	<view class="container">
		<view class="container-header">
			{{state.title}}
		</view>

		<view class="container-bottom">
			<button class="button" type="primary" @click="monitorBtn">{{state.btnText}}</button>
		</view>
	</view>
</template>

<script setup>
	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()
	}
</script>

<style>
	.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%;
	}
</style>

首页搭建
monitor-page

?form表单校验页面

vue3用户表单填写界面
主要填写

  • 行业
  • 岗位
  • 工作年限

代码实现

<template>
	<view class="container">

		<view>
			<uni-forms ref="baseFormRef" label-width='200px' :modelValue="state.baseFormData" label-position='top'>
				<uni-forms-item label="行业" name="industry" required>
					<uni-data-select v-model:value="state.baseFormData.industry" :localdata="state.industryData"
						@change="changeIndustry">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="岗位" name="post" required>
					<uni-data-select v-model:value="state.baseFormData.post" :localdata="state.postData"
						@change="changePost">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="工作年限(年)" name="workAge">
					<uni-number-box v-model="state.baseFormData.workAge" :min="0" :max="35" step='0.5' />
				</uni-forms-item>
			</uni-forms>

		</view>
		<view>
			<button type="primary" @click="confirm">
		
				进入面试
		
			</button>
		</view>

	</view>
</template>

<script setup>
	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)
	})
</script>

<style>
	.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%;
	}
</style>

填写表单校验页面
post-form
回答问题界面
question-page

?总结

  1. 跨平台:UniApp是一种基于Vue.js的跨平台开发框架,可以轻松地将应用程序发布到iOS和Android平台。

  2. 开发效率高:UniApp提供了一套完整的工具链,包括IDE、模拟器、调试器、打包工具等,让开发人员可以快速构建出高质量的应用程序。

  3. 组件丰富:UniApp提供了丰富的组件库,包括常用的表单组件、布局组件、图表组件等,可以帮助开发人员轻松构建出漂亮的用户界面。

  4. 性能优越:UniApp通过优化渲染机制,实现了与原生应用程序相当的性能表现,同时还支持原生渲染和Web渲染两种方式。

  5. 社区庞大:UniApp拥有庞大的社区支持,开发人员可以在社区中获得帮助、分享经验,并且还可以使用社区提供的插件来扩展应用程序的功能。

?结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
cute-img

👍 点赞,是我创作的动力!
?? 收藏,是我努力的方向!
?? 评论,是我进步的财富!
💖 感谢你的阅读!

文章来源:https://blog.csdn.net/qq_38870145/article/details/134906708
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。