网络知识 娱乐 【技术创作101训练营】微信小程序开发 - WebSocket

【技术创作101训练营】微信小程序开发 - WebSocket

发布: 2023年2月14日 10:17:50
微信小程序开发-WebSocket.pptx

自我介绍：

Hi，大家好！有能力才有可能，我叫樊能能, 也可以叫我 ‘二能’，我毕业以来一直从事web前端开发，涉及到的有小程序开发，app开发，网页开发等；

前言：

在2017年万众瞩目的微信小程序低调地进入了大众的生活，时到今日已经四年多的时间了，从一开始的无人问津，到现在炙手可热，恨不得每个商家都想分一杯羹。 都知道大量的app应用会占用手机内存使手机没有空间，使手机卡顿；有些app使用的频率很小，有些用户为了手机释放内存就在不断的下载与删除应用；这个问题一直困扰着我们迟迟没能有效的解决。 小程序的出现后，用户不需要再下载安装即可使用的应用，实现了应用“触手可及”的梦想。扫一扫或者搜一下即可打开应用，同时具有出色的使用体验，也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。心里一下舒坦了很多！ 任何一个新出的产品都有着一段艰难曲折的发展历程，从刚开始的基础功能，到最后的不断壮大的功能体系，让用户爱不释手。

本篇文章将要讲的就是关于随着小程序的发展，多人共享功能的实现以及小程序的优化；

目录：

  1. WebSocket的使用
  2. 有助小程序开发的工具
  3. 小程序的优化
  4. 其他平台的小程序

Part 01：WebSocket的使用

使用场景：多人想实现实时同步的功能像位置共享，购物车共享，在线聊天，协同编辑文档，多玩家游戏，股票基金的报价等。 在这种情况下如何实时更新呢？在讲解决实时更新的方案之前，咱们先看下网络协议相关内容吧。

最熟悉的网络协议（应用层）：HTTP协议；其他网络协议（应用层）：HTTPS SMTP MQTT RTMP

问：在输入网站地址时，http://这一部分通常不用输入，系统软件会自动补上，所有网页地址都少不了它，为啥呢？

答：HTTP 是“超文本传输协议（Hypertext Transfer Protocol）”的意思。它用于从WWW服务器传输超文本到本地浏览器的传送协议。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来并展示。但是HTTP有一个的缺陷，它的通信是只能由客户端发起的，服务器无法主动向客户端推送消息。

  • Ajax轮询: 很多人就会想既然服务器不能主动向客户端推送消息，那我们就运用Ajax不断的发送请求获取更新内容，这也就就就就被称为了Ajax轮询，这个实现比较简单但是会造成服务器的压力山大，浪费网络宽带，只能适用于小型应用。
  • 长轮询: 对上述的轮询优化，客户端发送HTTP给服务器之后，有没有新消息，如果没有新消息，就一直等待。弊端也是很明显的也是不适合用客户端过多。
  • WebSocket：为了解决这些问题，html5提供了WebSocket协议它可以让服务器可以主动向客户端推送信息，也可以让客户端也可以主动向服务器发送信息，在此期间只需要浏览器和服务器完成一次握手就可实现全双工通信了。

案例： 微信小程序多人点餐功能，比如三个人点餐，每个人都可以都在小程序中点餐加备注，像‘我’点了一杯可乐，别人的菜单页面上就会提示出‘我’点了杯可乐。‘我’抬头一看气氛有些尴尬又多点了两杯，相应的立刻在菜单中弹出‘我’又点了两杯。最后由一个人下单即可。 那如何在小程序中实现这个功能呢？微信小程序已提供wx.webSocket的api，用法与h5的WebSocket的用法差不多。

⚠️每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信，所以我们要根据自己的业务分别提供request请求域名,uploadfile域名，downloadFile域名，若使用webSocket我们需要提供相应的socket的合法域名。（每个月修改域名的次数是有限制的谨慎修改！）

  1. 首先我们要创建一个WebSocket 连接与监听连接是否打开。
wx.connectSocket({
  url: 'wss://地址......'
});
//这里的wss://指的是安全链接，加密版，ws://就没有这么安全，他俩的区别就类似http与https的之间的差别。

