微信小程序如何在 wx：for 中判断页面跳转
403
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小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~