不用多说，今天让我们来实现Wechat小程序的前端设计部分。 感兴趣的学生可以继续往下看。
第一步
首先，打开wechat开发人员工具，创建新的工程文件。 在pages文件夹下添加欢迎文件夹。
对这张图有小小的无知
然后，右键单击欢迎文件，选择“新建页面”。 输入welcome名称后，可以直接获得4个文件。
然后，将以下代码分别添加到. wxml和. wxss文件中。
！ ---页/欢迎/欢迎. wxml--
button类=' log in ' bind tap=' log in ' on/button/* pages /欢迎/欢迎. wxss * /
. log in {2}
位置：绝对；
top: 400px；
left: 180rpx；
width: 50%；
颜色：白色；
背景色：绿色；
订单阵列： 100 rpx；
字体大小： 18px；
}
完成后，打开welcome.js页，创建login绑定函数，然后调用wx.connectSocket函数。 请注意IP地址和端口号的写入格式。 url:'ws://(您的IP地址) : (端口号)。
登录：函数() {
//关闭当前页，跳转到APP中的某一页。
wx .连接套接字({ (
URL : ' ws ://190.167.1.14533608090 '，//此处为开发者服务器接口地址
() )
wx.onsocketopen (函数() {
console.log (“服务器端连接成功”
() )
}
02
第一步完成后需要进入调试。 在手机端进行局域网通信时，需要点击实机调试进入控制面板。 接着，在手机的小程序侧点击登录按钮，调试版的结果如下所示。
现在手机微信小程序已连接到web套接字服务器上。 接下来，实现发送接收数据的功能。 只需要调用对应的接口。
wx.sendsocketmessage(//用于发送数据的函数接口
data :阵列
() )
wx.onsocketmessage((result )=) /接收数据函数接口
控制台日志(结果数据) )。
//应实现的功能写在下面
() )
如果你想学习更多，实现更强大的功能，请关注小无知。 下一期再见吧。