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

背景

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

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

环境搭建

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

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

功能实现

1. 实现基础聊天功能

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>

1. 创建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();
      });
    })
  }
});

1. 创建index.wxss文件，对页面进行样式美化

2. 在微信开发者工具中进行编译调试

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()}}" />

总结

本篇攻略详细讲解了如何开发微信小程序聊天室以及如何支持图片预览功能，从微信小程序的基础知识、环境搭建、功能实现等多个方面进行了讲解。通过本篇攻略的学习，可以快速上手微信小程序开发，为自己的创新探索提供更多可能性。