修改聊一聊样式。

pages/msgModule/wechat2 copy/wechat2.js

-const $request = require('../../../utils/request.js');
-const $util = require('../../../utils/util.js');
-
-Page({
-
-    /**
-    * 页面的初始数据
-    */
-    data: {
-        newsList: [],
-        input: null,
-        openid: null
-    },
-
-    /**
-    * 生命周期函数--监听页面加载
-    */
-    onLoad: function (options) {
-        var _this = this;
-        wx.getStorage({
-            key: 'OPENID',
-            success: function (res) {
-                _this.setData({
-                    openid: res.data
-                })
-            },
-        })
-        var _this = this;
-        //建立连接
-        wx.connectSocket({
-            url: `ws://192.168.18.156/webSocket/{"userno":"666678","messageModule":"007"}`,
-        })
-
-        //连接成功
-        wx.onSocketOpen(function () {
-            console.log('连接成功');
-        })
-        wx.onSocketMessage(function (res) {
-
-            var list = [];
-            list = _this.data.newsList;
-            var _data = JSON.parse(res.data);
-
-            list.push(_data);
-            console.log(list,'输出的list')
-            _this.setData({
-                newsList: list
-            })
-
-        })
-    },
-
-    /**
-    * 生命周期函数--监听页面初次渲染完成
-    */
-    onReady: function () {
-
-    },
-
-    /**
-    * 生命周期函数--监听页面显示
-    */
-    onShow: function () {
-
-    },
-
-    /**
-    * 生命周期函数--监听页面隐藏
-    */
-    onHide: function () {
-
-    },
-
-    /**
-    * 生命周期函数--监听页面卸载
-    */
-    onUnload: function () {
-
-    },
-
-    /**
-    * 页面相关事件处理函数--监听用户下拉动作
-    */
-    onPullDownRefresh: function () {
-
-    },
-
-    /**
-    * 页面上拉触底事件的处理函数
-    */
-    onReachBottom: function () {
-
-    },
-
-    /**
-    * 用户点击右上角分享
-    */
-    onShareAppMessage: function () {
-
-    },
-    send: function () {
-        var _this = this;
-        if (_this.data.input) {
-            wx.sendSocketMessage({
-                data: _this.data.input,
-            })
-            var list = [];
-            list = this.data.newsList;
-            var temp = { 'message': _this.data.input, 'date': $util.formatTime(new Date()), type: 1 };
-            list.push(temp);
-            console.log(list,'我发出的list')
-            this.setData({
-                newsList: list,
-                input: null
-            })
-        }
-
-    },
-    bindChange: function (res) {
-        this.setData({
-            input: res.detail.value
-        })
-    },
-    back: function () {
-        wx.closeSocket();
-        console.log('连接断开');
-    }
-})

pages/msgModule/wechat2 copy/wechat2.json

-{
-  "usingComponents": {}
-}

pages/msgModule/wechat2 copy/wechat2.wxml

-<view class='top-content'>
-    <!-- <image src='images/back.png' class='back-icon' bindtap='back'></image> -->
-    <view class="weui-cells__title" style=' display: flex;flex-direction: row;justify-content: center;margin-left:210rpx'>
-        匿名聊天X
-    </view>
-</view>
-<view class='news'>
-    <view class="historycon">
-        <scroll-view scroll-y="true" class="history">
-            <block wx:for="{{newsList}}" wx:key>
-                <!-- 此处为other -->
-                <view wx:if="{{item.type==0}}">
-                    <view>
-                        <text class='chat-time'>{{item.date}}</text>
-                    </view>
-                    <view class='other-record'>
-                        <!-- <image class='other-head-img' src='images/headimg.png'></image> -->
-                        <view class='other-record-content-triangle'></view>
-                        <view class='other-record-content'>{{item.message}}</view>
-                    </view>
-                </view>
-                <!-- 此处为结尾 -->
-                <!-- 此处为own -->
-                <view wx:else>
-                    <view>
-                        <text class='chat-time'>{{item.date}}</text>
-                    </view>
-                    <view class='own-record'>
-                        <view class='own-record-content'>{{item.message}}</view>
-                        <view class='own-record-content-triangle'></view>
-                        <image class='own-head-img' src='images/headimg.png'></image>
-                    </view>
-                </view>
-                <!-- own结尾 -->
-            </block>
-        </scroll-view>
-    </view>
-</view>
-<view class='hei' id="hei"></view>
-<view class="sendmessage">
-    <input class="chat-input" type="emoji" bindinput="bindChange" confirm-type="done" value='{{input}}' placeholder="" />
-    <button class="btn" type="primary" plain="true" bindtap='send'>发送</button>
-    <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />
-</view>

pages/msgModule/wechat2 copy/wechat2.wxss

