Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of WeChat Mini Programs how to achieve a simple chat room, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe everyone will gain something after reading this article on how to achieve a simple chat room by WeChat Mini Programs. Let's take a look.

Cha.js

/ / pages/chat/chat.js// gets Mini Program instance let app = getApp () Page (initial data of {/ * page * / data: {nickname: ", avatar:", chatlists: [{nickname: "Kobayashi", 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: 'Hello! `}], 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: ""}) / / send the chat content to the server, return it after processing, and then put the returned data into chatlist}, getInput:function (e) {console.log (e.detail.value); this.setData ({invalue:e.detail.value});}, / * Lifecycle function-- load the listening page * / onLoad: function (options) {console.log (app.globalData.userInfo.nickName) This.setData ({nickname:app.globalData.userInfo.nickName, avatar:app.globalData.userInfo.avatarUrl}) }, / * Lifecycle function-first rendering of listening page completed * / onReady: function () {}, / * Lifecycle function-listening Page display * / onShow: function () {}, / * Lifecycle function-listening Page Hidden * / onHide: function () {} / * Lifecycle function-listens to page unload * / onUnload: function () {}, / * page related event handler-listens to user drop-down action * / onPullDownRefresh: function () {}, / * Handler function for pull-down event on page * / onReachBottom: function () {} / * users click on the upper right corner to share * / onShareAppMessage: function () {}})

Chat.wxml

{{chat.content}} {{chat.nickname}} {{chat.content}} send

Chat.css

/ * pages/chat/chat.wxss * / .avatar {width: 130rpx; height: 130rpx; border-radius: 50%;} .chat {display: flex; align-items: center; margin-top: 15px;} .self {justify-content: flex-end; margin-top: 15px.left {padding: 20rpx; align-self: flex-start;} .self .left {padding-top: 0;} .right {margin-left: 10px;} .right .content {background-color: # eee Color:# 123; font-size: 16px; / * border:1px solid # ddd; * / padding: 10px; line-height: 26px; margin-right: 10px; border-radius: 3px; position: relative; min-height: 20px;} .right .content:: before {content: "; display: block; width: 0; height: 0; border: 12px solid transparent; border-right-color:#eee; position: absolute; top: 10px; left:-23px }. Self .right. Content:: before {border: 0;} .self .right. Content:: after {content: "; display: block; width: 0; height: 0; border: 12px solid transparent; border-left-color:#1ad409; position: absolute; top: 10px; right:-23px;} .self .right. Content {background-color: # 1ad409;} .form {position: fixed; bottom: 0; background-color: # eee; width: 750rpx Display: flex; height: 39px; align-items: center;}. Form input {width: 600rpx; background-color: # fff; height:36px; line-height: 36px; padding: 05px;} button {width:65rpx; height:36px;} this article on "how WeChat Mini Programs implements a simple chat room" is introduced here, thank you for reading! I believe you all have a certain understanding of the knowledge of "how to achieve a simple chat room by WeChat Mini Programs". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.