小程序（十六）小程序仿微信聊天页面及功能

后期打算在小程序中添加即时聊天的功能，但是目前这个还没有考虑好以一种什么样的形势去实现，先接入一个腾讯AI提供的免费闲聊接口。先做一个大概的页面及功能。

腾讯AI地址：

https://ai.qq.com/doc/nlpchat.shtml#基础闲聊接口

有兴趣，可以试一试，当然，这种免费且不限次数的机器人肯定不会太聪明，期望值别太高。

我这里实现的效果是，可以发文字，表情，图片以及语音，，当然如果你还想要更多的功能，就需要自己去拓展了。

最后的效果：

其余的就不多介绍了，感兴趣的同学可以自行研究下代码：

Aichat.wxml

<!-- 顶部title及返回键 -->
<view class="index" style="height:{{globalData.CustomBar}}px;padding-top: {{globalData.StatusBar}}px;"><!-- 如果正在输入title变正在输入中 --><image catchtap="fanhui" mode="widthFix" class="index-img" src="/images/leftrow.png"></image><text>{{news?'正在输入中...':openid}}</text>
</view>
<view class="chat-index" style="margin-top:{{globalData.CustomBar}}px;height:calc(100vh - {{globalData.CustomBar}}px);"><view wx:if="{{playing}}" style="position: fixed;top: 75px;" class="chat-cbins">正在播放语音</view><!-- 聊天列表 --><scroll-view bindtouchstart="scrollstart" style="height: calc(100% - {{chatheight?chatheight:'50'}}px);{{emojis || camera?'transition:all 0.5s;':'transition:all 0.1s;'}}" scroll-with-animation="{{animation}}" class="scroll-view" scroll-y="{{true}}" scroll-into-view="{{curr}}"><!-- 循环消息列表 --><view wx:for="{{newsList}}" wx:key="index" class="news {{item.openid == openid?'contrary':''}}" id="jump{{index}}"><!-- 用户头像 --><view class="mews-image"><image src="{{item.logo}}" mode='aspectFill'></image></view><!-- 用户消息，消息分四种类型，语音，表情，图片，文字 --><!-- 当用户标识等于系统默认用户标识的时候 --><view class="news-centent {{item.openid == openid?'centent-right':'centent-left'}}" ><view class="{{item.openid == openid?'trianright':'trianleft'}}"></view><text selectable="{{true}}" wx:if="{{item.news_type == 'text'}}" class="{{item.openid == openid?'background_right':'background_left'}}" >{{item.news_centent}}</text><image class="news-images" catchtap="picture" data-src="{{item.news_centent.src}}" style="{{item.news_centent.width <= 100?'width:'+item.news_centent.width*2+'px;height:'+item.news_centent.height*2+'px':''}}{{item.news_centent.width > 100 && item.news_centent.width < 400?'width:130px;height:'+item.news_centent.height/(item.news_centent.width / 130)+'px':''}}{{item.news_centent.width > 400 && item.news_centent.width <= 600?'width:'+item.news_centent.width/2.5+'px;height:'+item.news_centent.height/2.5+'px':''}}{{item.news_centent.width > 600 && item.news_centent.width <= 800?'width:'+item.news_centent.width/4+'px;height:'+item.news_centent.height/4+'px':''}}{{item.news_centent.width > 800?'width:150px;height:'+item.news_centent.height/(item.news_centent.width / 150)+'px':''}};" wx:if="{{item.news_type == 'image'}}" src="{{item.news_centent.src}}"></image><view class="news-voice" wx:if="{{item.news_type == 'voice'}}" bindtap="{{cuindex == index?'suspend':'play'}}" data-voice="{{item.news_centent.voice}}" data-index="{{index}}" > <text wx:if="{{item.openid == openid}}">{{item.news_centent.dimen < '1'?'1':item.news_centent.dimen}}"</text><image src="/images/{{item.openid == openid?'voice-right':'voice-left'}}.png"></image><text wx:if="{{item.openid != openid}}">{{item.news_centent.dimen < '1'?item.news_centent.dimen:'1'}}"</text></view></view></view></scroll-view><!-- 底部功能栏 --><view class="chat-bottom" id="chat-height"><!-- 点击语音功能 --><view class="chat-centent"><view class="chat-pression"><image wx:if="{{!voice}}" catchtap="speak" src="/images/voice.png"></image><image wx:if="{{voice}}" catchtap="speak" src="/images/keyboard.png"></image></view><view class="chat-tencvi" style="{{sendout?'width:67%;':''}}"><textarea adjust-position="{{false}}" bindfocus="getkey" bindblur="getblur" wx:if="{{!voice}}" bindinput="moninput" value="{{news}}" maxlength="-1" auto-height /><view  bindtouchstart="touchdown" bindtouchend="touchup" wx:if="{{voice}}">按住 说话</view></view><view class="chat-pression"><image wx:if="{{!emojis}}" catchtap="emoji" src="/images/emotion.png"></image><image wx:if="{{emojis}}" catchtap="emoji" src="/images/keyboard.png"></image></view><view class="chat-pression" wx:if="{{!sendout}}"><image catchtap="camerax" src="/images/plus.png"></image></view><view class="chat-news" catchtap="message" style="{{sendout?'transition:all 0.5s;width:15%;':'width:0;position: absolute;right: 0;visibility: hidden;'}}"><view>发送</view></view></view><!-- 点击表情图标 --><view class="chat-cube" wx:if="{{emojis}}"><view class="cube-title">所有表情</view><view class="cube-centent"><view catchtap="expression" data-item="{{item}}" wx:for="{{pression}}" wx:key="index">{{item}}</view></view></view><!-- 点击加号图标 --><view class="chat-camera" wx:if="{{camera}}"><view wx:for="{{feature}}" wx:key="index" class="camera-feature" catchtap="featch" data-index="{{index}}"><view class="feature-src"><image src="{{item.src}}"></image></view><view class="feature-text">{{item.name}}</view></view></view></view>
</view>
<!-- 加载图标 -->
<view class="animation" wx:if="{{alcur}}"><image src="/images/recording.gif"></image>
</view>

