前言
基于 Electron + Node.JS + 小程序 实现弹幕小工具(开篇)
基于 Electron + Node.JS + 小程序 实现弹幕小工具(上篇)
基于 Electron + Node.JS + 小程序 实现弹幕小工具(中篇)
接着前面的文章, 我们来讲弹幕小工具的小程序篇. 用小程序来实现弹幕的发送端, 发送端的需求很简单: 一个简单的小程序, 把用户要输入的弹幕内容转发给 Node.JS 端, 用户双击发送按钮时, 默认发送 666.
效果图
小程序就只有这两个页面, 非常简单, 用户扫码首次进入需要授权, 然后就进入弹幕发送页, 输入弹幕内容, 单击发送按钮即可发送. 双击可发送 666. 小程序端的架构非常简单, 这里就不再赘述, 需要的同学可移步总体架构图.
开始开发
快速建立一个小程序项目:
1, 先下载开发者工具.
2, 选择一个空目录, AppID 填写自己的小程序 AppID 或使用测试号, 然后选择建立普通快速启动模板即可快速建立一个小程序项目.
然后你的第一个小程序已经初始化好了.
写代码之前
虽然小程序有提供开发者工具, 但是我们通常会把它当做一个模拟器和调试器. 真正写代码还是会用自己常用的编译器, 我自己使用的是 vsCode. 推荐两个插件:
- minapp // 小程序的标签, 属性智能补全
- wechat-shippet // 代码片段模板 JSON,JS,wxml 片段
另外, 小程序的 WXSS 没办法写嵌套, 为了符合开发习惯, 通常我们会写好 CSS 或 Less 然后转成 wxss 代码.
- Easy Less //vscode 插件, 缺点: 依赖于 vscode 编辑器, 而且需要在 Less 文件前加一句 //out: index.wxss
- wxss-cli //NPM 包 Less 转 wxss https://github.com/echo008/wxss-cli star 数较少
gulp 等 // 自己来转
鉴于我们这个项目非常小, 我安装了 Easy Less,Less 文件更新时, wxss 就会自动更新.
授权
小程序初始化后, 本身的代码里面已经写好了授权的部分. 需要注意的是 wx.getUserInfo 接口直接弹出授权框将不再支持, 而是用 button 组件引导用户点击后弹出授权框. 详情. 用户授权之后调用可以拿到用户信息.
建立 websocket 连接
为了双向通信, 我们选用了 websocket, 小程序发送弹幕内容到服务端时, 服务端能够直接转发给客户端. 小程序有提供 websocket API, 我们在小程序启动后建立 websocket 连接:
- wx.connectSocket({
- url: 'wss://XXX',
- header:{
- 'content-type': 'application/json'
- },
- protocols: ['protocol1'],
- success: function() {
- console.log('成功创建一个 socket 连接');
- }
- });
用到的域名需要添加到服务器域名, 本地的域名直接在开发者工具右上角 ->详情 ->勾选不校验域名即可.
然后再多加一点点异常处理, 在 socket 关闭或出错时重连:
- wx.onSocketClose(function() {
- // 建立 socketConnect
- });
- wx.onSocketError(function() {
- // 建立 socketConnect
- })
发送弹幕
发送弹幕这里我们分两个需求, 单击 -> 发送用户输入的内容; 双击(且用户输入为空) -> 发送 666.
小程序本身并没有提供双击事件, 那么我们就来手撕一个吧.
双击事件: 短时间 (300ms) 内点击两次, 则算作是双击事件. 思路很简单, 当前点击时间 - 上一次点击时间 <300ms , 则为双击事件, 否则为单击事件. 这里需要注意的是, 单击事件需要延迟 300ms 再执行, 等到点击完 300ms 没有再次点击, 才能确定是单击事件.
- // 当前时间
- const currentTime = e.timeStamp;
- // 上一次的点击事件发生的时间
- const lastTapTime = this.lastTapTime;
- // 更新上一次的点击时间
- this.lastTapTime = e.timeStamp;
- if(currentTime - lastTapTime < 300 && !content) {
- // 双击事件
- data.content = '666';
- this.sendBulletScreen(data, 'double');
- // 清掉单击事件
- clearTimeout(this.timer);
- } else {
- // 单击事件
- if (!content) {
- return ;
- }
- this.timer = setTimeout(() => {
- this.sendBulletScreen(data);
- }, 300);
- }
其他
获取小程序码, 接口只能生成已发布的小程序的二维码; 小程序发布需要审核, 审核时间大概是两天.
开发时可以通过添加编译模式, 进入页面时带上参数.
来源: https://juejin.im/post/5bfbdcf7e51d452d565015d5