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

文章目录

1. uniapp的js的API由两个部分组成
- 标准ECMAScript的jsAPI
- uniapp扩展的APi
2.uniapp常用的api(看官网)
3.使用uniapp常用的api完善模拟聊天框
- 3.1.把静态的聊天内容和聊天图片渲染成动态绑定
- 3.2.点击"照片.png"可以选择要发送的图片
- - 第一步:使用uni.chooseImage从本地相册选择图片并发送消息
  - 第二步:使用uni.pageScrollTop将聊天页面滚动到目标位置
  - 第三步:使用uni.setStorageSync将数据异步存储在本地缓存中指定的 key以及uni.getStorageSync从本地缓存中异步获取指定 key 对应的内容
- 3.3.点击"发送"可以发送input框中的文本信息到聊天记录中
4. 完整代码

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:"我是客服小梅,请问您想咨询什么问题?"},{isMe:false,type:"image",path:"/static/chatImg/gaara.png"},{isMe:true,type:"text",content:"你好,请问这是谁的头像?"},{isMe:true,type:"image",path:"/static/chatImg/gaara.png"},]}},}
</script><style lang="scss" scoped>
.....
</style>

此时显示效果不变,只是将数据改成动态绑定的

3.2.点击"照片.png"可以选择要发送的图片

第一步:使用uni.chooseImage从本地相册选择图片并发送消息

为"照片.png"绑定点击事件,并在点击事件中调用选择图片的事件uni.APIchooseImage

官网位置:https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage

chooseImage的常用参数:

代码:
step1:给"图片.png"绑定点击事件

<image class="img-chose" src="../../static/chatImg/图片.png" @click="choseImgAndSend()"/>

step2: 在点击事件中调用uni.chooseImage

