devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

一个微信小程序聊天静态页面(基于Vant Weapp)_微信静态页面

作者：很楠不爱3 | 2024-02-19 09:13:51

赞

踩

微信静态页面

首先需要引用一下vant组件

  1. {
  2.     "enablePullDownRefresh": false,
  3.     "usingComponents": {
  4.         "van-image": "/vantdist/image/index",
  5.         "van-field": "/vantdist/field/index",
  6.         "van-cell-group": "/vantdist/cell-group/index",
  7.         "van-button": "/vantdist/button/index",
  8.         "van-icon": "/vantdist/icon/index",
  9.         "van-row": "/vantdist/row/index",
  10.         "van-col": "/vantdist/col/index"
  11.     }
  12. }

这里是HTML/wxml

  1. <view class="container">
  2.   <!-- <header id="top-header">
  3.     <view style="width:100%;">
  4.       <view>
  5.         <view>顶部1</view>
  6.         <view>顶部</view>
  7.         <view>顶部</view>
  8.       </view>
  9.     </view>
  10.   </header>-->
  11.   <scroll-view id="main-content" scroll-y="{{true}}" scroll-top="{{scrollTop}}">
  12.     <view>
  13.       <view style="position: relative;">
  14.         <!-- 一条聊天记录  -->
  15.         <view id="msglistview" class="chat-body">
  16.           <!-- 聊天记录 -->
  17.           <view>
  18.             <!-- 自己发的消息 -->
  19.             <block wx:for="{{msgList}}">
  20.               <view class="item self" wx:if="{{item.mine}}">
  21.                 <!-- 文字内容 -->
  22.                 <view style="display:flex;flex-direction: column;">
  23.                   <view class="content right-time">{{item.date +" "+item.name}}</view>
  24.                   <view>
  25.                     <view class="content right">
  26.                       <rich-text
  27.                         mode="tag"
  28.                         style="text-align:left"
  29.                         nodes="{{_this.imgTag2richTag(item.text.text)}}"
  30.                         user-select
  31.                         data-html="{{item.text.text}}"
  32.                         bind:tap="onClick_RichCard"
  33.                       ></rich-text>
  34.                     </view>
  35.                   </view>
  36.                 </view>
  37.                 <!-- 头像 -->
  38.                 <view class="avatar">
  39.                   <van-image width="78rpx" height="78rpx" fit="fill" src="{{item.img}}" />
  40.                 </view>
  41.               </view>
  42.               <!-- 客服发的消息 -->
  43.               <view class="item kf" wx:else>
  44.                 <!-- 头像 -->
  45.                 <view class="avatar">
  46.                   <van-image width="78rpx" height="78rpx" fit="fill" src="{{item.img}}" />
  47.                 </view>
  48.                 <!-- 文字内容 -->
  49.                 <view style="display:flex;flex-direction: column;">
  50.                   <view class="content left-time">{{(item.date)+" "+item.name}}</view>
  51.                   <view>
  52.                     <view class="content left">
  53.                       <rich-text
  54.                         mode="tag"
  55.                         style="text-align:left"
  56.                         nodes="{{_this.imgTag2richTag(item.text.text)}}"
  57.                         user-select
  58.                         data-html="{{item.text.text}}"
  59.                         bind:tap="onClick_RichCard"
  60.                       ></rich-text>
  61.                     </view>
  62.                   </view>
  63.                 </view>
  64.               </view>
  65.               <!-- <view class="item Ai">
  66.                 <view class="avatar">
  67.                   <van-image width="78rpx" height="78rpx" fit="fill" src="{{item.img}}"/>
  68.                 </view>
  69.                 <view>
  70.                   <view class="content left-time">{{`${item.date} 　${item.name}`}}</view>
  71.                   <view class="content left">
  72.                     <van-image
  73.                       width="100%"
  74.                       height="10em"
  75.                       fit="heightFix"
  76.                       src="https://img.yzcdn.cn/vant/cat.jpeg"
  77.                     />
  78.                   </view>
  79.                 </view>
  80.               </view>-->
  81.             </block>
  82.           </view>
  83.         </view>
  84.       </view>
  85.     </view>
  86.   </scroll-view>
  87.   <footer id="bottom-footer">
  88.     <view style="width:100%;">
  89.       <view>
  90.         <van-cell-group>
  91.           <van-field
  92.             model:value="{{ message }}"
  93.             type="textarea"
  94.             placeholder="请输入留言"
  95.             autosize
  96.             border="{{ false }}"
  97.           >
  98.             <view slot="button" style="display:flex">
  99.               <van-icon name="add-o" size="1.4em" disable-default-padding="{{false}}" />
  100.               <view style="margin-left:20rpx">
  101.                 <van-button
  102.                   slot="button"
  103.                   size="small"
  104.                   type="primary"
  105.                   bind:click="onClick_sendButton"
  106.                 >发送</van-button>
  107.               </view>
  108.             </view>
  109.             <!-- <van-icon slot="button" name="add-o" /> -->
  110.             <!-- <van-button slot="button" icon="add-o" round hairline /> -->
  111.           </van-field>
  112.         </van-cell-group>
  113.       </view>
  114.     </view>
  115.   </footer>
  116. </view>
  117.  
  118. <wxs module="_this">
  119.   function imgTag2richTag(tag) {
  120.   var mycontent = tag;
  121.   var reg = getRegExp("<img", "g");
  122.   mycontent = mycontent.replace(reg, '<img style="width:auto;height:10em"');
  123.   var reg = getRegExp("<image", "g");
  124.   mycontent = mycontent.replace(reg, '<image style="width:auto;height:10em"');
  125.   return mycontent;
  126.   }
  127.   module.exports.imgTag2richTag = imgTag2richTag;
  128. </wxs>

