详解微信小程序开发聊天室——实时聊天，支持图片预览

背景

微信小程序是一种轻巧的应用程序，用户可以使用它们在微信中进行各种任务。微信小程序可以从主屏幕、公众号信息、小程序搜索结果、分享链接等任何场景下进入。开发微信小程序可以使用前端开发技术，比如HTML、CSS和JavaScript。

本篇攻略将详细讲解如何开发一个实时聊天室，支持图片预览的微信小程序应用程序。

环境搭建

开发微信小程序需要满足以下条件：

拥有一个微信公众平台账号和小程序账号；
下载并安装微信开发者工具；
在微信公众平台中创建小程序，并绑定开发者工具。

功能实现

1. 实现基础聊天功能

创建首页index.wxml文件，编写页面布局，包括头部部分和底部部分，底部包括文本输入区、发送按钮和选择图片按钮等组件。

<view class="container">
  <view class="header">聊天室</view>
  <scroll-view scroll-y="true" class="msg-list">
  </scroll-view>
  <view class="input-area">
    <input class="input-msg" type="text" placeholder="请输入消息" 
           bindinput="inputHandler" value="{{inputMsg}}" />
    <button class="send-btn" bindtap="sendHandler">发送</button>
    <button class="choose-img-btn" bindtap="chooseImgHandler">+</button>
  </view>
</view>

创建index.js文件作为页面控制器，与数据层api进行交互并暴露数据模型，这里使用leancloud作为数据层api。部分代码如下：

const AV = require('../../libs/av-weapp-min.js');
const app = getApp()

Page({
  data: {
    inputMsg: '',
    messages: []
  },

  onLoad() {
    const objectId = app.globalData.room.objectId;
    this.room = AV.Object.createWithoutData('Room', objectId);

    this.subscribeMessages();
  },

  // 订阅最新消息
  subscribeMessages() {
    this.room.fetch().then(room => {
      const query = new AV.Query('Message');
      query.equalTo('room', room);
      query.subscribe(messages => {
        this.setData({ messages });
        this.scrollToBottom();
      });
    });
  },

  // 发送消息
  send() {
    const content = this.data.inputMsg;
    if (!content.trim()) { // 输入的内容为空
      return;
    }

    const message = new AV.Object('Message');
    message.set('room', this.room);
    message.set('content', this.data.inputMsg);
    message.save().then(() => {
      this.setData({ inputMsg: '' });
      this.scrollToBottom();
    });
  },

  // 滚动到底部
  scrollToBottom() {
    wx.createSelectorQuery().select('.msg-list').boundingClientRect(rect => {
      wx.pageScrollTo({
        scrollTop: rect.height
      });
    }).exec();
  },

  // 输入框输入事件
  inputHandler(e) {
    this.setData({ inputMsg: e.detail.value });
  },

  // 发送按钮点击事件
  sendHandler() {
    this.send();
  },

  // 选择图片按钮点击事件
  chooseImgHandler() {
    // 异步显示图片
    wx.chooseImage({
      success: res => { this.uploadImage(res.tempFilePaths[0]) },
    });
  },

  // 上传图片
  uploadImage(path) {
    const file = new AV.File('file-name', { blob: { uri: path } });
    file.save().then(() => {
      const message = new AV.Object('Message');
      message.set('room', this.room);
      message.set('type', 'image');
      message.set('image', file);
      message.save().then(() => {
        this.scrollToBottom();
      });
    })
  }
});

创建index.wxss文件，对页面进行样式美化
在微信开发者工具中进行编译调试

2. 实现图片预览功能

在index.js文件中，新增previewImage方法对图片进行预览。部分代码如下：

// 预览图片
previewImage(e) {
  const imageUrl = e.currentTarget.dataset.url;
  wx.previewImage({
    urls: this.data.messages.filter(msg => msg.type === 'image').map(msg => msg.image.url()),
    current: imageUrl
  });
},

在index.wxml文件中，给发送的图片添加数据url并绑定点击事件。部分代码如下：

<!-- 图片消息 -->
<image wx:for="{{messages}}"
       wx:key="{{item.objectId}}"
       class="msg-item-img send-img" 
       hidden="{{item.type !== 'image'}}" 
       data-url="{{item.image.url()}}"
       bindtap="previewImage"
       mode="aspectFit"
       src="{{item.image.url()}}" />