uniapp小程序webSocket封装、断线重连、心跳检测

最近在做 IOT 的项目，里面有个小程序要用到 webSocket ，借这个机会，封装了一个 uniapp小程序 适用的 Socket 类，包括断线重连，心跳检测等等，具体实现如下。

直接实例化封装的 socket 类，调用 initSocket 初始化就行了，当收到消息的时候，会触发全局 $emit 事件，只需要使用 $on 监听 message 事件就行。

我这边在 globalData 里面定义了 socketObj 全局变量，在首页 onShow 生命周期里面判断当前是否已经初始化了 socket 实例，再进行 *** 作。

homevue

断线会自动重连。

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；

END

往期文章

个人主页

老规矩，先上效果图

个人对夜间模式这个功能情有独钟

晚上黑灯瞎火的看手机，屏幕亮度就算调到最低依然很是刺眼呀

所以我一直用某浏览器，因为有夜间模式

言归正传，依然是分析功能点

1点击按钮，切换一套css（这个功能很简单）

2把皮肤设置保存到全局变量，在访问其它页面时也能有效果

3把设置保存到本地，退出应用再进来时，依然加载上次设置的皮肤

先从切换开始吧，switch很少用，还是贴一下吧

按钮功能OK了，现在我们去写样式

像这种黑的风格的皮肤，大背景色用#000

小背景用#333，文字用#999吧，我也懒得用取色器了

既然需要一套皮肤，那我们就去文件夹外面写一个样式文件

就新建一个skin目录，下面写一个darkwxss吧

然后呢

我们把普通模式下的wxss复制一份，贴进来

把和颜色有关的属性留下来，其它删除

像background呀，border，color等。。其它统统不要

最后发现就剩这么点了。。

大家发现，我这些样式名称都有dark-box

这个dark-box就是最外面，也是最大的盒子（除了默认的page哈）

my-box是普通模式，dark-box就是夜间模式

当然你也可以在写一个皮肤样式，黄、红、蓝。。。

现在这个写法，我们只用控制变量 skinStyle的值就能改变皮肤样式了

我们还能写个blue-box的皮肤，然后设置变量为skinStyle为blue就行了

还有关键一步，在wxss文件中把这个皮肤文件引入要显示的页面

接下来第二步，这就简单了。。

设置到全局变量嘛，先getApp(),然后传过去就行了

现在在访问其它页面的时候，dark皮肤也会传进去

我只写了一个页面哈，所以只有这个页面会有变化

现在第三步了，保存到localstroge中

完了吗？并没有。。

我们要在程序打开时就获取皮肤设置

所以要在appjs去get与皮肤相关的信息

现在我们设置黑色皮肤，然后退出，进去之后不是黑色

因为我们在页面加载时没设置

现在再来看看

结果按钮的状态是关闭，皮肤却是开着

因为开关重置了

这个就交给大家自己解决啦，启动时判断一下就OK啦

需要源码的话我再上传吧

工具使用教程：

1、网页搜索小程序平台，进入小程序搭建系统，如图1。

2、进入平台右上角点击“注册”按钮，如图2。

3、编辑一个用户名、密码，输入验证码并确认注册协议，如图3。

4、编辑一个小程序名字、录入手机号码和找回密码的邮箱账号，如图4。

5、数字产品类型选择界面，选择小程序，如图5。

6、左侧选择官网或商城，官网为展示型小程序模板。根据行业选择小程序模板，预览模板后，点击选用并点击确认按钮，如图6、图7。

7、点击小程序模板头部区域，d出铅笔图标后，进入编辑框替换logo，该模板logo为透明色，请按照系统提示尺寸进行上传，如图8、图9。

8、鼠标点击首页轮播图，d出铅笔图标后，点击进入编辑框，按照系统提示尺寸，替换如图10、图11和图12。

9、小程序导航数量可以根据实际需求进行增减。如果是商城类小程序，导航分类一般对应产品类型，如图13、图14和图15。

10、上传产品后，鼠标点击商品板块，d出铅笔图标后进去编辑框，设置商品按条件自动调用，该功能配置好以后，新增产品会自动出现在各个对应板块，如图16、图17。