这里是js

  1. // subpages/kf-message/kf-message.js
  2. Page({
  3.  
  4.     /**
  5.      * 页面的初始数据
  6.      */
  7.     data: {
  8.         scrollTop: 0,
  9.         message: "",
  10.         msgList: [{
  11.                 date: "2020/04/25 21:19:07",
  12.                 text: {
  13.                     text: "师傅你是做什么工作的?"
  14.                 },
  15.                 mine: true,
  16.                 name: "你",
  17.                 img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
  18.             }, {
  19.                 date: "2020/04/25 21:19:07",
  20.                 text: {
  21.                     text: "<img src='https://img.yzcdn.cn/vant/cat.jpeg'/>"
  22.                 },
  23.                 mine: false,
  24.                 name: "客服一号",
  25.                 img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
  26.             },
  27.             {
  28.                 date: "2020/04/25 21:19:07",
  29.                 text: {
  30.                     text: "<img src='https://img.yzcdn.cn/vant/cat.jpeg'/>"
  31.                 },
  32.                 mine: true,
  33.                 name: "你",
  34.                 img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
  35.             },
  36.             {
  37.                 date: "2020/04/25 21:19:07",
  38.                 text: {
  39.                     text: "您好,请给好评!"
  40.                 },
  41.                 mine: false,
  42.                 name: "客服一号",
  43.                 img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
  44.             },
  45.             {
  46.                 date: "2020/04/25 21:19:07",
  47.                 text: {
  48.                     text: "您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!您好,请给好评!"
  49.                 },
  50.                 mine: false,
  51.                 name: "客服一号",
  52.                 img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
  53.             }
  54.         ]
  55.     },
  56.  
  57.     /**
  58.      * 生命周期函数--监听页面加载
  59.      */
  60.     onLoad(options) {
  61.  
  62.     },
  63.  
  64.     /**
  65.      * 生命周期函数--监听页面初次渲染完成
  66.      */
  67.     onReady() {
  68.  
  69.     },
  70.  
  71.     /**
  72.      * 生命周期函数--监听页面显示
  73.      */
  74.     onShow() {
  75.  
  76.     },
  77.  
  78.     onClick_sendButton: function () {
  79.         // let msgSry=this.data.message.split('\n');
  80.         // let message = msgSry.join("<br/>")
  81.  
  82.         
  83.         let message = this.data.message.replaceAll("\n", "<br/>")
  84.  
  85.         let msgItem = {
  86.             date: Date.now(),
  87.             text: {
  88.                 text: message
  89.             },
  90.             mine: true,
  91.             name: "你",
  92.             img: "https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg",
  93.         }
  94.         this.data.msgList.push(msgItem);
  95.         this.setData({
  96.             msgList: this.data.msgList,
  97.             message: ""
  98.         })
  99.         this.resetSorollBar();
  100.     },
  101.     // 点击卡片之后会预览图片
  102.     onClick_RichCard: function (e) {
  103.         // 将图片里的 src 提取出来，变成一个数组。
  104.         const imgTags = e.currentTarget.dataset.html.match(/<img.*?>/g);
  105.         const urls = [];
  106.         if (imgTags) {
  107.             imgTags.forEach((tag) => {
  108.                 let url = tag.match(/src="(.*?)"/) || tag.match(/src='(.*?)'/);
  109.                 if (url) {
  110.                     urls.push(url[1]);
  111.                 }
  112.             });
  113.         }
  114.         if (urls.length <= 0) return;
  115.         wx.previewImage({
  116.             urls: urls,
  117.         });
  118.     },
  119.  
  120.     resetSorollBar() {
  121.         let selQuery = wx.createSelectorQuery();
  122.         selQuery.select("#main-content").boundingClientRect(res => {
  123.             console.log('res', res)
  124.             this.setData({
  125.                 scrollTop: res.height
  126.             })
  127.         }).exec();
  128.  
  129.     },
  130.     /**
  131.      * 生命周期函数--监听页面隐藏
  132.      */
  133.     onHide() {
  134.  
  135.     },
  136.  
  137.     /**
  138.      * 生命周期函数--监听页面卸载
  139.      */
  140.     onUnload() {
  141.  
  142.     },
  143.  
  144.     /**
  145.      * 页面相关事件处理函数--监听用户下拉动作
  146.      */
  147.     onPullDownRefresh() {
  148.  
  149.     },
  150.  
  151.     /**
  152.      * 页面上拉触底事件的处理函数
  153.      */
  154.     onReachBottom() {
  155.  
  156.     },
  157.  
  158.     /**
  159.      * 用户点击右上角分享
  160.      */
  161.     onShareAppMessage() {
  162.  
  163.     }
  164. })

