微信小程序模板

微信小程序示例 - 剪刀石头布

=====================

> 没事打开小程序,和附近的人剪刀石头布,想来就来,想走就走。谁能成为武林高手?!

微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 ,在这个平台上面的想象空间很大。

腾讯云拿到了小程序内测资格,研究了一番之后,发现微信支持 还是很值得玩味的。这个特性意味着我们可以做一些实时同步或者协作的小程序。

这篇文章分享一个简单的剪刀石头布的小游戏的制作,希望能对想要在小程序中使用 的者有帮助。

![运行截图](.)

整个游戏非常简单,连接到服务器后自动匹配在线玩家(没有则分配一个机器人),然后两人进行剪刀石头布的对抗游戏。当对方进行拳头选择的时候,头像会旋转,这个过程使用 会变得简单快速。

## 部署和运行

拿到了本小程序源码的朋友可以尝试自己运行起来。

### 整体架构

![整体架构]()

小程序的架构非常简单,这里有两条网络同步,一条是 通路,用于常规请求。对于 请求,会先走 后再切换协议到 的 连接,从而实现全双工通信。

### 1. 准备域名和证书

微信小程序中,所有的网路请求受到严格限制,不满足条件的域名和协议无法请求,具体包括:

只允许和在 中配置好的域名进行通信,如果还没有域名,需要注册一个。

网络请求必须走 协议,所以你还需要为你的域名申请一个 证书。

> 腾讯云提供[域名注册]()和[证书申请]()服务,还没有域名或者证书的可以去使用

域名注册好之后,可以登录[微信公众平台]()配置通信域名了。

![配置通信域名]()

### 2. 和 代码部署

本示例长连接服务要运行,需要进行以下几步:

部署 , 的安装和部署请大家自行搜索(注意需要把 模块也编译进去)

配置 反向代理到 `

运行环境,可以安装 [ 6.6.0]()

部署 `` 目录的代码到服务器上,如 `///--`

使用 ` ` 安装依赖模块

使用 ` 2 -` 安装 2

> 上述环境配置比较麻烦,剪刀石头布的服务器运行代码和配置已经打包成[腾讯云 镜像](),推荐大家直接使用。

> 镜像部署完成之后,云主机上就有运行 服务的基本环境、代码和配置了。

> 腾讯云用户可以[免费礼包](),体验腾讯云小程序解决方案。

> 镜像已包含「剪刀石头布」和「小相册」两个小程序的服务器环境与代码,需要体验两个小程序的朋友无需重复部署

### 3. 配置

在 `///.` 下修改配置中的域名、证书、私钥。

![证书 配置]()

配置完成后,即可启动 。

```

```

### 4. 域名解析

我们还需要添加域名记录解析到我们的云服务器上,这样才可以使用域名进行 服务。

在腾讯云注册的域名,可以直接使用[云解析控制台]()来添加主机记录,直接选择上面购买的 。

![添加域名解析]()

解析生效后,我们在浏览器使用域名就可以进行 访问。

![ 访问效果图]()

### 5. 启动 服务

在镜像的 配置中(`///.`),已经把 `//` 的请求转发到 ` 处理。我们需要把 实现的 服务在这个端口里运行起来。

进入镜像中源码位置:

```

///--

```

使用 `2` 启动服务:

```

2 .

```

![启动效果]()

> 如果不是使用腾讯云的镜像,还需要把源码编译成

> 使用 ` -` 安装 []()

> 在源码目录使用 `` 进行编译

### 6. 启动微信小程序

在微信者工具中修改小程序源码中的 `.` 配置,把通讯域名修改成上面申请的域名。完成后点击调试即可连接到 服务进行游戏。

![修改通信域名]()

配置完成后,运行小程序就可以看到成功搭建的提示!

![成功搭建微信小程序]()

## 为什么要用

使用传统的 轮询或者长连接的方式也可以实现类似服务器推送的效果,但是这类方式都存在资源消耗过大或推送延迟等问题。而 直接使用 连接保持全双工的传输,可以有效地减少连接的建立,实现真正的服务器通信,对于有低延迟有要求的应用是一个很好的选择。

目前浏览器对 的支持程度已经很好,加上微信小程序的平台支持,这种可以极大提高客户端体验的通信方式将会变得更加主流。

端需要实现 协议,才能支持微信小程序的 请求。鉴于 []() 被广泛使用,剪刀石头布的小程序,我们选用了比较著名的 []() 作为服务端的实现。

的使用比较简单,仅需几行代码就可启动服务。

```

{

(: ) {

/ /

. = ..;

/ /

. = .();

/ /

. = (., { });

/ /

..("", => {

//

});

}

() {

..(.);

.(`---- . : ${.} ----`);

}

}

= ();

.("///.");

.();

```

但是, 和一些其它的服务器端实现,都有其配套的客户端来完成上层协议的编码解码。但是由于微信的限制(不能使用 等对象), 的客户端代码在微信小程序平台上是无法运行的。

经过对 通信进行抓包以及研究其客户端源码,笔者封装了一个大约 100 行适用于微信小程序平台的 `` 类,可以帮助者快速使用 来进行 通信。

```

= ();

.('', => .(' : ' + .));

.('', { : '' });

```

如果想要使用微信原生的 ,那么在服务器端也可以直接使用 []() 来实现 3 标准的接口。不过 支持多进程的特性,对于后续做横向�

© 版权声明
THE END
分享