最近在开发微信小程序，前后端均是我一个人负责，也着实受了不少苦

网上客服消息开发挺多的，但是大多数说的都不详尽对新人来说有很多坑，最后还是根据官方说明文档一步一步走下来，写一份新人版的供大家参考，望大佬指正

效果图

wxml

<view class="">
    <!-- Left -->
<view class="chat-sender">
  <view><image src="https://profile.csdnimg.cn/1/5/6/3_weixin_30522183" class="avatar"></image></view>
  <view>
    <view class="chat-left_triangle"></view>
    <span> 苹果增加三款配件的颜色选项</span>
  </view>
</view>
<!-- Right -->
<view class="chat-receiver">
  <view><image src="https://profile.csdnimg.cn/1/5/6/3_weixin_30522183" class="avatar"></image></view>
  <view>
    <view class="chat-right_triangle"></view>
    <span> 但是如果你正在再发新的APP跨平台项目，我建议你考虑一下Ionic2/Ionic3。 ionic2/Ionic3的架构使得“单一职责原则”得到了体现，组件、页面之间相互独立，有利于内聚和解耦。</span>
  </view>
</view>
</view>

wxss

.chat-sender{
    clear:both;
    font-size: 80%;
  }
  .chat-sender view:nth-of-type(1){
    float: left;
  }
  .chat-sender view:nth-of-type(2){
    background-color: white;
    /*float: left;*/
    margin: 0 50px 10px 50px;
    padding: 10px 10px 10px 10px;
    border-radius:7px;
    text-indent: -12px;
  }

  .chat-receiver{
    clear:both;
    font-size: 80%;
  }
  .chat-receiver view:nth-of-type(1){
    float: right;
  }
  .chat-receiver view:nth-of-type(2){
    /*float:right;*/
    background-color: #b2e281;
    margin: 0px 50px 10px 50px;
    padding: 10px 10px 10px 10px;
    border-radius:7px;
  }

  .chat-receiver view:first-child img,
  .chat-sender view:first-child img{
    width: 40px;
    height: 40px;
    /*border-radius: 10%;*/
  }
  .chat-left_triangle{
    height: 0px;
    width: 0px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent white transparent transparent;
    position: relative;
    left: -22px;
    top: 3px;
  }
  .chat-right_triangle{
    height: 0px;
    width: 0px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #b2e281;
    position: relative;
    right:-22px;
    top:3px;
  }
  .avatar{
      width: 80rpx;height: 80rpx;
      border-radius: 50rpx;
  }