Aichat.js

var app = getApp()
Page({data: {// 全局变量，控制全局显示样式globalData:{StatusBar:'',Custom:'',CustomBar:'',},// 消息列表（存在缓存中）newsList:[],// 用户唯一标识openid:'',// 头像figureurl_wx:'',// 是否显示加载图标animation:false,// 是否是发送声音voice:false,// 是否发送完成sendout:false,// 是否发送照片camera:false,// 新消息news:'',// 表情数组pression:[],// 是否是发送表情emojis:false,// 聊天列表高度curra:0,// 功能相册图标feature:[{ src: '/images/album.png', name: '相册' }],// 软键盘是否关闭alcur:false,// 视野（软键盘高度）vision:'',// 定时器对象time:'',// 期间duration:'',// 是否被正在播放录音playing:false,// cuindex:'',// ai回答aiAnswer:'',},/*** 自定义导航栏，返回上一级*/fanhui:function(e){// 清除聊天缓存wx.removeStorage({key: 'newsList',success: function(res) {},});wx.navigateBack({delta: 1});},/*** 监听页面底部输入框*/cuinbut:function(e){let that = thissetTimeout(function () {wx.createSelectorQuery().select('#chat-height').boundingClientRect(function (rect) {that.setData({// 底部输入框的高度chatheight: parseFloat(rect.height) + parseFloat(that.data.curra),// 当前最后一条信息curr: 'jump' + JSON.stringify(that.data.newsList.length - 1)})}).exec()}, 100);console.log(wx.getStorageSync('newsList'));},/*** 生命周期----显示页面*/onShow:function(e){// 页面赋值，最新一条数据索引标识this.setData({curr: 'jump' + JSON.stringify(this.data.newsList.length-1)})},/*** 生命周期加载页面*/onLoad: function (options) {let that = this;that.getUseridFromStorage();// 获取系统信息wx.getSystemInfo({success: e => {that.data.globalData.StatusBar = e.statusBarHeight;let capsule = wx.getMenuButtonBoundingClientRect();if (capsule) {that.data.globalData.Custom = capsule;that.data.globalData.CustomBar = capsule.bottom + capsule.top - (e.statusBarHeight + 15);} else {that.data.globalData.CustomBar = e.statusBarHeight + 50;}}});that.data.figureurl_wx = options.figureurl_wx;that.setData({// 用户唯一标识（这里是用户名）openid:options.openid,// 全局变量globalData: that.data.globalData,// 聊天记录存储在缓存中newsList: wx.getStorageSync('newsList'),// 表情列表pression: app.emoji.pression,// 录音vision: wx.getRecorderManager(),});},/*** 从缓存中获取用户信息*/getUseridFromStorage:function(){var self = this;// 从缓存中获取用户idwx.getStorage({key: 'userinfo',success (res) {self.data.user_id = res.data.id;self.data.figureurl_wx = res.data.figureurl_wx;self.data.openid = res.data.nickname;}});},/*** 失去焦点事件*/getkey:function(e){// 这个setdata的值没有用，wxml中无应用this.setData({curra: e.detail.height,emojis: false,camera: false})this.cuinbut();},
/*** 获取焦点事件*/getblur:function(e){this.setData({curra: 0,emojis: false,camera: false})this.cuinbut();},/*** 获取input输入的消息*/moninput:function(e){let that = thisthat.cuinbut();this.setData({sendout: e.detail.value?true:false,news: e.detail.value,})},/*** 滚动条开始滚动，收起表情列表以及功能列表*/scrollstart:function(e){this.setData({emojis: false,camera: false,})this.cuinbut();},/*** 点击语音图标时（收起功能栏）*/speak:function(e){this.setData({voice: !this.data.voice,emojis:false,camera:false,})this.cuinbut();},/*** 点击表情栏时（收起功能栏）*/emoji:function(e){this.setData({emojis: !this.data.emojis,voice:false,camera:false,})this.cuinbut();},/*** 点击功能栏时，收起声音和表情 */camerax:function(e){this.setData({camera: !this.data.camera,voice: false,emojis: false,})this.cuinbut();},/*** 上传图片*/upload:function(e){const that = this// 微信选择图片wx.chooseImage({count: 1,success: function (res) {// 这是临时文件路径const src = res.tempFilePaths[0];// 获取图片信息wx.getImageInfo({src,success: function (res) {const { width, height } = resconst newChatList = [...that.data.newsList,{news_type: 'image',news_centent: { src, width, height },openid: that.data.openid,logo:that.data.figureurl_wx}];// 用户消息发送完成，调用接口，等待AI回话that.aiChat('');that.setData({animation: true,newsList: newChatList,});// 同步设置缓存wx.setStorageSync('newsList', newChatList);that.cuinbut();// 用户消息发送完成，调用接口，等待AI回话that.aiChat();}})}})},/*** 点击看大图*/picture:function(e){let src = e.currentTarget.dataset.src;wx.previewImage({current: src,urls: [src]})},/*** 发送消息接口*/message:function(e){let that = thisconst newChatList = [...that.data.newsList, {news_type: 'text',news_centent: that.data.news,openid: that.data.openid,logo:that.data.figureurl_wx}];// 用户消息发送完成，调用接口，等待AI回话that.aiChat(that.data.news);that.setData({animation: true,newsList: newChatList,sendout:false,news: '',})wx.setStorageSync('newsList', newChatList);that.cuinbut();},/*** 选择表情*/expression:function(e){let item = e.currentTarget.dataset.itemthis.setData({sendout: true,news: this.data.news+=item,})},/*** 点击功能图标*/featch:function(e){let that = thislet index = e.currentTarget.dataset.indexif(index == 0){that.upload();}},/*** 按住说话*/touchdown: function (e) {let that = thiswx.stopVoice();that.setData({alcur: true,playing: false,cuindex: ''})that.data.duration = 0that.data.time = setInterval(function () {that.setData({duration: that.data.duration+1})},1000);// 开始录音wx.startRecord({success: function (res) {const newChatList = [...that.data.newsList, {news_type: 'voice',news_centent: { voice: res.tempFilePath, dimen: that.data.duration},openid: that.data.openid,logo:that.data.figureurl_wx}];// 用户消息发送完成，调用接口，等待AI回话that.aiChat('');that.setData({newsList: newChatList,})wx.setStorageSync('newsList', newChatList);that.cuinbut();// 用户消息发送完成，调用接口，等待AI回话that.aiChat();},fail:function(e){that.touchup();}});console.log(wx.getStorageSync('newsList'));},/*** 录音完成*/touchup: function (e) {let that = thiswx.stopRecord()clearInterval(that.data.time)that.setData({alcur:false})},/*** 播放录音*/play: function (e) {console.log('123456');let that = thislet voice = e.currentTarget.dataset.voicevar index = e.currentTarget.dataset.indexif (!that.data.playing){that.setData({playing:true,cuindex:index})wx.playVoice({filePath: voice,success: function () {that.setData({playing: false,cuindex:''})},})}},/*** 暂停录音*/suspend:function(e){wx.stopVoice();this.setData({playing: false,cuindex: ''})},/*** 聊天接口* @param str 用户发的消息*/aiChat:function(str){var self = this;// 请求后台接口获取文章列表wx.request({// 请求连接url: 'https://guanchao.site/index/im/tencentAI',// 请求所需要的的参数data: {'str':str},success(result){self.data.aiAnswer = result.data.data.answer;if(result.data.msg != 'ok'){self.data.aiAnswer = "你的问题太深奥了，我没有办法回答~";}const newChatList = [...self.data.newsList, {news_type: 'text',news_centent: self.data.aiAnswer,openid: 'ai',logo:'https://guanchao.site/uploads/atricle/5c0a66cac42cb.jpeg'}];self.setData({animation: true,newsList: newChatList,sendout:false,news: '',})wx.setStorageSync('newsList', newChatList);self.cuinbut();}});},clicks:function(){console.log('12345');}
})

Aichat.json

{"usingComponents": {},"navigationBarTitleText": "AI聊天","navigationStyle": "custom"
}

Aichat.wxss

page{background-color: #EDEDED;
}
.index{position:fixed;width: 100%;float: left;height: 64px;padding: 20rpx 220rpx 0 0;box-shadow: 0rpx 0rpx 0rpx;min-height: 0px;display: flex;align-items: center;background-color:#fff;z-index:9999;border-bottom: 1px solid #f7f7f7;top: 0;
}
.index-img{width: 34rpx;margin-left: 20rpx;
}
.index>text{margin-left: 20rpx;font-size: 28rpx;font-weight: bold;
}
.chat-index{/* padding-top: 30px; */width: 100%;float: left;overflow: hidden;
}
.scroll-view{width: 100%;float: left;overflow: hidden;background-color: #EDEDED;
}
.contrary{display:flex;flex-direction:row-reverse;
}
.news{width: 94%;float: left;overflow: hidden;padding: 0 3% 0 3%;margin-bottom: 26rpx;
}
.news:first-child{margin-top: 60rpx
}
.mews-image{width: 70rpx;height: 70rpx;float: left;
}
.mews-image>image{width: 100%;height: 100%;border-radius: 10rpx;
}
.news-centent{width: 70%;float: left;overflow: hidden;position: relative;
}
.centent-right{margin-right: 10rpx;padding: 0 15rpx 0 0;
}
.centent-left{margin-left: 10rpx;padding: 0 0 0 15rpx;
}
.trianright{width:0;height:0;border-top:15rpx solid transparent;border-bottom:15rpx solid transparent;border-left:15rpx solid #FFFFFF;position: absolute;right: 0;top: 20rpx;
}
.trianleft{width:0;height:0;border-top:15rpx solid transparent;border-bottom:15rpx solid transparent;border-right:15rpx solid #95EB69;position: absolute;left: 0;top: 20rpx;
}
.centent-right>text{float: right;
}
.centent-right>.news-images{float: right;
}
.centent-right>.news-voice{float: right;
}
.centent-left>text{float: left;
}
.centent-left>.news-images{float: left;
}
.centent-left>.news-voice{float: left;
}
.news-centent>text{word-wrap:break-word;word-break:normal; padding: 16.5rpx;/* background-color: #95EB69; */color: #000200;border-radius: 8rpx;font-size: 28rpx;max-width: 100%;line-height: 42rpx;
}
.news-centent>.news-images{max-width: calc(100%);padding: 16.5rpx;background-color: #95EB69;border-radius: 8rpx;
}
.news-centent>.news-voice{height: 70rpx;background-color: #95EB69;border-radius: 8rpx;padding: 0 10rpx;display: flex;align-items: center;
}
.centent-left>.news-voice>text{padding: 0 30rpx 0 15rpx;font-size: 26rpx;font-weight: bold;
}
.centent-right>.news-voice>text{padding: 0 15rpx 0 30rpx;font-size: 26rpx;font-weight: bold;
}
.centent-left>.news-voice>image{float: left;
}
.centent-right>.news-voice>image{float: right;
}
.news-voice>image{width: 50rpx;height: 42rpx;
}
.chat-bottom{width: 100%;float: left;overflow: hidden;background-color: #F7F7F7;transition:all 0.5s;
}
.chat-centent{width: 100%;float: left;overflow: hidden;position: relative;padding: 0 1.5%;
}
.chat-pression{width: 7%;height: 100rpx;display: flex;align-items: center;text-align: center;float: left;
}
.chat-pression>image{width: 45rpx;height: 45rpx;margin: 0 auto;
}
.chat-tencvi{width: 73%;padding: 0 1%;float: left;display: flex;align-items: center;transition:all 0.5s;
}
.chat-tencvi>textarea{ background-color: #fff;border-radius: 8rpx;width: 100%;padding: 3%;font-size: 28rpx;margin: 20rpx 0;max-height: 180rpx;
}
.chat-tencvi>view{width: 100%;padding: 3%;margin: 20rpx 0;background-color: #fff;border-radius: 8rpx;font-size: 26rpx;text-align: center;
}
.chat-news{height: 100rpx;float: right;display: flex;align-items: center;}
.chat-news>view{width: 80%;background-color: #07C160;color: #fff;border-radius: 8rpx;height: 60rpx;line-height: 60rpx;font-size:26rpx;text-align: center;
}
.chat-cube{width: 100%;float: left;overflow: hidden;height: 400rpx;background-color: #EDEDED;border-top: 1px solid #ddd;padding:2% 0 8% 0;overflow-y: auto;
}
.cube-title{width: 100%;float: left;font-size: 24rpx;padding:0 3.5%;position: relative;top: 10rpx;
}
.cube-centent{width: 100%;float: left;overflow: hidden;
}
.cube-centent>view{margin-top: 30rpx;width: 12.5%;float: left;text-align: center;
}
.chat-camera{width: 100%;float: left;overflow: hidden;padding-bottom: 60rpx;background-color: #EDEDED;border-top: 1px solid #ddd;overflow-y: auto;
}
.camera-feature{margin: 60rpx 0 0 5%;width: 18.75%;float: left;overflow: hidden;text-align: center;font-size: 20rpx;
}
.feature-src{background-color: #fff;border-radius: 15rpx;float: left;width: 80rpx;height: 80rpx;margin: 0 calc(50% - 40rpx);text-align: center;
}
.feature-src>image{width: 40rpx;height: 40rpx;margin:20rpx;
}
.feature-text{width: 100%;float: left;margin-top: 10rpx;
}
.animation{z-index: 10;position: fixed;width:300rpx;height: 300rpx; border-radius: 50%;margin: calc((100vh - 300rpx)/2) calc((100% - 300rpx)/2);
}
.animation>image{width: 100%;height: 100%;border-radius: 50%;
}
.animation::before {content: "";display: block;background-color: #ccc;filter: blur(10rpx);position: absolute;width: 100%;height: 100%;top: 10rpx;left: 10rpx;z-index: -1;opacity: 0.4;transform-origin: 0 0;border-radius: inherit;transform: scale(1, 1);
}
.chat-cbins{z-index: 10;width: 100%;background-color: rgba(26, 26, 26, 0.6);color: #fff;padding: 3%;font-size: 22rpx;
}
.background_left{background-color: #95EB69;
}
.background_right{background-color: #FFFFFF;
}

代码基本上就是这些了，其实没有多少东西，当然，就这么几行代码实现出来的效果肯定是有bug的，这个不要有太高的期望。

有好的建议，请在下方输入你的评论。
欢迎访问我的小程序：

小程序（十六）小程序仿微信聊天页面及功能相关推荐

小程序仿微信聊天按住说话功能
小程序仿微信聊天按住说话功能实现:按住说话有录音动画,上滑可取消发送,松开发送录音录音授权判断 # .wxml <view class="btn {{touchBtn?'hover ...
php按住说话然后播放,小程序仿微信聊天按住说话功能
小程序仿微信聊天按住说话功能实现:按住说话有录音动画,上滑可取消发送,松开发送录音录音授权判断 # .wxml bind:longpress="onLongpress" cat ...
android高仿微信聊天页面,Android 高仿微信语音聊天页面高斯模糊(毛玻璃效果)
目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
记录：仿微信聊天的处理时间功能
效果图创建文件一:timeFormat.js // padStart 的 polyfill,因为某些机型或情况,还无法支持es7的padStart,比如电脑版的微信小程序 // 所以这里做一个兼容p ...
python+flask实现和人工智能机器人对话（仿微信聊天页面）| 【Python系列】
情人节已经过了但是情人节和我们程序员有什么关系,没对象自己new一个不就完了. 话不多说直接上成品. 实现机器人的方式很多,可以深度学习训练机器人使其能与我们进行交流,但是请记住,所拥有的数据越多,机 ...
iOS仿微信聊天页面长按气泡弹窗
显示效果图如上,
vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
纯HTML+CSS实战之仿微信聊天界面制作
效果图如下: 主要运用了之前实战项目中的三角形制作和before及after伪类选择器知识(其中头像图片采用30px*30px图片) 代码如下: <!DOCTYPE html> <h ...

小程序（十六）小程序仿微信聊天页面及功能

小程序（十六）小程序仿微信聊天页面及功能相关推荐

最新文章

热门文章