封装聊天组件（fang微信聊天）

用法图文视频还没写好，后期补上，因为基于微博本身的ui框架，所以有的样式会有一些问题，可能跟普通写法有一点不同，但是修改一点就可以

//自己做的假数据
<template><wbx-view style="" @click="losingFocus"><wbx-view:style="{transform: transformNum,transition: 'transform 0.3s',}"><wbx-listclass="scroller"style="width: 100vw;height: 90vh;box-sizing: border-box;box-sizing: border-box;background-color: #f6f6f8;"><wbx-cell v-for="(item, index) in dataSource" :key="index"><!-- 文本消息类型 --><text-messagev-if="item.type == 'text'":dataSource="item"></text-message><!-- 图片消息类型 --><pic-messagev-if="item.type == 'pic'":dataSource="item"></pic-message><!-- <video-messagev-if="item.type == 'video'":dataSource="item"></video-message> --></wbx-cell></wbx-list><wbx-viewstyle="height: 10vh;background-color: #fff;display: flex;flex-direction: row;justify-content: center;align-items: center;"><wbx-imagestyle="width: 30px; height: 30px; margin-right: 20px"mode="aspectFit"src="res/login.png"/><wbx-textareastyle="border: 1px solid #000; width: 200px; height: 40px"maxlength="100"placeholder="最多能输入100个字"returnkeytype="send"v-wbox-model:input.value.domProps="textareaValue"@keyboardheightchange="keyboardChangesTextarea"v-wbox-model:focus.focus="textareaFocused"></wbx-textarea><wbx-imagestyle="width: 30px; height: 30px; margin-left: 20px"mode="aspectFit"src="res/login.png"/><wbx-imagestyle="width: 30px; height: 30px; margin-left: 20px"mode="aspectFit"src="res/login.png"/></wbx-view></wbx-view></wbx-view>
</template><script>
import textMessage from "./messageType/text-message/index.vue";
import picMessage from "./messageType/pic-message/index.vue";
import videoMessage from "./messageType/video-message/index.vue";
/*** @type WBXAppOption*/
const pageOptions = {components: {textMessage,picMessage,videoMessage,},data() {return {dataSource: [{id: 1,title: "我我我",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: true,type: "pic",coverPicUrl:"https://img0.baidu.com/it/u=3693498673,388481603&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1082",},{id: 1,title: "你快瞅瞅好看不！",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: true,type: "text",coverPicUrl: "",},{id: 1,title: "我觉的不咋地！啥玩应儿啊，还没我的好看呢！",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: false,type: "text",coverPicUrl: "",},{id: 1,title: "我我我我嚄我我我我",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: false,type: "pic",coverPicUrl:"https://vimimg-int-alicdn.softsugar.com/VME/int/users/687254816/figure/USNWXGCH/tmp_0d67a505007700275e7860e69904cfb3.jpg?auth_key=1724601600-0-0-d091d25b4081283ccd771125050e362d",},{id: 1,title: "你快拉到吧你，老弟啊你不懂欣赏！",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: true,type: "text",coverPicUrl: "",},{id: 1,title: "我我我我我我我我",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: true,type: "pic",coverPicUrl:"https://vimimg-int-alicdn.softsugar.com/VME/int/users/687254816/figure/NUBOVIEU/tmp_f37d3589f0ae36025d0dc6bae84c34c4.jpg?auth_key=1724601600-0-0-94c9964f5c3c2a8773919a964d24284f",},{id: 1,title: "这也不好看啊，什么审美",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: false,type: "text",coverPicUrl: "",},{id: 1,title: "这也不好看啊，什么审美",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: false,type: "pic",coverPicUrl:"https://img2.baidu.com/it/u=1718761759,369021576&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083",},{id: 1,title: "这也不好看啊，什么审美",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: false,type: "video",coverVideoUrl: {oid: "3911557709",src: "res/2.mp4",},coverPicUrl:"https://img0.baidu.com/it/u=3693498673,388481603&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1082",},{id: 1,title: "这也不好看啊，什么审美",time: "2023-04-03 10:39:00",pirce: 128,sendMessage: false,type: "video",coverVideoUrl: {oid: "3911557708",src: "res/video.mp4",},coverPicUrl:"https://img0.baidu.com/it/u=3693498673,388481603&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1082",},],transformNum: "translateY(0)",loadinging: false,showLoading: false,refreshing: false,showLoadMore: true,textareaValue: "",textareaFocused: false,};},methods: {losingFocus() {this.textareaFocused = false;},keyboardChangesTextarea(e) {const { height, isShow } = e.detail;this.transformNum = isShow? `translateY(-${height - 40}px)`: "translateY(0)";},},wbox: {onLoad() {},onShow() {// 页面显示/切入前台时触发},onHide() {// 页面隐藏时触发},onUnload() {// 页面退出时触发},},mounted() {},
};
export default pageOptions;
</script><style>
.scroller {
}
</style>

文本类型的组件：

//文本的组件
<template><wbx-view><!-- 左边 --><wbx-viewv-if="dataSource.sendMessage == false"style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;display: flex;justify-content: flex-start;flex-direction: row;"><wbx-imagestyle="width: 40px; height: 40px;border-radius: 5px;"mode="aspectFit"src="res/login.png"/><wbx-view><wbx-viewstyle="margin-left: 10px;display: flex;flex-wrap: wrap;border-radius: 5px;background-color: pink;"><wbx-textstyle="max-width: 55vw; margin: 10px 10px; display: inline-block">{{ dataSource.title }}</wbx-text></wbx-view></wbx-view></wbx-view><!-- 右边 --><wbx-viewv-if="dataSource.sendMessage == true"style="margin-top: 20px;margin-bottom: 20px;margin-right: 10px;display: flex;justify-content: flex-end;flex-direction: row;"><wbx-view style="position: relative"><wbx-viewstyle="position: relative;margin-right: 10px;display: flex;flex-wrap: wrap;background-color: pink;border-radius: 5px;"><wbx-textstyle="max-width: 55vw; margin: 10px 10px; display: inline-block">{{ dataSource.title }}</wbx-text></wbx-view><!-- 箭头位置 --><!-- <wbx-viewstyle="background-color: red;position: absolute;right: 0;top: 10px;width: 10px;height: 10px;border-top: 100px solid transparent;border-right: 100px solid transparent;border-left: 100px solid transparent;border-bottom: 100px solid red;"></wbx-view> --></wbx-view><wbx-imagestyle="width: 40px; height: 40px;border-radius: 5px;"mode="aspectFit"src="res/login.png"/></wbx-view></wbx-view>
</template><script>
/*** @type WBXAppOption*/
const pageOptions = {props: {dataSource: {type: Object,required: true,},},data() {return {};},methods: {},wbox: {onLoad() {},onShow() {// 页面显示/切入前台时触发},onHide() {// 页面隐藏时触发},onUnload() {// 页面退出时触发},},mounted() {},
};
export default pageOptions;
</script><style></style>

图文类型的组件

<template><wbx-view><!-- 左边 --><wbx-viewv-if="dataSource.sendMessage == false"style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px;display: flex;justify-content: flex-start;flex-direction: row;align-items: flex-start;"><wbx-imagestyle="width: 40px; height: 40px; flex-shrink: 0; border-radius: 5px"mode="aspectFit"src="res/login.png"/><wbx-image@load="loadFn"@click="preview(dataSource.coverPicUrl)"style="margin-left: 10px; border-radius: 5px":style="{ height: heightImg, width: widthImg }"mode="aspectFill":src="dataSource.coverPicUrl"/></wbx-view><!-- 右边 --><wbx-viewv-if="dataSource.sendMessage == true"style="margin-top: 20px;margin-bottom: 20px;margin-right: 10px;display: flex;justify-content: flex-end;flex-direction: row;align-items: flex-start;"><wbx-view style="margin-right: 10px"><wbx-image@load="loadFn"@click="preview(dataSource.coverPicUrl)"style="margin-left: 10px; border-radius: 5px":style="{ height: heightImg, width: widthImg }"mode="aspectFill":src="dataSource.coverPicUrl"/></wbx-view><wbx-imagestyle="width: 40px; height: 40px; flex-shrink: 0; border-radius: 5px"mode="aspectFit"src="res/login.png"/></wbx-view></wbx-view>
</template><script>
/*** @type WBXAppOption*/
const pageOptions = {props: {dataSource: {type: Object,required: true,},},data() {return {heightImg: "",widthImg: "",imgList: [],};},methods: {resizeImage(originalWidth, originalHeight, maxWidth, maxHeight) {let ratio = Math.min(maxWidth / originalWidth,maxHeight / originalHeight);return {width: originalWidth * ratio + "px",height: originalHeight * ratio + "px",};},loadFn(e) {const { height, width } = e.detail;const maxWidth = 200; // 设定图片容器的最大宽度const maxHeight = 200; // 设定图片容器的最大高度const { width: resizedWidth, height: resizedHeight } = this.resizeImage(width,height,maxWidth,maxHeight);this.widthImg = resizedWidth;this.heightImg = resizedHeight;},preview(coverPicUrl) {const coverPicUrls = this.$parent.dataSource.map((item) => item.coverPicUrl);let coverPicUrlIndex = this.$parent.dataSource.findIndex((item) => item.coverPicUrl === this.dataSource.coverPicUrl);let imglist = this.$parent.dataSource.filter((item) => item.coverPicUrl !== "" && item.type === "pic").map((item) => item.coverPicUrl);let index = imglist.indexOf(coverPicUrls[coverPicUrlIndex]);wbx.previewImage({urls: imglist,index,success: function (res) {console.log("---- previewImage success: " + JSON.stringify(res));},failure: function (res) {console.log("---- previewImage failure: " + JSON.stringify(res.errMsg));},complete: function (res) {console.log("---- previewImage complete: " + JSON.stringify(res));},});},},wbox: {onLoad() {},onShow() {// 页面显示/切入前台时触发},onHide() {// 页面隐藏时触发},onUnload() {// 页面退出时触发},},mounted() {},
};
export default pageOptions;
</script><style></style>