2022-09-08 uni-app学习笔记(五) uniapp常用组件:view,text,navigator等,使用常见组件写一个模拟聊天页面

uniapp基础组件与html基础标签的不同

uniapp为开发者提供了一系列的基础组件(比如view,text等等)
与html的基础标签元素不同的是,uniapp的基础组件与小程序相同,更适合手机端

*如果非要在uniapp中使用div,编译过程中会自动把div转换成view,以及span和a标签会分别自动转换成text和navigator标签

div==>view
span==>text
a==>navigate

有哪些uniapp常用组件?

官网地址:https://uniapp.dcloud.net.cn/component/

示例:使用常用组件进行页面布局

• step1:新建static文件夹下的chatImg目录用于放置需要用到的图片
  包括:聊天图片"gaara.png",两张头像图片"男孩.png"和"女孩.png"以及图片icon"图片.png""
• step2:新建subpages/chat/chat.vue,并在index.vue中引入

index.vue

<view class="">
	<navigator url="/subpages/chat/chat">联系客服</navigator>
</view>

• step3:使用uniapp常用组件写一个微信聊天页面

chat.vue

<template>
<view class="container">
	<!-- 1.聊天列表 -->
	<view class="chat-body">
		<!-- 对方消息 -->
		<view class="chat-one">			
			<image class="chat-face" src="/static/chatImg/女孩.png"/>
			<view class="chat-box">
				<!-- 此处应为"客服"不是"客户"下同 -->
				<view class="chat-sender">客户小梅</view>
				<view class="chat-content">你好,我是客户小梅,请问您想咨询什么问题?</view>
			</view>
		</vie