前言
接着前面的文章，我们来讲弹幕小工具的最后一篇。用小程序来实现弹幕的发送端，发送端的需求很简单：一个简单的小程序，把用户要输入的弹幕内容转发给nodejs端，用户双击发送按钮时，默认发送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 star数较少
- gulp 等 //自己来转
鉴于我们这个项目非常小，我安装了Easy less，less文件更新时，wxss就会自动更新。
授权
小程序初始化后，本身的代码里面已经写好了授权的部分。需要注意的是 wx.getUserInfo 接口直接弹出授权框将不再支持，而是用button组件引导用户点击后弹出授权框。详情。用户授权之后调用wx.getUserInfo可以拿到用户信息。
建立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);
}
复制代码其他
- 获取小程序码，接口只能生成已发布的小程序的二维码；小程序发布需要审核，审核时间大概是两天。
- 开发时可以通过添加编译模式，进入页面时带上参数。
结语
本文大概讲解了弹幕小程序端的关键点，有前端开发基础的同学，小程序是很容易上手的。以上，如有错误，恳请指正！
@Author: 小夭yao爱吃糖糖糖