微信小程序 聊天对话 文本 图片 的功能 完整代码附效果图

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文:

这是我实际项目线上的代码, 或许有些不足 || 和你的需求不符合,  

上图:

<!--pages/index/to_news/to_news.wxml--><view class='tab'>  <view class='lan'>{{tabdata.title}}</view>  <view class='tent'>    <text>{{tabdata.attribute_attribute}}</text>    <text class='fl_r '>{{tabdata.num}}</text>  </view>  <view class='xiahuaxian1'></view>  <view>    <text class='fabu'>发布时间: {{tabdata.time_agree}}</text>  </view></view><view class='news'>  <view class='xiahuaxian1 xiahuaxia'></view>  <view class='new_top_txt'>您正在与{{tabdata.nickname}}进行沟通</view>  <view class="historycon">    <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" class="history" wx:for="{{centendata}}" wx:key=''>      <view>        <text class='time'>{{item.time}}</text>      </view>      <block wx:if="{{item.is_show_right ==1}}">        <view class='my_right'>          <view class='page_row'>            <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>            <image wx:if='{{item.is_img}}' src='https://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>            <view wx:if='{{!item.is_img}}' class='sanjiao my'></view>            <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容,显示在右边,右边渲染 nickname_owner,head_owner"}}' src='{{item.head_owner}}'></image>             <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容,显示在右边,右边渲染 nickname_open,head_open"}}' src='{{item.head_open}}'></image>          </view>        </view>      </block>      <block wx:else>        <view class='you_left'>          <view class='page_row'>            <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容,显示在左边,左边渲染 nickname_owner,head_owner"}}' src='{{item.head_owner}}'></image>             <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容,显示在左边,左边渲染 nickname_open,head_open"}}' src='{{item.head_open}}'></image>            <view wx:if='{{!item.is_img}}' class='sanjiao you'></view>            <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>            <image wx:if='{{item.is_img}}' src='https://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>          </view>        </view>      </block>    </scroll-view>  </view></view><view class='hei' id="hei"></view><view class="sendmessage">  <input type="emoji" bindinput="bindChange" confirm-type="done" value='{{news_input_val}}' placeholder="" />  <button catchtap="add">发送</button>  <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />  <image bindtap="upimg1" class='jia_img' src='../../../images/jia_img.png'></image></view>
// pages/index/to_news/to_news.jsvar app = getApp();var util = require("../../../utils/util.js")var message = '';var text = '';var user = {};var length;var zx_info_id;var openid_talk;Page({  data: {    news: '',    scrollTop: 0,    message: '',    text: text,    centendata: '',    nickName: '',    avatarUrl: '',    news_input_val:'',    tabdata: ''  },  bindChange: function (e) {    message = e.detail.value  },  //事件处理函数  add: function (e) {    var that = this    var data = {      program_id: app.jtappid,      openid: app._openid,      zx_info_id: zx_info_id,      content: message,      openid_talk:openid_talk    }    util.request('pg.php/ZXinfo/session_submit', 'post', data, '正在加载数据', function (res) {      if (res.data.state == 1) {        var a = true;        that.loaddata(a);        that.setData({          news_input_val:''        })        message = ''      } else {        wx.showToast({          title: '网络错误,请稍后',        })      }    })  },   onLoad: function (options) {    openid_talk = options.openid_talk;    zx_info_id = options.zx_info_id;    console.log(openid_talk)    //调用应用实例的方法获取全局数据    this.setData({      zx_info_id: zx_info_id,      nickName: app.nickName,      avatarUrl: app.avatarUrl,    });    this.loaddata()  },  // 页面加载  loaddata: function (a) {    var that = this;    var is_img = true;    var data = {      program_id: app.jtappid,      openid: app._openid,      zx_info_id: zx_info_id,      openid_talk: openid_talk    }    util.request('pg.php/ZXinfo/session_page', 'post', data, '', function (res) {      if (res.data.k1) {        res.data.k1.time_agree = util.js_date_time(res.data.k1.time_agree)      }      for (var i = 0; i < res.data.k2.length; i++) {        res.data.k2[i].time = util.js_date_time(res.data.k2[i].time)        var n = res.data.k2[i].content.charAt(res.data.k2[i].content.length - 1);        switch (n) {          case 'g':            res.data.k2[i].is_img = is_img            break;          default:        }      }      that.setData({        tabdata: res.data.k1,        centendata: res.data.k2.reverse()      })      wx.setNavigationBarTitle({ title: that.data.tabdata.nickname });      if (a) {        setTimeout(function () {            that.bottom()        }, 500);      }    })    setTimeout(function () {      if (that.data.centendata.length != length) {        length = that.data.centendata.length      }      that.loaddata()    }, 3000);      },  // 获取hei的id节点然后屏幕焦点调转到这个节点  bottom: function () {    var query = wx.createSelectorQuery()    query.select('#hei').boundingClientRect()    query.selectViewport().scrollOffset()    query.exec(function (res) {      wx.pageScrollTo({        scrollTop: res[0].bottom  // #the-id节点的下边界坐标      })      res[1].scrollTop // 显示区域的竖直滚动位置    })  },  // 选择图片并把图片保存    upimg1: function () {    var that = this;    wx.chooseImage({      success: function (res) {        var data = {          program_id: app.jtappid,          openid: app._openid,          zx_info_id: zx_info_id,        }        var tempFilePaths = res.tempFilePaths        wx.uploadFile({          url: 'pg.php/ZXinfo/session_submit', //提交信息至后台          filePath: tempFilePaths[0],          name: 'content', //文件对应的参数名字(key)          formData: data,  //其它的表单信息          success: function (res) {            var a = true;            that.loaddata(a);            message = ''          }        })      }    })  }})
/* pages/index/to_news/to_news.wxss */ page {  background-color: #f7f7f7;} .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;} .time {  text-align: center;  padding: 5rpx 20rpx 5rpx 20rpx;  width: 200rpx;  font-size: 26rpx;  background-color: #E8E8E8;} .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%;} .new_txt {  width: 380rpx;  border-radius: 7px;  background-color: #95d4ff;  padding: 0rpx 30rpx 0rpx 30rpx;} .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: 40px;  background-color: white;  line-height: 40px;  font-size: 14px;  border: 1px solid #d0d0d0;  padding-left: 10px;} .sendmessage button {  border: 1px solid white;  width: 18%;  height: 40px;  background: #fff;  color: #000;  line-height: 40px;  font-size: 14px;} .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: 15px;  margin: 10px;  font-size: 14px;  line-height: 40px;  word-break: break-all;}

点这里可以跳转到人工智能网站

发表评论