页面布局
<!-- 主页面 -->
<view class="page-deLovely">
<scroll-view scroll-y="true" scroll-into-view="{{toView}}" class="dialogWrap" style='height: {{scrollHeight}}'>
<view wx:for="{{msgList}}" wx:key="unique" class="dialog">
<view wx:if="{{item.position=='left'}}" data-copy="{{item.text}}" bindlongtap="copy" class="intellectualBox" id='msg-{{index}}'>
<image class="img" src="../../images/deLovelyAvater.png" />
<view class="dialogBox">
<view class="fot"></view>
<view class="font">{{item.text}}</view>
</view>
</view>
<view wx:if="{{item.position=='right'}}" data-copy="{{item.text}}" bindlongtap="copy" class="userBox" id='msg-{{index}}'>
<view class="dialogBox">
<view class="fot"></view>
<view class="font">{{item.text}}</view>
</view>
<image class="img" src="{{item.avatarUrl}}" />
</view>
</view>
<view style='height: 16vw'></view>
</scroll-view>
<view class='inputRoom' style='bottom: {{inputBottom}}'>
<!--<input confirm-type="send" bindconfirm="send" bindinput="getValue" class="input" adjust-position='{{false}}' bindfocus="focus" bindblur="blur" placeholder="要我怎么夸你,在这里输入吧" value="{{inputValue}}"/>-->
<input bindinput="getValue" class="input" adjust-position='{{false}}' bindfocus="focus" bindblur="blur" placeholder="要我怎么夸你,在这里输入吧" value="{{inputValue}}"/>
<button class="btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="btnSend">发送</button>
</view>
</view>
页面样式less与页面样式wxss
.page-deLovely{
.font{
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.dialogWrap{
display: flex;
align-items: center;
.dialog{
padding: 0 30rpx;
}
.intellectualBox{
// border: 1px solid rebeccapurple;
// float: left;
margin-top: 23rpx;
display: flex;
flex-direction: row;
.img{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
// background-color: #AAEB7B;
}
.dialogBox{
// width: 342rpx;
max-width: 342rpx;
margin-left: 30rpx;
background: #FFFFFF;
border-radius: 10rpx;
box-shadow: -1px 5px 6px 0px rgba(0, 0, 0, 0.04);
position:relative;
padding: 40rpx 30rpx;
.fot{
position: absolute;
left: -30rpx;
bottom: 50%-20rpx;
width: 40rpx;
height: 40rpx;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
// box-shadow: -1rpx 5rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
border-width: 20rpx;
}
}
}
.userBox{
// border: 1px solid rebeccapurple;
// float: right;
margin-top: 23rpx;
display: flex;
flex-direction: row;
justify-content: flex-end;
.img{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background-color: #AAEB7B;
}
.dialogBox{
// width: 342rpx;
max-width: 342rpx;
margin-right: 21rpx;
background: #AAEB7B;
border-radius: 10rpx;
box-shadow: -1px 5px 6px 0px rgba(0, 0, 0, 0.04);
position:relative;
padding: 40rpx 28rpx;
text-align: center;
.fot{
position: absolute;
right: -30rpx;
bottom: 50%-20rpx;
width: 40rpx;
height: 40rpx;
border-style: solid;
border-color: transparent transparent transparent #AAEB7B ;
// box-shadow: -1rpx 5rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
border-width: 20rpx;
}
}
}
}
.inputRoom {
width: 100vw;
height: 16vw;
// border-top: 1rpx solid #cdcdcd;
background-color:#FFFFFF;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
z-index: 20;
.input {
width: 494rpx;
height: 70rpx;
margin-left: 30rpx;
background: #F2F5F8;
border-radius: 20rpx;
padding-left: 30rpx;
}
.btn{
width: 150rpx;
height: 70rpx;
background: linear-gradient(89deg, #A5CFFB, #91B3F7);
border-radius: 20rpx;
font-size: 24rpx;
font-weight: 500 !important;
font-family: PingFang SC;
color: #FFFFFF;
}
}
}
less可以不用直接用wxss
.page-deLovely .font {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.page-deLovely .dialogWrap {
display: flex;
align-items: center;
}
.page-deLovely .dialogWrap .dialog {
padding: 0 30rpx;
}
.page-deLovely .dialogWrap .intellectualBox {
margin-top: 23rpx;
display: flex;
flex-direction: row;
}
.page-deLovely .dialogWrap .intellectualBox .img {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}
.page-deLovely .dialogWrap .intellectualBox .dialogBox {
max-width: 342rpx;
margin-left: 30rpx;
background: #FFFFFF;
border-radius: 10rpx;
box-shadow: -1px 5px 6px 0px rgba(0, 0, 0, 0.04);
position: relative;
padding: 40rpx 30rpx;
}
.page-deLovely .dialogWrap .intellectualBox .dialogBox .fot {
position: absolute;
left: -30rpx;
bottom: 30%;
width: 40rpx;
height: 40rpx;
border-style: solid;
border-color: transparent #FFFFFF transparent transparent;
border-width: 20rpx;
}
.page-deLovely .dialogWrap .userBox {
margin-top: 23rpx;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.page-deLovely .dialogWrap .userBox .img {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background-color: #AAEB7B;
}
.page-deLovely .dialogWrap .userBox .dialogBox {
max-width: 342rpx;
margin-right: 21rpx;
background: #AAEB7B;
border-radius: 10rpx;
box-shadow: -1px 5px 6px 0px rgba(0, 0, 0, 0.04);
position: relative;
padding: 40rpx 28rpx;
text-align: center;
}
.page-deLovely .dialogWrap .userBox .dialogBox .fot {
position: absolute;
right: -30rpx;
bottom: 30%;
width: 40rpx;
height: 40rpx;
border-style: solid;
border-color: transparent transparent transparent #AAEB7B;
border-width: 20rpx;
}
.page-deLovely .inputRoom {
width: 100vw;
height: 16vw;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
z-index: 20;
}
.page-deLovely .inputRoom .input {
width: 494rpx;
height: 70rpx;
margin-left: 30rpx;
background: #F2F5F8;
border-radius: 20rpx;
padding-left: 30rpx;
}
.page-deLovely .inputRoom .btn {
width: 150rpx;
height: 70rpx;
background: linear-gradient(89deg, #A5CFFB, #91B3F7);
border-radius: 20rpx;
font-size: 24rpx;
font-weight: 500 !important;
font-family: PingFang SC;
color: #FFFFFF;
}
页面逻辑
//夸人小可爱
const app = getApp();
// var inputVal = '';
// var msgList = [];
// var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;
var keyHeight = 0;
var util = require('../../utils/storage.js');
Page({
data: {
scrollHeight: '100vh',
inputBottom: 0,
inputValue: '',
msgList: [
// { position: 'right', text: "夸我可爱", avatarUrl: '' },
{ position: 'left', text: "Hi,要我怎么夸你呢" }
],
},
onLoad: function () {
let islogin = this.islogin()
console.log(islogin)
if (!islogin) {
// console.log(123)
// this.setting()
} else {
let msgList = util.get('msgList')
console.log(msgList)
if (msgList) {
console.log(123)
this.setData({
msgList: msgList,
toView: 'msg-' + (msgList.length - 1),
})
}
}
},
// 聚焦时键盘弹起
focus: function (e) {
keyHeight = e.detail.height;
let msgList = this.data.msgList;
this.setData({
scrollHeight: (windowHeight - keyHeight) + 'px',
inputBottom: keyHeight + 'px',
toView: 'msg-' + (msgList.length - 1),
});
},
// 失去焦点时键盘收起
blur: function (e) {
let msgList = this.data.msgList;
this.setData({
scrollHeight: '100vh',
inputBottom: 0,
toView: 'msg-' + (msgList.length - 1),
})
},
// 获得value值
getValue: function (e) {
let inputValue = e.detail.value
this.setData({
inputValue: inputValue
})
},
// 按钮发送
btnSend: async function (e) {
let inputValue = this.data.inputValue
if (inputValue == '') {
wx.showToast({
title: '多少说下要怎么夸你呢',
duration: 2000
})
} else {
// console.log(2)
// console.log(inputValue)
let res = e.detail
const info = await getApp().login(res);
if (!info) return;
this.islogin()
// await this.islogin()
let msgList = this.data.msgList;
msgList.push({
position: 'right',
text: inputValue,
avatarUrl: this.data.avatarUrl
})
// 调用函数获取智能机器人夸人的话
this.serviceValue()
this.setData({
msgList: msgList,
inputValue: '',
toView: 'msg-' + (msgList.length - 1),
})
}
},
// // 键盘发送
// send: async function (e) {
// let inputValue = e.detail.value
// if (inputValue == '') {
// wx.showToast({
// title: '多少说下要怎么夸你呢',
// duration: 2000
// })
// } else {
// // console.log(inputValue)
// // await this.islogin()
// let islogin = this.islogin()
// console.log(islogin)
// if (!islogin) {
// console.log(123)
// this.setting()
// }
// let msgList = this.data.msgList;
// msgList.push({
// position: 'right',
// text: inputValue,
// // text: '测试缓存',
// })
// // 调用函数获取智能机器人夸人的话
// // this.serviceValue()
// this.setData({
// msgList: msgList,
// inputValue: ''
// })
// }
// },
// 智能机器人夸人的话的函数
serviceValue: function () {
let that = this
let inputValue = that.data.inputValue
wx.serviceMarket.invokeService({
service: 'wxcae50ba710ca29d3', // 'wx_mp_appid',
api: 'thumbupbot',
data: {
"q": inputValue, // 需要夸的内容
},
}).then(res => {
// console.log('invokeService success', res)
if (res.errMsg == 'invokeService:ok') {
let serviceValue = res.data.data_list[0].result
let msgList = that.data.msgList
msgList.push({ position: 'left', text: serviceValue })
that.setData({
msgList: msgList,
toView: 'msg-' + (msgList.length - 1),
})
util.put('msgList', that.data.msgList, 604800)
}
}).catch(err => {
console.error('invokeService fail', err)
util.put('msgList', that.data.msgList, 604800)
wx.showModal({
title: 'fail',
content: '出错了',
})
})
},
// 复制
copy: function (e) {
let copy = e.currentTarget.dataset.copy
wx.setClipboardData({
data: copy,
success(res) {
// wx.getClipboardData({
// success(res) {
// console.log(res.data) // data
// }
// })
}
})
},
// 判断登陆
islogin: function () {
let userInfo = wx.getStorageSync('userInfo')
if (userInfo) {
this.setData({
nickName: userInfo.nickName,
avatarUrl: userInfo.avatarUrl
})
return true
}
else {
return false
}
},
// 用户点击右上角分享
onShareAppMessage: function (options) {
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: "给你推荐一个夸人小可爱", // 默认是小程序的名称(可以写slogan等)
// path: this.data.path, // 默认是当前页面,必须是以‘/’开头的完整路径
// imageUrl: this.data.imageUrl, //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
// 转发成功之后的回调
if (res.errMsg == 'shareAppMessage:ok') {
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败,其中 detail message 为详细失败信息
}
}
};
// 来自页面内的按钮的转发
if (options.from == 'button') {
}
// 返回shareObj
return shareObj;
},
})