前端实现QQ聊天气泡

因公司交友小程序有聊天模块，需要实现一个如同qq气泡的功能。

如果在andriod开发平台的可以用“点九”实现：

“点九”是什么：是安卓开发里面的一种特殊的图片，这种格式的图片通过ADT自带的编辑工具生成，使用九宫格切分的方法，使图片支持在android 环境下的自适应展示，文件扩展为：.9.png。其实相当于把一张png图分成了9个部分（九宫格），分别为4个角，4条边，以及一个中间区域。如下图，在图片整体拉伸时，可以保持①③⑥⑧不变，保证圆角等细节，②⑦横向拉伸，④⑤纵向拉伸，避免了普通拉伸的模糊失真。

图：1-1

最简单的例子，微信对话框。

你不可能罗列出所有用户打字的多少，因此也不可能预先定义对话框的尺寸，对于下图这种基础对话框，

简单粗暴的拉伸只能得到下图（你这辈子也不会在微信里看到）：

而使用点九图后，拉伸的就优雅多了：

那前端开发需要怎么实现拉伸不会变形的气泡呢：

其实也就是用“点九”的这一种思路进行实现的，在css里面有一个不起眼的一个属性border-image-slice：border-image-slice属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。这个属性也就是实现气泡的核心。大家可以去百度自行搜索border-image-slice的详细用法border-image-slice - CSS（层叠样式表） | MDN

因为公司的小程序的多个地方用到了这种气泡，所以做了一个简单的封装：

注意：以下的代码在气泡的设计方面是有规定的，根据640 * 560进行气泡的设计，如图1-1四个角①③⑥⑧的区域是200 * 200，图案的设计不能超出①③⑥⑧区域；②⑦为气泡的上下线条，线条必须是一条直线线条，线条颜色单色或者上下渐变线条；④⑤为气泡的左右线条，线条必须是一条直线线条，线条颜色单色或者左右渐变线条

<view class="chat-bg-outer" style="border-image-source:url({{bubble.url}}); zoom: {{zoom}}">
  <view class="chat-bg-inner" style="background-color: {{bubble.bgColor}}">
      <!--ios、isQQ 兼容zoom属性在不同小程序，以及不同系统设备上的对字体的影响-->
      <view style="font-size: {{ios && !isQQ ? textSize : textSize * (1 / zoom)}}rpx;">{{text}}</view>
  </view>
</view>

.chat-bg-outer{
  border-style:solid;
  /*
  这里的200这个值由来：
  ui在设计的时候上下左右四个角正方形每一个的边长是200px
  */
  border-width:200px;
  border-image-slice:200 200 200 200;
  border-image-repeat:repeat;
  word-break: break-word;
  width: fit-content;
}

.chat-bg-inner{
  min-width: 100rpx;
}

Component({
  properties: {
    bubble: Object, // 气泡
    /**
     * zoom缩放，因为如果用很小的图片作为气泡图的话
     * 那么在渲染到视图层的话，
     * 气泡会显的十分模糊，
     * 所以在设计的时候气泡是按照640 * 560 设计的
     * 那么在显示的时候需要根据这个zoom比例进行缩放
     * 1.整个气泡的缩放
     * 2.气泡内文本的缩放
     */
    zoom: Number,
    text: String, // 聊天消息内容
    textSize: { // 文本字体大小
      type: Number,
      value: 30
    }
  },
  data: {
    isQQ: typeof qq !== "undefined",
    ios: wx.getSystemInfoSync().system.indexOf('iOS') !== -1,
  }
})

页面上的使用：

<view wx:for="{{Msgs}}">
  <bubble bubble="{{item.bubble}}" zoom="{{0.1}}" text="{{item.text}}" />
</view>

Page({
  data: {
    Msgs: [
      {
        bubble: {
          url: 'https://avatar-img.wuhan716.com/dress/%E7%94%9C%E7%94%9C%E5%85%94%E7%86%8A%E6%81%8B.png',
          bgColor: '#FFF4F9',
        },
        text: '这个方法可行吗？'
      },
      {
        bubble: {
          url: 'https://avatar-img.wuhan716.com/dress/0111%E7%AE%80%E7%BA%A6%E5%AE%87%E8%88%AA%E5%91%98_1.png',
          bgColor: '#EAEAEA',
        },
        text: '如果可以的话记得点个赞哈！如果可以的话记得点个赞哈！如果可以的话记得点个赞哈！如果可以的话记得点个赞哈！'
      }
    ]
  }
})

json文件别忘记引入组件哦！

最后的效果图：

 如果有更好的方法大家评论区可以指点指点哈。