洞察探索如何利用兼容微信生态的小程序容器，实现跨平台开发，助力金融和车联网行业的数字化转型。
453
2023-11-10
微信小程序实现简单聊天室
本文实例为大家分享了微信小程序实现简单聊天室的具体代码，供大家参考，具体内容如下
cha.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
// pages/chat/chat.js
// 获取小程序实例
let app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
nickname:,
avatar:,
chatlists:[
{
nickname:小林,
avatar:https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591617971938&di=30d9f3b49a0d1b27fb4b61ea424f82c9&imgtype=0&src=http%3A%2F%2Fa-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F07%2F20161007135058_nUxji.jpeg,
content:`你好呀！`
}
],
invalue:
},
sendMsg:function(){
let _this = this;
let obj = {
nickname:_this.data.nickname,
avatar:_this.data.avatar,
content:_this.data.invalue
};
let arr = _this.data.chatlists;
arr.push(obj)
_this.setData({
chatlists:arr,
invalue:
});
// 把聊天内容发送到服务器，处理完成后返回，再把返回的数据放到chatlist里面
},
getInput:function(e){
console.log(e.detail.value);
this.setData({invalue:e.detail.value});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(app.globalData.userInfo.nickName);
this.setData({
nickname:app.globalData.userInfo.nickName,
avatar:app.globalData.userInfo.avatarUrl
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
chat.wxml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<block wx:for="{{chatlists}}" wx:for-index="ind" wx:for-item="chat" wx:key="ind">
<view class="chat self" wx:if="{{nickname == chat.nickname}}">
<view class="right">
<view class="content">
{{chat.content}}
</view>
</view>
<view class="left">
<image class="avatar" src="{{chat.avatar}}"></image>
</view>
</view>
<view class="chat" wx:else>
<view class="left">
<image class="avatar" src="{{chat.avatar}}"></image>
</view>
<view class="right">
<view class="nickname">{{chat.nickname}}</view>
<view class="content">
{{chat.content}}
</view>
</view>
</view>
</block>
<view class="form">
<view class="weui-cell weui-cell_input">
<input class="weui-input" value="{{invalue}}" bindinput="getInput" placeholder="请输入聊天内容" />
</view>
<button type="primary" bindtap="sendMsg">发送</button>
</view>
chat.css
您可能感兴趣的文章:微信小程序实现聊天室功能微信小程序实现聊天室详解微信小程序开发聊天室—实时聊天，支持图片预览微信小程序websocket聊天室的实现示例代码微信小程序 聊天室简单实现
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
- 洞察探索如何利用兼容微信生态的小程序容器，实现跨平台开发，助力金融和车联网行业的数字化转型。
- 洞察企业如何通过FinClip提升跨平台小程序加载效率，适应多样化市场需求
- 洞察提升小程序标签管理，实现高效的金融行业数字化转型
- 洞察如何通过ios app灵活实现微信小程序的跨平台管理
- 洞察如何利用第三方app跳转到微信小程序提升企业运营效率
- 洞察探索小程序支付功能实现的最佳策略，如何通过FinClip技术简化支付流程并提升用户体验，助力企业数字化转型
- 洞察探索如何利用 FinClip 提供的跨平台小程序技术，实现高效的支付管理与合规运营
- 如何借助FinClip提升App小程序支付的敏捷性和合规性？
- 在数字化转型中，企业如何通过小程序支付提升客户体验和运营效率？
- 小程序开发设计在提升企业数字化转型效率中的关键作用
推荐文章
热评文章
暂时没有评论，来抢沙发吧~