微信小程序實現(xiàn)聊天對話(文本、圖片)功能
更新時間：2018年07月06日 17:07:18 作者：a_靖
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)聊天對話功能，可以發(fā)送文本、圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)聊天對話功能的具體代碼，供大家參考，具體內容如下
這是我實際項目線上的代碼, 或許有些不足 || 和你的需求不符合。
上圖:
to_news.wxml
<!--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'>發(fā)布時間: {{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='http://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='http://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">發(fā)送</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>
to_news.js
// pages/index/to_news/to_news.js
var 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
},
//事件處理函數(shù)
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, '正在加載數(shù)據(jù)', function (res) {
if (res.data.state == 1) {
var a = true;
that.loaddata(a);
that.setData({
news_input_val:''
})
message = ''
} else {
wx.showToast({
title: '網(wǎng)絡錯誤,請稍后',
})
}
})
},
onLoad: function (options) {
openid_talk = options.openid_talk;
zx_info_id = options.zx_info_id;
console.log(openid_talk)
//調用應用實例的方法獲取全局數(shù)據(jù)
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節(jié)點然后屏幕焦點調轉到這個節(jié)點
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節(jié)點的下邊界坐標
})
res[1].scrollTop // 顯示區(qū)域的豎直滾動位置
})
},
// 選擇圖片并把圖片保存
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', //文件對應的參數(shù)名字(key)
formData: data, //其它的表單信息
success: function (res) {
var a = true;
that.loaddata(a);
message = ''
}
})
}
})
}
})
to_news.wxss
/* 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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript語言是網(wǎng)頁中廣泛使用的一種腳本語言，通過本文給大家介紹javascript基本語法，需要的朋友可以參考下本文2016-01-01
這篇文章主要為大家詳細介紹了H5+C3+JS實現(xiàn)五子棋游戲AI篇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要為大家詳細介紹了Bootstrap中CSS的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)星星評分效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
下面小編就為大家分享一篇基于h函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-08-08
JavaScript報錯：Uncaught ReferenceError: XYZ is&
在 JavaScript 編程中,“Uncaught ReferenceError: XYZ is not defined” 是一種常見的錯誤,這種錯誤通常發(fā)生在試圖使用一個未聲明的變量或標識符時,故本文給大家介紹了JavaScript報錯：Uncaught ReferenceError: XYZ is not defined的解決方法,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了微信小程序 WXML節(jié)點信息查詢詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
本篇文章主要介紹了微信小程序開發(fā)之麥克風動畫：幀動畫、放大、淡出的相關資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
electron-builder書寫nsis腳本在安裝electron程序時安裝其他應用程序(完美解決方案)
這篇文章主要介紹了electron-builder書寫nsis腳本在安裝electron程序時安裝其他應用程序的解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
一文帶你搞懂JS中導入模塊import和require的區(qū)別
JavaScript中，模塊是一種可重用的代碼塊，它將一些代碼打包成一個單獨的單元，并且可以在其他代碼中進行導入和使用。JavaScript中有兩種常用的方式：使用import和require，本文主要聊聊他們二者的區(qū)別2023-03-03