choseImgAndSend(){uni.chooseImage({count:1,sizeType:["original","compressed"],//原图和压缩图片二者都可以sourceType:["album","camera"],//从相册或者相机中选择图片success:res=>{//若成功,则返回用户选择的图片路径(本地文件路径列表:tempFilePaths)console.log("res:",res);//先看看res输出了什么:console.log(res.tempFilePaths[0]);// 新增我方消息:格式做成chatList中的元素的形式let myMsg={isMe:true,//代表我方信息type:"image",path:res.tempFilePaths[0]}this.chatList.push(myMsg);//把新增的我方信息push进chatList数组中// 新增对方消息let herMsg={isMe:false,//代表对方信息type:"image",path:res.tempFilePaths[0]}this.chatList.push(herMsg);//把新增的对方信息push进chatList数组中/*此由于path是一样的,聊天对话内容会呈现"发啥图回啥图"的效果*/}})
}

此时还需要解决两个问题

聊天信息刷新后就会消失
发送的聊天信息超过屏幕高度时,不会自动下滑到最新聊天对话记录

第二步:使用uni.pageScrollTop将聊天页面滚动到目标位置

官网位置:https://uniapp.dcloud.net.cn/api/ui/scroll.html#pagescrollto

第三步:使用uni.setStorageSync将数据异步存储在本地缓存中指定的 key以及uni.getStorageSync从本地缓存中异步获取指定 key 对应的内容

uni.setStorage:将数据异步存储在本地缓存中指定的 key 中

官网地址:https://uniapp.dcloud.net.cn/api/storage/storage.html#setstorage
uni.setStorageSync:将数据同步存储在本地缓存中指定的 key 中
同上,略
uni.getStorage:从本地缓存中异步获取指定 key 对应的内容。
uni.getStorageSync:从本地缓存中同步获取指定 key 对应的内容。
同上,略

代码:

step1:存数据:

methods: {choseImgAndSend(){uni.chooseImage({...success:res=>{//若成功,则返回用户选择的图片路径(本地文件路径列表:tempFilePaths)...//把聊天信息的存储放在选择图片成功的回调中//第一个参数:本地缓存中的指定的 key//第二个参数:需要存储的内容(只支持原生类型以及能够JSON.stringify的对象)uni.setStorageSync("chatList",JSON.stringify(this.chatList));//页面自动滚动到最新聊天记录uni.pageScrollTo({scrollTop:999999,duration:1000});// 此处的bug:页面只显示到发送图片的我方,回复图片的对方消息不会显示出来//解决:在onShow中,也就是读取getStorage时,再调用一次uni.pageScrollTo//(并未解决问题,考虑在其他地方调用uni.pageScrollTo,先忽略)}})}
}

step2:取数据

onShow(){if(uni.getStorageSync('chatList')){//先判断是否有存储key为chatlist的信息//存的时候已经JSON.stringify,取的时候回自然要JSON.parsethis.chatList=JSON.parse(uni.getStorageSync('chatList'));//取出来的数据赋给chatlist数组//页面自动滚动到最新聊天记录uni.pageScrollTo({scrollTop:999999,duration:100});}
},

3.3.点击"发送"可以发送input框中的文本信息到聊天记录中

step1:给input框双向绑定字段myInput

<input type="text" class="msg-input" cursor-spacing="16" v-model='myInput'/>

step2:给发送按钮绑定点击事件

<view class="send-btn" @click="sendInputMsg()">发送</view>

step3:模仿发送图片的形式,在点击事件中发送文本信息

sendInputMsg(){if(!this.myInput) return;//input框为空就不发送// 新增我方文本消息let myMsg={isMe:true,//代表我方信息type:"text",content:this.myInput}this.chatList.push(myMsg);// 新增对方文本消息let herMsg={isMe:false,//代表对方信息type:"text",content:this.myInput}this.chatList.push(herMsg);//同样地:把存储聊天记录和自动下拉到最新聊天记录也复制进来uni.setStorageSync("chatList",JSON.stringify(this.chatList));uni.pageScrollTo({scrollTop:999999,duration:100});//完成发送后清空input框this.myInput="";
}

效果:略

4. 完整代码

<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" v-model='myInput'/><image class="img-chose" src="../../static/chatImg/图片.png" @click="choseImgAndSend()"/><view class="send-btn" @click="sendInputMsg()">发送</view></view>
</view>
</template><script>export default {data() {return {// step1:创建chatList对象chatList:[{isMe:false,type:"text",content:"我是客服小梅,请问您想咨询什么问题?"},{isMe:false,type:"image",path:"/static/chatImg/gaara.png"},{isMe:true,type:"text",content:"你好,请问这是谁的头像?"},{isMe:true,type:"image",path:"/static/chatImg/gaara.png"},],myInput:''}},onShow(){if(uni.getStorageSync('chatList')){//先判断是否有存储key为chatlist的信息//存的时候已经JSON.stringify,取的时候回自然要JSON.parsethis.chatList=JSON.parse(uni.getStorageSync('chatList'));//取出来的数据赋给chatlist数组//页面自动滚动到最新聊天记录uni.pageScrollTo({scrollTop:999999,duration:100});}},methods: {choseImgAndSend(){uni.chooseImage({count:1,sizeType:["original","compressed"],//原图和压缩图片二者都可以sourceType:["album","camera"],//从相册或者相机中选择图片success:res=>{//若成功,则返回用户选择的图片路径(本地文件路径列表:tempFilePaths)console.log("res:",res);//先看看res输出了什么:console.log(res.tempFilePaths[0]);// 新增我方图片消息:格式做成chatList中的元素的形式let myMsg={isMe:true,//代表我方信息type:"image",path:res.tempFilePaths[0]}this.chatList.push(myMsg);//把新增的我方信息push进chatList数组中// 新增对方图片消息let herMsg={isMe:false,//代表对方信息type:"image",path:res.tempFilePaths[0]}this.chatList.push(herMsg);//把新增的对方信息push进chatList数组中// 把聊天信息的存储放在选择图片成功的回调中/*参数说明:key(第一个参数):本地缓存中的指定的 keydata(第二个参数):需要存储的内容(只支持原生类型以及能够JSON.stringify的对象)*/uni.setStorageSync("chatList",JSON.stringify(this.chatList));//页面自动滚动到最新聊天记录uni.pageScrollTo({scrollTop:999999,duration:100});// 此处的bug:页面只显示到发送图片的我方,回复图片的对方消息不会显示出来//解决:在onShow中,也就是读取getStorage时,再调用一次uni.pageScrollTo//(并未解决问题,考虑在其他地方调用uni.pageScrollTo,先忽略)}})},sendInputMsg(){if(!this.myInput) return;//input框为空就不发送// 新增我方文本消息let myMsg={isMe:true,//代表我方信息type:"text",content:this.myInput}this.chatList.push(myMsg);// 新增对方文本消息let herMsg={isMe:false,//代表对方信息type:"text",content:this.myInput}this.chatList.push(herMsg);//同样地:把存储聊天记录和自动下拉到最新聊天记录也复制进来uni.setStorageSync("chatList",JSON.stringify(this.chatList));uni.pageScrollTo({scrollTop:999999,duration:100});//完成发送后清空input框this.myInput="";}}}
</script><style lang="scss" scoped>
.container{background-color: #f1f1f1;min-height: 100vh;
}
// 聊天页面主体部分
.chat-body{padding-bottom:178upx;.chat-time{text-align: center;color: #888;padding:40upx 0 0;}.chat-one{display: flex;flex-direction: row;flex-wrap:wrap;justify-content: flex-start;align-items: flex-start;padding:20upx 0;}.chat-one-begin{padding:40upx 0 0;}.chat-one-mine{justify-content: flex-end;}// 头像.chat-face{width: 84upx;height: 84upx;border-radius: 10upx;margin-left:40upx;}.chat-one-mine .chat-face{margin-left:0;margin-right:40upx;}// 聊天盒子.chat-box{max-width:calc(100% - 290upx);margin-left:20upx;font-size:30upx;}.chat-one-mine .chat-box{margin-right:20upx;}// 用户昵称.chat-sender{color:#888;font-size: 20upx;margin-top:-8upx;margin-bottom:10upx;}// 聊天文字框.chat-content{background-color: #fff;border-radius: 5px;padding:10px;.micon{margin-right:20upx;color:#666;}}// 聊天图片.chat-img{float:left;max-width:60%;height:260upx;border-radius: 5px;}.chat-one-mine .chat-img{float:right;}
}
// 聊天页面底部
.chat-footer{width: 670upx;padding:0 40upx;height: 120upx;position:fixed;bottom:0;left:0;background-color: #f1f1f1;display: flex;flex-direction: row;flex-wrap:wrap;justify-content: space-between;align-items:space-between;align-content: center;border-top:1upx solid #ddd;// 输入框.msg-input{background-color: #fff;width: calc(100% - 250upx);height: 70upx;line-height: 70upx;font-size:30upx;border-radius: 10upx;padding:0 20upx;}// 选择图片发送.img-chose{height: 70upx;width:70upx;}
}
</style>