11、首页界面设计完成以后，点击左侧页面、添加栏目按钮继续设计其他页面，比如展示型小程序常用的关于我们、联系我们、品牌特色等页面，在设计过程中，可以从素材、模块里拖拽功能插件到页面里，如图18、图19和图20。

12、到这一步小程序基本设计完成，可以沟通平台协助配置各类系统接口，提交腾讯审核发布。

问题一：微信小程序开发可以实现哪些功能 微信小程序的开发可以实现的功能很多，具体如下：

微信小程序（应用号）就是用户关注了一个应用号，就像安装了一个App一样。这样微信将被打造成一个全新的appstore，而每一个应用号就是一个个的webapp。

怎么理解这个概念？

下载安装 app 太麻烦了，微信的小程序就可以满足你；安装 / 卸载 / 使用小程序，就像关注 / 取关 / 进入公众号一样简单；你用完就可以走，不用担心装个 app 占你空间。

微信小程序（应用号）有几个功能？

1、微信小程序（应用号）能实现对App个性功能的完美支持。这项服务就是将App的独立功能通过微信应用号开放到微信生态里，供微信用户调用；如果有可能的话，未来微信应用号或许能提供一套接入系统，直接实现App功能的复制。

2、微信小程序（应用号）能实现对App开发者、运营者的友好接入，降低二次开发门槛；将有可能对开发者运营者开放更多资源，建立微信开发者生态。

3、赋予微信用户更灵活的功能获取与组合，让用户自己拼凑出一个符合自己使用的超级App。自动脑补一下：以后想要什么功能，在微信应用号里面搜出来，挂到微信上，不需要的就卸载掉。

4、打通微信与其他应用的账号体系，App自己做功能，基于微信做运营。

现在大多数App转到微信里的分享链接都不能直接打开，需要下载App后使用。应用号出来以后可能就不用这么麻烦了，看到朋友圈里谁分享的东西好玩，打开链接功能一键添加，完全不用费力气去跳转安装。

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。以后我们不需要再安装那么多APP了，一个微信，就可以囊括我们生活中几乎所有的应用。

问题二：怎么进行微信小程序开发设计 在进行微信小程序开发之前，你首先需要一个微信小程序账号，才能进行开发设计。

点击公众平台的链接，正登陆和注册之间，选择注册。你会看到有好几个选择，如订阅号、企业号、服务号和小程序，选择小程序点击确定；

小程序注册的前提是，没有注册过任何的微公众平，如未注册过订阅号、服务号之类的。邮箱要求也是“未被公众平台注册，未被开放平台注册，未被个人微信号绑定的邮箱”；

根据自己的信息，进行邮箱的填写和密码的输入。如果邮箱正确就没有错误提示，在明确密码以及重复确认密码之后，输入验证码，勾选协议就可以实现注册；

在点击注册之后，会有一个邮箱的验证，登录邮箱，在收件箱你会看到一个weixinteam的邮件，打开，点击验证链接。

点击验证链接之后，会直接跳转到注册的第三步，信息的登记填写，选择相应的小程序主体类型，可以看到只有四个选项，选择；

主体选择类型之后，可以看到需要类型、名称、营业等。如果是个人的话，可以随便写一下，到时候会验证失败，不影响小程序的测试，直接进行下面管理员信息登记；

在管理员身份认证的时候，需要填写身份z、姓名、手机号、以及手机号验证和微信管理员的身份验证等。

点击确定之后，会d出一个信息确认的消息（一经确定就不能更改的消息）。然后点击确定，就会告诉你信息填写完整，但是审核还未通过，但是可以测试小程序了。

进入主体之后，就可以各种测试、开发小程序了。当然如果上线测试的话，还是需要验证通过才可以。

问题三：微信小程序怎么开发用的是什么开发语言 30分 微 信小程序跟现在做微 信互动游戏一样的呀前端h5后台一般就用php就行了 这两个技术简单，功能上也能满足需求。

问题四：微信小程序的开发语言是什么？ 微信小程序 跟现在做微信互动游戏一样的呀 前端h5 后台一般就用php就行了 这两个技术简单，功能上也能满足需求。