这里是wxss/css

  1. .container {
  2.     display: flex;
  3.     flex-direction: column;
  4.     width: 100%;
  5.     flex-grow: 1;
  6.     height: 100vh;
  7.     flex-basis: 0;
  8. }
  9.  
  10. #top-header {
  11.     background-color: #f8f8f8;
  12.     color: #333;
  13. }
  14.  
  15. #main-content {
  16.     background-color: #fff;
  17.     color: #333;
  18.     flex: 1;
  19.     overflow-y: scroll;
  20.     position: relative;
  21. }
  22.  
  23. #bottom-footer {
  24.     background-color: #f8f8f8;
  25.     color: #333;
  26. }
  27.  
  28.  
  29. .chat-body {
  30.     display: flex;
  31.     flex-direction: column;
  32.     padding-top: 23rpx;
  33. }
  34.  
  35. .chat-body .self {
  36.     justify-content: flex-end;
  37. }
  38.  
  39. .chat-body .item {
  40.     display: flex;
  41.     padding: 23rpx 30rpx;
  42. }
  43.  
  44. .chat-body .item .content {
  45.     position: relative;
  46.     max-width: 486rpx;
  47.     border-radius: 8rpx;
  48.     white-space: normal;
  49.     word-break: break-all;
  50.     padding: 20rpx 20rpx;
  51.     margin: 0 24rpx;
  52.     border-radius: 5px;
  53.     font-size: 32rpx;
  54.     font-family: PingFang SC;
  55.     font-weight: 500;
  56.     color: #333333;
  57.     line-height: 42rpx;
  58.     overflow: inherit;
  59. }
  60.  
  61. .chat-body .item .right-time {
  62.     background-color: none;
  63.     padding: 0 10rpx;
  64.     font-size: 12px;
  65.     color: #646566;
  66.     float: right;
  67.     text-align: right;
  68. }
  69.  
  70. .chat-body .item .right {
  71.     background-color: #C2DCFF;
  72.     display: flex;
  73.     justify-content: flex-end;
  74. }
  75.  
  76. .chat-body .item .right::after {
  77.     position: absolute;
  78.     display: inline-block;
  79.     content: '';
  80.     width: 0;
  81.     height: 0;
  82.     left: 100%;
  83.     top: 10px;
  84.     border: 12rpx solid transparent;
  85.     border-left: 12rpx solid #C2DCFF;
  86. }
  87.  
  88. .chat-body .item .left-time {
  89.     background-color: none;
  90.     padding: 0 10rpx;
  91.     font-size: 12px;
  92.     color: #646566
  93. }
  94.  
  95. .chat-body .item .left {
  96.     background-color: #F7F8FA;
  97.     width: auto;
  98. }
  99.  
  100. .chat-body .item .left::after {
  101.     position: absolute;
  102.     display: inline-block;
  103.     content: '';
  104.     width: 0;
  105.     height: 0;
  106.     top: 10px;
  107.     right: 100%;
  108.     border: 12rpx solid transparent;
  109.     border-right: 12rpx solid #F7F8FA;
  110. }
  111.  
  112.  
  113. .chat-body .item .avatar {
  114.     display: flex;
  115.     justify-content: center;
  116.     width: 78rpx;
  117.     height: 78rpx;
  118.     background: #4F7DF5;
  119.     border-radius: 8rpx;
  120.     overflow: hidden;
  121.     flex: 0 0 78rpx;
  122.     margin-top: 10rpx;
  123. }
  124.  
  125. .chat-body .item .avatar image {
  126.     align-self: center;
  127. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/113877
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号