弹幕小工具小程序端开发指南

前端

2023-09-09 07:03:10

继续上篇内容，我们来聊聊弹幕小工具的小程序部分。小程序端只包含两个页面，结构简单明了。用户首次扫描二维码进入时需要授权，随后进入弹幕发送页面。在此页面中，用户可以输入弹幕内容并点击发送按钮进行发送。此外，双击屏幕可发送"666"弹幕。

小程序端的架构十分简洁，此处不再赘述。有兴趣的读者可以参阅总体架构图。

步骤 1：下载开发者工具

首先，你需要下载开发者工具：

微信小程序开发者工具

步骤 2：创建小程序项目

打开开发者工具，新建一个项目。
选择「创建应用」，然后选择「小程序」。
为你的项目命名并选择一个目录。

步骤 3：编写代码

在 pages 文件夹中，创建两个页面文件：index.js 和 chat.js。

index.js

Page({
  onLoad() {
    // 获取授权信息
    wx.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.userInfo']) {
          // 未授权，跳转到授权页面
          wx.navigateTo({
            url: '/pages/auth/auth',
          })
        }
      }
    })
  },
  onShareAppMessage() {
    return {
      title: '弹幕小工具',
      path: '/pages/index/index',
    }
  },
})

chat.js

Page({
  data: {
    danmuList: [],
    inputValue: '',
  },
  onLoad() {
    // 监听消息推送
    wx.onSocketMessage((res) => {
      // 将接收到的弹幕数据添加到弹幕列表中
      this.setData({
        danmuList: [...this.data.danmuList, res.data],
      })
    })
  },
  onUnload() {
    // 取消消息推送监听
    wx.offSocketMessage()
  },
  onInput(e) {
    // 输入框值改变
    this.setData({
      inputValue: e.detail.value,
    })
  },
  sendDanmu() {
    // 发送弹幕
    if (!this.data.inputValue) return

    wx.sendSocketMessage({
      data: this.data.inputValue,
    })

    this.setData({
      inputValue: '',
    })
  },
  send666() {
    // 发送666
    wx.sendSocketMessage({
      data: '666',
    })
  },
  onShareAppMessage() {
    return {
      title: '弹幕小工具',
      path: '/pages/chat/chat',
    }
  },
})