-page {
-    background-color: white;
-}
-
-.tab {
-    padding: 20rpx 20rpx 40rpx 50rpx;
-    height: 20%;
-    background-color: white;
-}
-
-.tab .tent {
-    font-size: 33rpx;
-    margin-bottom: 30rpx;
-}
-.jia_img {
-    height: 80rpx;
-    width: 90rpx;
-}
-.new_imgtent {
-    height: 180rpx;
-    width: 190rpx;
-}
-.tab .fabu {
-    font-size: 33rpx;
-    margin-top: 30rpx;
-    margin-bottom: 30rpx;
-}
-
-.xiahuaxia {
-    width: 80%;
-    text-align: center;
-    margin: 0 auto;
-    position: relative;
-    top: 60rpx;
-}
-
-.chat-time {
-    text-align: center;
-    padding: 5rpx 20rpx 5rpx 20rpx;
-    width: 200rpx;
-    font-size: 26rpx;
-    background-color: #e6e6e6;
-}
-
-.new_top_txt {
-    width: 50%;
-    position: relative;
-    top: 38rpx;
-    text-align: center;
-    margin: 0 auto;
-    font-size: 30rpx;
-    color: #787878;
-    background-color: #f7f7f7;
-}
-
-/* 聊天内容 */
-
-.news {
-    margin-top: 30rpx;
-    text-align: center;
-    margin-bottom: 150rpx;
-}
-
-.img_null {
-    height: 60rpx;
-}
-
-.l {
-    height: 5rpx;
-    width: 20%;
-    margin-top: 30rpx;
-    color: #000;
-}
-
-/* 聊天 */
-
-.my_right {
-    float: right;
-    position: relative;
-    right: 40rpx;
-}
-
-.you_left {
-    float: left;
-    position: relative;
-    left: 5rpx;
-}
-
-.new_img {
-    width: 100rpx;
-    height: 100rpx;
-    border-radius: 50%;
-}
-
-.sanjiao {
-    top: 20rpx;
-    position: relative;
-    width: 0px;
-    height: 0px;
-    border-width: 10px;
-    border-style: solid;
-}
-
-.my {
-    border-color: transparent transparent transparent #95d4ff;
-}
-
-.you {
-    border-color: transparent #95d4ff transparent transparent;
-}
-
-.sendmessage {
-    background-color: white;
-    width: 100%;
-    position: fixed;
-    bottom: 0rpx;
-    display: flex;
-    flex-direction: row;
-}
-
-.sendmessage input {
-    width: 80%;
-    height: 80rpx;
-    background-color: white;
-    line-height: 80rpx;
-    font-size: 28rpx;
-    border: 2rpx solid #d0d0d0;
-    padding-left: 20rpx;
-}
-
-.sendmessage button {
-    border: 2rpx solid white;
-    width: 18%;
-    height: 80rpx;
-    background: #fff;
-    color: #000;
-    line-height: 80rpx;
-    font-size: 28rpx;
-}
-
-.historycon {
-    height: 90%;
-    width: 100%;
-    flex-direction: column;
-    display: flex;
-    margin-top: 100rpx;
-    border-top: 0px;
-}
-.hei {
-    margin-top: 50px;
-    height: 20rpx;
-}
-.history {
-    height: 100%;
-    margin-top: 30rpx;
-    margin: 20rpx;
-    font-size: 28rpx;
-    line-height: 80rpx;
-    word-break: break-all;
-}
-.btn {
-    margin-left: 5rpx;
-    margin-right: 4rpx;
-}
-.chat-input {
-    margin-left: 5rpx;
-}
-.top-content {
-    display: flex;
-}
-.back-icon {
-    margin-top: 25rpx;
-    margin-left: 25rpx;
-    width: 40rpx;
-    height: 40rpx;
-}
-.other-record-content {
-    background-color: #ffefdb;
-    width: 380rpx;
-    border-radius: 7px;
-    padding: 0rpx 30rpx 0rpx 30rpx;
-}
-.other-record {
-    display: flex;
-    justify-content: flex-start;
-}
-.other-head-img {
-    width: 70rpx;
-    height: 70rpx;
-    margin: 10rpx 10rpx 10rpx 10rpx;
-}
-.other-record-content-triangle {
-    width: 0;
-    height: 0;
-    border-top: 20rpx solid transparent;
-    border-right: 40rpx solid #ffefdb;
-    border-bottom: 15rpx solid transparent;
-    margin-top: 20rpx;
-}
-.own-record {
-    display: flex;
-    justify-content: flex-end;
-}
-.own-record-content {
-    background-color: #f0f0f0;
-    width: 380rpx;
-    border-radius: 7px;
-    padding: 0rpx 30rpx 0rpx 30rpx;
-}
-.own-record-content-triangle {
-    width: 0;
-    height: 0;
-    border-top: 20rpx solid transparent;
-    border-left: 40rpx solid #f0f0f0;
-    border-bottom: 20rpx solid transparent;
-    margin-top: 20rpx;
-}
-.own-head-img {
-    width: 70rpx;
-    height: 70rpx;
-    margin: 10rpx 10rpx 10rpx 10rpx;
-    padding-right: 30rpx;
-}
-::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-    color: transparent;
-}