问题五：微信小程序开发类型有哪些 生活服务类的大多都适合

问题六：微信小程序是什么？微信小程序有什么用 微信小程序是一种不需要下载安装即可使用的应用。特点：

它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。

也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。

应用将无处不在，随时可用，但又无需安装卸载。

然而微信应用号要能获取足够多的用户，还得要开发者的支持。毫无疑问，开发者将是微信应用号的最大获益群体。对于开发者而言，应用号可以节省开发成本，并且可以提升研发效率，开发人员只需要研发出一款适用于浏览器应用的产品，就可满足不同 *** 作系统的使用需求。

问题七：微信小程序怎么开发 微信小程序开发教程分享 微信应用号（小程序，「应用号」的新称呼）终于来了！

目前还处于内测阶段，微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子？怎样将一个「服务号」改造成为「小程序」？

我们暂时以一款简单的第三方工具的实例，来演示一下开发过程吧。

序言

开始开发应用号之前，先看看官方公布的「小程序」教程吧！（以下内容来自微信官方公布的「小程序」开发指南）

本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。

1 获取微信小程序的 AppID

首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的帐号，登录 mpweixinqq ，就可以在网站的「设置」-「开发者设置」中，查看到微信小程序的 AppID 了。

注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。那么我们还需要 *** 作「绑定开发者」。即在「用户身份-开发者」模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。

2 创建项目

我们需要通过开发者工具，来完成小程序创建和代码编辑。

开发者工具安装完成后，打开并使用微信扫码登录。选择创建「项目」，填入上文获取到的 AppID，设置一个本地项目的名称（非小程序名称），比如「我的第一个项目」，并选择一个本地的文件夹作为代码存储的目录，点击「新建项目」就可以了。

为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 demo。

项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在「编辑」里可以查看和编辑我们的代码，在「调试」里可以测试代码并模拟小程序在微信客户端效果，在「项目」里可以发送到手机里预览实际效果。

3 编写代码

点击开发者工具左侧导航的「编辑」，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 appjs、appjson、appwxss 这三个。其中，js 后缀的是脚本文件，json 后缀的文件是配置文件，wxss 后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。

appjs 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API，如本例的同步存储及同步读取本地数据。

