微信小程序示例 - 剪刀石头布
=====================
> 没事打开小程序,和附近的人剪刀石头布,想来就来,想走就走。谁能成为武林高手?!
微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。
腾讯云拿到了小程序内测资格,研究了一番之后,发现微信支持 WebSocket 还是很值得玩味的。这个特性意味着我们可以做一些实时同步或者协作的小程序。
这篇文章分享一个简单的剪刀石头布的小游戏的制作,希望能对想要在小程序中使用 WebSocket 的开发者有帮助。
![运行截图](screenshot.gif)
整个游戏非常简单,连接到服务器后自动匹配在线玩家(没有则分配一个机器人),然后两人进行剪刀石头布的对抗游戏。当对方进行拳头选择的时候,头像会旋转,这个过程使用 WebSocket 会变得简单快速。
## 部署和运行
拿到了本小程序源码的朋友可以尝试自己运行起来。
### 整体架构
![整体架构](http://easyimage-10028115.file.myqcloud.com/internal/xqscn2zj.he3.jpg)
小程序的架构非常简单,这里有两条网络同步,一条是 HTTPS 通路,用于常规请求。对于 WebSocket 请求,会先走 HTTPS 后再切换协议到 WebSocket 的 TCP 连接,从而实现全双工通信。
### 1. 准备域名和证书
在微信小程序中,所有的网路请求受到严格限制,不满足条件的域名和协议无法请求,具体包括:
* 只允许和在 MP 中配置好的域名进行通信,如果还没有域名,需要注册一个。
* 网络请求必须走 HTTPS 协议,所以你还需要为你的域名申请一个 SSL 证书。
> 腾讯云提供[域名注册](https://www.qcloud.com/product/dm.html)和[证书申请](https://console.qcloud.com/ssl)服务,还没有域名或者证书的可以去使用
域名注册好之后,可以登录[微信公众平台](https://mp.weixin.qq.com)配置通信域名了。
![配置通信域名](http://easyimage-10028115.file.myqcloud.com/internal/tjzpgjrz.y5a.jpg)
### 2. Nginx 和 Node 代码部署
本示例长连接服务要运行,需要进行以下几步:
* 部署 Nginx,Nginx 的安装和部署请大家自行搜索(注意需要把 SSL 模块也编译进去)
* 配置 Nginx 反向代理到 `http://127.0.0.1:9595`
* Node 运行环境,可以安装 [Node V6.6.0](https://nodejs.org/)
* 部署 `server` 目录的代码到服务器上,如 `/data/release/qcloud-applet-websocket`
* 使用 `npm install` 安装依赖模块
* 使用 `npm install pm2 -g` 安装 pm2
> 上述环境配置比较麻烦,剪刀石头布的服务器运行代码和配置已经打包成[腾讯云 CVM 镜像](https://buy.qcloud.com/cvm?marketImgId=371),推荐大家直接使用。
> * 镜像部署完成之后,云主机上就有运行 WebSocket 服务的基本环境、代码和配置了。
> * 腾讯云用户可以[免费领取礼包](https://www.qcloud.com/act/event/yingyonghao.html#section-voucher),体验腾讯云小程序解决方案。
> * 镜像已包含「剪刀石头布」和「小相册」两个小程序的服务器环境与代码,需要体验两个小程序的朋友无需重复部署
### 3. 配置 HTTPS
在 `/etc/nginx/conf.d` 下修改配置中的域名、证书、私钥。
![证书 Nginx 配置](http://easyimage-10028115.file.myqcloud.com/internal/agfty0fn.gfi.jpg)
配置完成后,即可启动 nginx。
```sh
nginx
```
### 4. 域名解析
我们还需要添加域名记录解析到我们的云服务器上,这样才可以使用域名进行 HTTPS 服务。
在腾讯云注册的域名,可以直接使用[云解析控制台](https://console.qcloud.com/cns/domains)来添加主机记录,直接选择上面购买的 CVM。
![添加域名解析](http://easyimage-10028115.file.myqcloud.com/internal/uw25hdj2.k1u.jpg)
解析生效后,我们在浏览器使用域名就可以进行 HTTPS 访问。
![HTTPS 访问效果图](http://easyimage-10028115.file.myqcloud.com/internal/bxfkmjea.g41.jpg)
### 5. 启动 WebSocket 服务
在镜像的 nginx 配置中(`/etc/nginx/conf.d`),已经把 `/applet/websocket` 的请求转发到 `http://127.0.0.1:9595` 处理。我们需要把 Node 实现的 WebSocket 服务在这个端口里运行起来。
进入镜像中源码位置:
```bash
cd /data/release/qcloud-applet-websocket
```
使用 `pm2` 启动服务:
```bash
pm2 start process.json
```
![启动效果](http://easyimage-10028115.file.myqcloud.com/internal/1fdg1alb.1gq.jpg)
> 如果不是使用腾讯云的镜像,还需要把源码编译成 js
> * 使用 `npm install typescript -g` 安装 [TypeScript](http://www.typescriptlang.org/)
> * 在源码目录使用 `tsc` 进行编译
### 6. 启动微信小程序
在微信开发者工具中修改小程序源码中的 `config.js` 配置,把通讯域名修改成上面申请的域名。完成后点击调试即可连接到 WebSocket 服务进行游戏。
![修改通信域名](http://easyimage-10028115.file.myqcloud.com/internal/pmbcwr2k.mj0.jpg)
配置完成后,运行小程序就可以看到成功搭建的提示!
![成功搭建微信小程序](http://easyimage-10028115.file.myqcloud.com/internal/sslzo4ip.xvh.jpg)
## 为什么要用 WebSocket
使用传统的 HTTP 轮询或者长连接的方式也可以实现类似服务器推送的效果,但是这类方式都存在资源消耗过大或推送延迟等问题。而 WebSocket 直接使用 TCP 连接保持全双工的传输,可以有效地减少连接的建立,实现真正的服务器通信,对于有低延迟有要求的应用是一个很好的选择。
目前浏览器对 WebSocket 的支持程度已经很好,加上微信小程序的平台支持,这种可以极大提高客户端体验的通信方式将会变得更加主流。
Server 端需要实现 WebSocket 协议,才能支持微信小程序的 WebSocket 请求。鉴于 [SocketIO](http://socket.io/) 被广泛使用,剪刀石头布的小程序,我们选用了比较著名的 [SocketIO](http://socket.io/) 作为服务端的实现。
Socket IO 的使用比较简单,仅需几行代码就可启动服务。
```js
export class Server {
init(path: string) {
/** Port that server listen on */
this.port = process.env.PORT;
/** HTTP Server instance for both express and socket io */
this.http = http.createServer();
/** Socket io instance */
this.io = SocketIO(this.http, { path });
/** Handle incomming connection */
this.io.on("connection", socket => {
// handle connection
});
}
start() {
this.http.listen(this.port);
console.log(`---- server started. listen : ${this.port} ----`);
}
}
const server = new Server();
server.init("/applet/ws/socket.io");
server.start();
```
但是,SocketIO 和一些其它的服务器端实现,都有其配套的客户端来完成上层协议的编码解码。但是由于微信的限制(不能使用 window 等对象), SocketIO 的客户端代码在微信小程序平台上是无法运行的。
经过对 SocketIO 通信进行抓包以及研究其客户端源码,笔者封装了一个大约 100 行适用于微信小程序平台的 `WxSocketIO` 类,可以帮助开发者快速使用 SocketIO 来进行 WebSocket 通信。
```js
const socket = new WxSocketIO();
socket.on('hi', packet => console.log('server say hi: ' + packet.message));
socket.emit('hello', { from: 'techird' });
```
如果想要使用微信原生的 API,那么在服务器端也可以直接使用 [ws](https://github.com/websockets/ws) 来实现 W3C 标准的接口。不过 SocketIO 支持多进程的特性,对于后续做横向�
没有合适的资源?快使用搜索试试~ 我知道了~
130个微信小程序源码(上).zip
共2000个文件
png:1057个
js:622个
wxss:489个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 1 下载量 179 浏览量
2023-06-24
15:36:06
上传
评论
收藏 100.78MB ZIP 举报
温馨提示
130个源码小程序,微信小程序,完整项目,源代码,小程序 .idea-AppleMusic-B站首页界面设计:附详细教程-cnode社区版-dribbble-FlexLayout布局-gank-HIapp-IT-EBOOK-leantodu-list.txt-LOL战绩查询-movecss效果-Railay:整体框架-redux绑定-TCP,IP长连接-todolist-v2ex-一个(仿)-一元夺宝主页设计-万年历-下拉刷新,tab切换-东航订机票-事项助手-二维码生成器-云笔记-五十音图-五险一金计算-交互操作控件-人脸检测-今日头条-仿微信DEMO-仿找事吧-仿网易云音乐-会议精灵-你画我猜-侧滑布局-健康菜谱-全屏动画滚动-分答小程序-创客+实现大量功能,推荐研究-剪刀石头布-医药网-卡卡汽车获取用户设备信息-同乐居商城:购物车合算-商城-图书管理系统-图文信息;欢迎页面,音乐控制-图片自适应,富文本解析-圆形菜单-城市切换-备忘录-外卖:实现类似锚点功能-大转盘-天气预报-妈妈课堂-家居电商-富文本解析,折线图,MD5,bluebird-小游戏-别踩白块-小熊的日记-小程序
资源推荐
资源详情
资源评论
收起资源包目录
130个微信小程序源码(上).zip (2000个子文件)
20161115163622331 852KB
.babelrc 113B
.carsjson 49B
weui.css 240KB
weui.min.css 46KB
.DS_Store 14KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.editorconfig 99B
3123.gif 5.04MB
1.gif 5.04MB
weapp.gif 4.75MB
weapp.gif 4.75MB
demo2.gif 3.95MB
demo2.gif 3.95MB
GIF.gif 2.9MB
GIF.gif 2.9MB
demo.gif 2.72MB
1.gif 2.51MB
wechat-v2ex-2.gif 2.18MB
wechat-v2ex-2.gif 2.18MB
preview (1).gif 1.85MB
preview.gif 1.85MB
wechat-v2ex-1.gif 1.83MB
wechat-v2ex-1.gif 1.83MB
GIF_2.gif 1.61MB
GIF_2.gif 1.61MB
remote-redux-devtools.gif 1.28MB
remote-redux-devtools.gif 1.28MB
lolgame.gif 1.1MB
lolgame.gif 1.1MB
swipertab.GIF 1.07MB
swipertab.GIF 1.07MB
preview.gif 1005KB
preview.gif 1005KB
1.gif 944KB
demo_v0.2.gif 891KB
demo_v0.2.gif 891KB
GIF_3.gif 887KB
GIF_3.gif 887KB
screenshot.gif 751KB
screenshot.gif 751KB
view.gif 684KB
view.gif 684KB
fenda1.gif 487KB
fenda1.gif 487KB
lolgame-fuzzy.gif 362KB
lolgame-fuzzy.gif 362KB
1.gif 159KB
1.gif 79KB
2.gif 67KB
loading.gif 46KB
demo.gif 31KB
1.gif 31KB
loading.gif 16KB
loading.gif 16KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
logo.gif 15KB
loading.gif 11KB
checkerbg.gif 73B
.gitattributes 378B
.gitattributes 378B
.gitattributes 378B
.gitattributes 378B
.gitattributes 378B
.gitignore 649B
.gitignore 607B
.gitignore 592B
.gitignore 578B
.gitignore 574B
.gitignore 574B
.gitignore 58B
.gitignore 21B
.gitignore 20B
.gitignore 19B
.gitignore 13B
.gitignore 10B
.gitignore 8B
.gitignore 5B
.gitignore 5B
handler.go 2KB
msg.go 706B
sendUserInfo.go 647B
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
- 无忝所生2023-10-17总算找到了想要的资源,搞定遇到的大问题,赞赞赞!
阿星先森
- 粉丝: 147
- 资源: 1453
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功