wx.onSocketOpen(res => {
console.log('WebSocket连接已打开！')
})
  1. 然后发送数据与监听消息的事件
wx.sendSocketMessage(data);

wx.onSocketMessage(res => {
console.log('服务器返回的数据:', res);
  // 判断服务器返回的内容
  // 1.服务器询问客户端是谁？将自己的用户信息，店铺信息, 桌号信息发送服务器
  // 2.登陆成功后的心跳检测，断线重连
  // 3.不同场景的提示，加菜，减菜，有用户加入购物车
})
  1. 最后关闭连接与监听关闭的事件
wx.closeSocket()；

wx.onSocketClose(res => {
console.log('WebSocket 已关闭！')
})

Part 02：有助于开发的微信小程序（开发必爱）

  • 小程序示例 对刚接触小程序开发的朋友非常友好，能够很直观的了解到小程序的开发功能等；
    • 组件：其中有很多组件的示例，例如：swiper，表单，导航等很直观的看到组件的功能与良好的使用感受；
    • 扩展能力： 有很多扩展的功能，左滑删除现成功能等，让开发不在从头开始，插件使我快乐！哦耶！
    • 接口：微信登陆，用户信息，位置信息，发票抬头，客服消息，这些都非常常用；只有用不到，想要的都有！（这个发票抬头在用户体验中太好了，真真的，只需输一次保存在微信发票助手小程序中,之后别的小程序可以通过接口获取到微信发票助手小程序的信息，不需重复输入同一个公司的信息）
    • 云开发：云函数，数据库，存储等
    • 等等
  • 小程序数据助手 能够很清晰的看到小程序使用的数据统计
    • 基础数据: 访问分析，实时统计，用户统计
    • 支付数据：交易的数据统计
    • 我的账号：问题反馈，优化建议；
    • 等等
  • 小程序助手 小程序的管理不在复杂，无需在浏览器中微信众平台登陆，所有相关自己的开发小程序都在小程序助手中。
    • 可以版本查看，（体验版，开发版）
    • 成员管理（新增成员），如果有最大开发者权限，管理成员非常方便，一个手机便可搞定，不用在账号登陆登陆登陆不停的登陆，也不用在找管理员扫码扫码扫码不停的扫码，太太友好了。
    • 审核管理（线上版，审核版，开发版）
    • 等等

Part 03：小程序的优化

已经有很久没写小程序了，还记得在2019年微信小程序推出了小程序的体验评分，其中包括性能评分，体验评分，最佳实践。有效地让我们开发提高了代码调用的规范性，对小程序体验的重视。

  • 性能注意的点（举了两点）
    1. 在性能评分中应避免频繁调用setData接口，每一次调用界面就会渲染一次，能够一次性调用的就合起来，减少队列阻塞，让界面渲染更流畅。
    2. WXML节点数的尽量少
  • 体验注意的点（举了两点）
    1. 在安卓下默认有惯性滚动，而在 iOS 下需要额外设置-webkit-overflow-scrolling: touch的样式
    2. iPhone X 兼容** 对于position: fixed的可交互组件，如果渲染在iPhone X的安全区域外，容易误触 Home Indicator，应当把可交互的部分都渲染到安全区域内。
建议使用以下wxss进行兼容
padding-bottom: constant(safe-area-inset-bottom); 
padding-bottom: env(safe-area-inset-bottom);
  • 最佳实践，只要页面中出现了js报错，评分一定低? 要想总分高，只能慢慢优化了。

Part 04：其他平台的小程序

小程序这么火，这么方便，很多平台也陆续出了自己的小程序，支付宝小程序，字节跳动小程序，百度小程序，360小程序（主要是在pc端360浏览器中的小程序）。** **这些小程序带给我们了方便与机遇，开发的过程中组件，接口等方法很类似，其中只要是开发了一款小程序，可以通过平台提供的接口转成为本平台的小程序，但是会有一些不兼容的问题需要处理（实际操作中可能会很麻烦）；目前知道uniapp开发，若有好用的支持多平台的小程序开发可以留言哦！

结束

文章到此结束，希望对大家有所帮助。在互联网的飞速发展的环境中希望能够与大家共勉，跟上技术的潮流，谢谢大家！

相关文章