appjs App({

onLaunch: function () { 调用API从本地缓存中获取数据 var logs = wxgetStorageSync('logs') || []

logsunshift(Datenow())

wxsetStorageSync('logs', logs)

>>

问题八：为什么要做微信小程序开发 服务号无法解决高频使用的问题

按照微信的期待，订阅号本应为用户提供内容，但被玩出了各种营销和电商的花；服务号本应为用户提供各种服务，但真正做起来的服务号却少之又少，你可能听说过不少 VC 投资订阅号，但很少有 VC 投资服务号。

服务号发展得并不好。大多数服务号只是在做替代短信的推送服务和低频服务。

比如，被视作经典案例的招商银行xyk公众号，用户的使用场景以收通知为主，它只不过替代了刷卡短信通知，其它功能很少被用到。

不妨想想我们为什么会 下载 一个产品的 app，而不用它服务号里一模一样的功能：

体验差，HTML 的体验比不上原生、流畅性差

层级多，App 一打开就是服务目录，服务号需要多进至少一层

对网络过于依赖，没有网络，服务号无法使用

对于低频使用的场景，即使体验差、层级多、每次都需要联网，用户是可以忍受的，比如查询xyk额度，这种行为可能每个月只有一两次，即使网页的体验很差，但我们能忍受。

但对于高频使用场景，比如文档编辑，我们每天可能需要使用很多次，这时我们对体验、速度、稳定性显然有更高的要求，服务号和 HTML 并不能完美满足这些要求。

矛盾来了，微信希望第三方用服务号来为用户提供服务，但从功能层面，服务号却只解决了低频服务的需求，高频服务用户依然需要下载 app。

这时，微信需要提供另一种能力，来满足高频服务的需求。

微信想成为唯一的入口

为什么微信非要满足高频服务的需求？

因为商业是贪婪的，商业的最终目的是垄断。

8 亿活跃用户对微信来说是不够的，一天只占用用户 4 个小时对微信来说也是不够的，光提供xyk消费通知对微信来说还是不够的。

微信想要更多，腾讯想要更多。当微信已经是超级入口，它想变成唯一的超级入口，它要占据你更多的时间和使用场景。它可能永远不会做一个 OS，但它希望成为「事实上」的 OS。

小程序是微信成为事实 OS 的必要补充。因为它的诞生是为了满足服务号没有满足好的高频应用场景。

所以，三管齐下，微信希望占据：

更多用户时间

更多应用场景

更多服务入口

订阅号解决阅读需求，服务号满足低频服务需求，小程序定位在高频使用场景。

听起来很恐怖，但恐怕没有人能在短期内阻止微信成为事实 OS。

小程序是一个独立生态

1小程序是微信接下来的重点产品

2无关注，无心理压力

和服务号、订阅号不一样，小程序是没有关注功能的。这意味着，对用户来说，心理成本更小，用户通过搜索进入小程序，马上就可以使用，不像服务号还需要先关注。

3不是 HTML5，也不是 Hybrid

4没有外链

5无法分享到朋友圈

6用微信语言开发的原生程序

7前端开发成本极低

8离线使用与 Websocket 的想象力

9没有游戏，没有直播

10有审核机制

问题九：微信小程序个人适合开发什么产品 指尖小程序认为微信小程序开发比较适合线下有实体店的商家开发，如果个人开发的话，微商这样的商城类的小程序也比较适合。希望采纳哦

问题十：微信小程序开发 使用什么编辑器 小程序开发工具提供 Windows 32 位、Windows 64 位和 Mac 三个版本。可根据实际情况，选择适合自己电脑的开发工具。

微信开发者工具共分成「编辑」、「调试」和「项目」三个部分。

编辑：编辑和修改小程序的代码。

调试：显示小程序代码错误和警告，便于调试代码错误。

项目：用于查看小程序的属性、修改小程序配置，以及提交小程序代码至微信服务器。

制作微信的小程序，需要在微信公众号的首页注册，进入小程序之后填写相关的信息，邮箱要激活，进入邮箱查看微信的激活邮件，点击链接激活，根据选择的主体类型是个人还是企业，准备相关证件，按要求填写信息，完成后补全小程序的信息即可。

制作微信小程序的方法

1、在微信的公众号首页，点击注册，选择注册类型“小程序”。

2、进入小程序，填写相关的信息，邮箱要按照要求来填写，邮箱需要激活，进入您的邮箱后点击激活。

3、进入邮箱之后查看来自微信的激活邮件，点击链接激活账号，当邮箱激活后，页面会跳转到信息登记页面再次填写信息，需选择主体类型。选择个人，根据提示填写内容即可，选择企业，需要准备好营业执照注册号，然后填写内容。

4、点击确定后前往小程序，在完成微信认证之后就可以创建自己的小程序。最后点击填写，补全小程序的基本信息，需要改好小程序的名称、，写好120字以内的简介，完成后发布即可。

如何创建一个微信小程序，这里有个图文版请收下：

1、登陆微信公众平台；

2、选择「立即注册」；

3、选择「小程序」；

4、填写邮箱，按提示在邮箱进行验证；

5、按提示选择主体类型进行注册。

就是这么简单，你学会了吗？注册一个微信小程序，仅仅只需要5分钟

微信小程序是一种不需要下载安装即可使用的应用，用户扫一扫或者搜一下即可打开应用，做一个微信小程序首先需要经过注册及审批，之后再获取开发文档根据规范进行开发就可以了，懂程序的可以依靠开发者工具自行开发，或者外包给专业的小程序制作开发团队。

怎么做一个微信小程序

注册阶段

一、首先你要确定小程序的定位、目的以及文案资料等(准备工作)。

二、打开微信公众平台官网，点击右上角的“立即注册”

三、在“选择注册的类型中”选择“小程序”

四、完善账号信息

五、邮箱激活公众平台账号

六、完善信息登记。

按照流程信息填写完成后则代表认证成功，这时则可以开始创建小程序了

开发阶段

一、登录微信公众平台

就能在菜单“开发”---“基本配置”中看到小程序的AppID了

小程序的 AppID 相当于小程序平台的一个身份z，后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

有了小程序帐号之后，我们需要一个工具来开发小程序。

二、前往“开发者工具”下载页面，安装“开发工具”，开发工具有windows64、windows32、mac三个版本，可根据实际情况，选择适合自己电脑的开发工具。

安装后，就可以直接启动开发者工具了。

三、在小程序管理页面，点击“添加项目”

四、填入申请到的小程序的AppID、项目名称

五、然后点击“选择”，新建一个文件夹作为新的项目目录。再次点击“添加项目”，就可以新建出一个微信小程序项目了。懂程序的可以依靠开发者工具自行开发。但是如果你只是个小白，那你可能就需要专业的小程序制作开发平台来帮你。

六、制作完成的小程序提交到腾讯审核，一般待7-14个工作日审核通过后你就可以拥有自己公司的微信小程序了。

可以使用全局变量，在当前页面对全局变量赋值，新页面当中对变量取值就可以达到这样的效果。

也可以使用localStorage,sessionStorage等先保存数据到本地，在新页面获取本地保存的数据就可以了。

1、注册微信小程序账号

小程序注册账号

这个直接进入微信小程序官网自行注册即可，在此不多赘述。

微信小程序官方

2、获取APPID

获取小程序APPID

APPID在哪里获取呢，根据第一步注册的小程序帐号，然后登陆上，找到左侧“设置”，“开发设置”，就看到APPID啦，把APPID复制下来，留作备用。

3、绑定开发者

如果在第一步注册小程序帐号的时候，你不是管理员，那么这个时候，还需要绑定个开发者，直接登录小程序后台，点左侧“用户身份”-点右侧“编辑”添加成员，出现个二维码，管理员扫描二维码后，然后输入开发者微信号，勾选权限，确定，就可以了。

4、下载微信小程序开发者工具

下载微信小程序开发者工具

直接在微信小程序官方下载即可，根据不同的电脑系统下载对应的版本，安装即可，不多赘述！

5、创建微信小程序项目

打开步骤4中安装好的小程序开发工具，然后用开发者（或者管理员）扫码登录，选择创建“新项目”，填入步骤2获取到的 AppID，设置一个本地项目的名称，并选择一个本地的文件夹作为代码存储的目录，点击「新建项目」就可以了。

微信小程序

6、编写微信小程序代码

编写代码对新手来说有点难度，不过我们可以从微信小程序官方上直接下载代码实例，下载后，直接解压到步骤5代码存储目录内即可。这时我们会发现，有三个后缀的文件，分别为appjs、appjson、appwxss。其中，js 后缀的是脚本文件，json 后缀的文件是配置文件，wxss 后缀的是样式表文件。

接下来喝彩科技工程师赵德志在这里详细给大家说下，它们各自的功能。

appjs 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API，如本例的同步存储及同步读取本地数据。

appjson 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

appwxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 appwxss 中声明的样式规则。

微信小程序开发

7、创建微信小程序页面

微信小程序中的每一个页面的路径 + 页面名都需要写在 appjson 的 pages 中，且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：indexjs、indexwxml、indexwxss、indexjson。js 后缀的文件是脚本文件，json 后缀的文件是配置文件，wxss 后缀的是样式表文件，wxml 后缀的文件是页面结构文件。

微信小程序教程详解

8、手机预览

开发者工具左侧菜单栏选择"项目"，点击"预览"，扫码后即可在微信客户端中体验。

9、上传小程序代码

开发者工具左侧菜单栏选择"项目"，点击"上传"即可将代码上传到微信小程序服务器。

10、提交微信审核及小程序发布

步骤9上传好小程序代码后，提交微信进行审核。审核现在也很快，一把几个小时就审核过了，慢的话估计2-5天吧，等审核通过后，就可以在小程序后台，进行发布上线了。

以上就是关于uniapp小程序webSocket封装、断线重连、心跳检测全部的内容，包括:uniapp小程序webSocket封装、断线重连、心跳检测、小程序皮肤功能——夜间模式、微信小程序怎么开发等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！