pages/msgModule/wechat2/wechat2.js

     * 页面的初始数据
     */
     data: {
-        receivebaseInfo: {},
-        sendAvatar: '',
+        receivebaseInfo: {
+            avatar:"http://wx.qlogo.cn/mmopen/ajNVdqHZLLAIliaZvz5B1ibTzTehYzXdfBZ9hXTL7yuhuCUQGyzbuHeYS2yr8rO5PkbUBbHuWb5h9SibpRQkj3GTw/0",
+        },
+        sendAvatar: 'http://wx.qlogo.cn/mmopen/ajNVdqHZLLAIliaZvz5B1ibTzTehYzXdfBZ9hXTL7yuhuCUQGyzbuHeYS2yr8rO5PkbUBbHuWb5h9SibpRQkj3GTw/0',
         newsList: [
             {
                 date: "2020.10.19",
                 message: '是呀，好久不见',
                 type: 1
             },
+            {
+                date: "2020.10.20",
+                message: 'sad加撒恐龙当家撒了框架到拉喀什就科利达杀伤力肯定会萨克雷号地块了撒接口连接达萨罗凯撒将到拉萨就来的就是sad就卡了😘',
+                type: 1
+            },
+            {
+                date: "2020.10.19",
+                message: '自行车金坷垃上架了靠的就是卡旅行者沉默现在你沙雕萨比许昌办是撒娇登记卡数据库大数据库写注册表你现在从现在是阿斯顿撒多😄',
+                type: 0
+            },
         ],//消息列表
         historyList: [],
         input: null,

pages/msgModule/wechat2/wechat2.wxml

 </view>
 <view class="sendmessage">
     <view class="send-message">
-        <input class="chat-input" type="text" bindinput="bindChange" confirm-type="done" value='{{input}}' cursor-spacing="16px" hold-keyboard="{{true}}" placeholder="" />
-        <image class="chat-emotion" src="../../static/img/chat-emotion.svg" bindtap="emotionChange"></image>
-        <button class="btn" bindtap='send'>发送</button>
+        <input 
+            class="chat-input" 
+            type="text" 
+            bindinput="bindChange" 
+            confirm-type="send" 
+            value='{{input}}' 
+            cursor-spacing="16px" 
+            hold-keyboard="{{true}}" 
+            placeholder="" 
+            bindconfirm="send"
+        />  
+        <image class="expression-msg-img" src="/images/home/expression-msg-icon.png" />
+        <image class="img-msg-img" src="/images/home/img-msg-icon.png" />
     </view>
     <view class="emotions" wx:if="{{emotionVisible}}">
         <view class="emotions-item" wx:for="{{connectemoji}}" wx:key="index" bindtap="addemotion" data-index="{{index}}">

pages/msgModule/wechat2/wechat2.wxss

     min-height: 60px;
     position: fixed;
     bottom: 0px;
-    padding: 0 16px;
     background-color: rgba(242, 242, 242, 100);
     box-shadow: 0px -1px 5px 1px rgba(57, 57, 57, 0.1);
 }
 }
 
 .sendmessage input {
-    height: 80rpx;
-    background-color: white;
-    line-height: 80rpx;
+    height: 81rpx;
+    background-color: #fff;
+    line-height: 81rpx;
     font-size: 28rpx;
     padding-left: 20rpx;
+    width: 530rpx;
 }
 
-.sendmessage button {
-    width: 52px !important;
-    height: 32px;
-    line-height: 32px;
-    background: #169171 !important;
-    color: #fff !important;
-    font-size: 14px !important;
-    text-align: center;
-    border: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
+.sendmessage .expression-msg-img,
+.sendmessage .img-msg-img{
+    width: 71rpx;
+    height: 71rpx;
+    margin-left: 18rpx;
 }
 
+
 .historycon {
     height: 90%;
     /* background-color: pink; */
 }
 .other-record-content {
     background-color: #fff;
+    box-shadow: -2px 9px 21px 0px 
+		rgba(0, 0, 0, 0.05);
     width: 180px;
-    border-radius: 7px;
-    padding: 0 20px;
+    border-radius: 8px;
+    padding: 15rpx 20rpx;
     text-align: left;
     margin: 6px 0;
+    line-height: 40rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items:center; /*实现垂直居中*/
 }
 .other-record {
     display: flex;
     padding-right: 30rpx;
 }
 .own-record-content {
-    background-color: #209072;
+    background-color: #5e73e5;
+	box-shadow: -2px 9px 21px 0px 
+		rgba(0, 0, 0, 0.05);
     width: 180px;
     border-radius: 8px;
-    padding: 0 20px;
+    padding: 15rpx 20rpx;
     color: #fff;
     text-align: left;
     margin: 6px 0;
+    line-height: 40rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items:center; /*实现垂直居中*/
 }
 .own-record-content-triangle {
     width: 0;
    border-left: 40rpx solid #F0F0F0; 
    border-bottom: 20rpx solid transparent;  */
     border-top: 10rpx solid transparent;
-    border-left: 15rpx solid #209072;
+    border-left: 15rpx solid #5e73e5;
     border-bottom: 10rpx solid transparent;
     margin-top: 36rpx;
 }