2022-09-09 uni-app学习笔记(六) uniapp常用API,使用uniapp常用API(uni.chooseImage等)实现聊天框的选择图片和input框发送文本信息功能

1. uniapp的js的API由两个部分组成

uniapp的js代码,h5端运于浏览器中,非h5端:Android平台运行于w8引擎中,IOS平台运行于IOS自带的jscore引擎中,
因此uniapp的js的API由两个部分组成:标准ECMAScript的jsAPI和uni扩展的API

标准ECMAScript的jsAPI

ECMAScript由ECMA国际管理,是基础js语法,

• 浏览器基于标准js扩充了window,document等jsAPI
• Node.js基于标准js扩充了fs等模块
• 小程序也基于标准js扩展了各种wx.xxx,my.xxx,swan.xxx等等API

标准ECMAScript的AP非常多,比如console,setTimeout等等

非h5端虽然不支持window,document等浏览器的api,单页支持标准ECMAScript
(浏览器里的js不等同域标准js)

uniapp扩展的APi

uniapp 的非h5端一样支持标准js,支持if,for等语法,支持字符串,数组,时间等等变量以及各种处理方法
即:它仅仅不支持浏览器专用对象(比如window和document等等)

https://uniapp.dcloud.net.cn/api/#标准-js-和浏览器-js-的区别

2.uniapp常用的api(看官网)

官网位置:https://uniapp.dcloud.net.cn/api/global.html

3.使用uniapp常用的api完善模拟聊天框

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

3.1.把静态的聊天内容和聊天图片渲染成动态绑定

<template>
<view class="container">
	<!-- 聊天列表 -->
	<view class="chat-body">
		<!-- step2:使用一个block标签包裹聊天列表并使用v-for遍历chatList数据 -->
		<block v-for="(item,index) in chatList" :key="index">
			<!-- step3:使用v-if和v-else分支条件分别渲染对方消息和我方消息 -->
			<view class="chat-one" v-if="!item.isMe">			
				<image class="chat-face" src="/static/chatImg/女孩.png"/>
				<!-- 女孩:文字 -->
				<view class="chat-box">
					<view class="chat-sender">客服小梅</view>
					<view class="chat-content" v-if="item.type==='text'">{
  {item.content}}</view>
					<image class="chat-img" v-if="item.type==='image'" :src="item.path"/>
				</view>
			</view>
			<view class="chat-one chat-one-mine" v-else>
				<!-- 男孩:图片 -->
				<view class="chat-box">
					<image class="chat-img" v-if="item.type==='image'" :src="item.path"/>
					<view class="chat-content" v-if="item.type==='text'">{
  {item.content}}</view>
				</view>
				<image class="chat-face" src="/static/chatImg/男孩.png"/>
			</view>
		</block>
	</view>
	<!-- 聊天输入 -->
	<view class="chat-footer">
		<input type="text" class="msg-input" cursor-spacing="16"/>
		<image class="img-chose" src="../../static/chatImg/图片.png"/>
		<view class="send-btn">发送</view>
	</view>
</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				// step1:创建chatList对象
				chatList:[{
    
					isMe:false,
					type:"text",
					content:"我是客服小梅,请问您想咨询什么问题?"
				},{