微信小程序开发：实现聊天内容根据是自己还是他人的消息进行左右呈现

在进行微信小程序的开发过程中，细节的处理非常重要。今天就来介绍一下如何实现聊天内容根据是自己还是他人发送的来进行左右呈现。
展示一下实现效果：

实现该效果，需要利用if else语句来实现。关键是在数据层绑定一个标志信息，用于结构层判断是否为自己发送的信息。数据的绑定在js层的“data”这个对象中完成
js层代码：

// pages/wxChat/wxChat.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //chatLists这个数组用于存放聊天内容、头像和昵称
    chatLists: [{
      isRobot:1,//根据isRobot这个值标记出是否为本人所发信息，1表示不是
      avatar: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1354268575,1268995723&fm=26&gp=0.jpg',//头像
      nickname: '雪花飘飘',//昵称
      msg: '闲看花开花落，云卷云舒...'//聊天内容
    }
  ]
  },
  //bindKeyInput是绑定的发送事件
  bindKeyInput: function (e) {
    console.log(e.detail.value);
    this.setData({
      msg: e.detail.value//将输入框的内容赋给msg
    })

  },
 /**
   * 闲聊
   */
  sendMsg: function () {
    let msg = this.data.msg
    let data= {
      nickname:app.globalData.userInfo.nickName,
      avatar:app.globalData.userInfo.avatarUrl,
      msg: msg
    };
    let chatLists = this.data.chatLists;
    chatLists.push(data)
    //修改数据
    this.setData({
      chatLists: chatLists,
      msg:''
    })

  var _this = this;
  wx.request({
    url: 'http://localhost:7001/wxChat',
    //向服务器发请求携带的参数
    data:{msg:msg},
    header:{
      'content-type':'application/json'//数据类型为json格式
    },
    method:'GET',//请求的方法,方法值要大写      

    success(res){   
      console.log(res.data)
      let data= {
        isRobot:1,
        avatar: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1354268575,1268995723&fm=26&gp=0.jpg',
        nickname: '雪花飘飘',
        msg: res.data.Reply
      };
      let chatLists = _this.data.chatLists;
      chatLists.push(data)
      //修改数据
      _this.setData({
        chatLists: chatLists
      },
      function(){
        _this.bottom();
      }
      );
    },
  })
  },
  
  bottom: function () {
    wx.pageScrollTo({
    scrollTop: 1000000000
    })
},
  /**
   * 生命周期函数--监听页面加载
   */
  

在结构层（wxml）要注意if所放的位置。还有几个组件所绑定的事件、数据等
wxml层代码：

<view class="room">闲聊</view>
<view class="chat" wx:for="{{chatLists}}" wx:for-item="chat">
<view wx:if="{{chat.isRobot == 1}}" class="switch">
	<view class="left">
		<view align="left" class="avatar">
			<image src="{{chat.avatar}}"></image>
		</view>
		<view class="nickname">
		{{chat.nickname}}
		</view>
	</view>
	<view class="right">
			<view class="mark"></view>
	{{chat.msg}}
	</view>
</view>
<view wx:else class="switch">
    <view class="myMsgBox">
		<view class="myMsg">
			<view class="myMark"></view>
			{{chat.msg}}
		</view>
    </view>
		<view>
		<image class="myAvatar" src="{{chat.avatar}}"></image>
		<view class="nickname">
		{{chat.nickname}}
		</view>
	</view>
</view>
</view>
<view class="form">
  <image src="https://static.easyicon.net/preview/120/1205834.gif" bindtap="moremsg"></image>
	<input class="weui-input" value="{{msg}}" bindinput="bindKeyInput" auto-focus placeholder="请输入聊天内容" />
  <button class="big-btn" size="mini" bindtap="sendMsg">发送</button>
</view>

而在修饰层就没有多大问题，根据自己的喜好进行修饰。