1、效果图
先瞅一眼效果图。
2、释义
mDNS:即组播DNS(multicast DNS)，使用5353端口，主要实现了在没有传统DNS服务器的情况下使局域网内的主机实现相互发现和通信。（--百度百科）
这段话什么意思呢？
其实是酱婶的，在客户端和服务端通信过程中（request,socket,websocket,ftp等），我们一般都需要知道对方的域名或者ip/port才能通信。
而在发送请求前，域名最终会经过一个叫DNS服务器的地方解析出相应的ip/port才能通信。
在局域网中，各个设备是没有域名的。此时我们只能通过ip/port来通信，但一般情况下各设备的ip是不固定的，它们是由DHCP分配的，在偶尔的掉线重连之后没准ip就变了，而且你也不知道要连接的设备的ip是多少。
基于此，mDNS登场了，它主要实现了设备间的互相发现。
emmmm，它没有通信功能。通信一般是通过socket来进行。
3、小程序中的mDNS
小程序中的mDNS主要有10个API
其中2个是主动事件，4个监听事件回调和4个取消监听事件回调
他们之间的关系是一一对应的。
而且，除了2个主动事件外，其他8个方法都是传1个回调方法过去
2个主动事件分别是：
1.开始搜寻局域网下的mDNS服务 wx.startLocalServiceDiscovery
2.停止搜索 mDNS 服务 wx.stopLocalSeviceDiscovery
4个监听事件回调分别是：
1.监听mDNS服务发现的事件 wx.onLocalServiceFound
2.监听mDSN服务解析失败的时间 wx.onLocalServiceResolveFail
3.监听mDNS服务离开的事件 wx.onLocalServiceLost
4.监听mDNS 服务停止搜索的事件 wx.onLocalServiceDiscoveryStop
4个取消监听事件回调分别是（目前这4个API无效？不知是否是我调用方式不对。但无所谓，这4个方法就算无效也没什么影响。）
1.取消监听mDNS 服务发现的事件 wx.offLocalServiceFound
2.取消监听mDNS 服务解析失败的事件 wx.offLocalServiceResolveFail
3.取消监听mDNS 服务离开的事件 wx.offLocalServiceLost
4.取消监听mDNS 服务停止搜索的事件 wx.offLocalServiceDiscoveryStop
4、实践
我们实现手动开启和关闭mDNS搜索，并在开启时实现mDNS监听事件的4个方法，在关闭时取消监听mDNS的4个方法。
wxml/wxss就不提，主要js实现如下。
/**
* 开始搜索
*/
startDiscovery:function(){
let that = this
serviceList = []
resolveFailList = []
wx.startLocalServiceDiscovery({
serviceType:'_http._tcp.',
success:function(res){
that.onLocalService()
},
fail:function(err){
console.log(err)
},
complete:function(){
console.log('complete')
}
})
},
/**
* stopDiscovery
*/
stopDiscovery:function(){
let that = this
wx.stopLocalServiceDiscovery({
success: function () {
that.showTips('停止搜索成功','success')
serviceList = []
resolveFailList = []
that.setData({
lists:[],
resolveFailList:[]
})
that.offLocalService()
},
fail: function () {
that.showTips('停止搜索失败，请重试！')
},
complete: function () {
console.log('stopDiscovery complete')
}
})
},
/**
* 提示方法
*/
showTips:function(title='出错啦',icon='none'){
wx.showToast({
title: title,
icon: icon,
duration:2000
})
},
/**
* 监听方法合集
*/
onLocalService:function(){
let that = this
// 监听服务发现事件
wx.onLocalServiceFound(function (obj) {
console.log(obj)
serviceList.push(obj)
that.setData({
lists: serviceList
})
})
// 监听服务解析失败事件
wx.onLocalServiceResolveFail(function (obj){
resolveFailList.push(obj)
that.setData({
resolveFailList: resolveFailList
})
})
// 监听服务离开
wx.onLocalServiceLost(function (obj){
that.showTips('有服务离开啦');
console.log(obj)
})
// 监听搜索停止
wx.onLocalServiceDiscoveryStop(function (obj){
console.log('监听到搜索停止事件')
})
},
/**
* offLocalService
*/
offLocalService: function () {
console.log('是否执行此部分数据')
// 取消监听服务发现事件
wx.offLocalServiceFound(function () {
console.log('取消监听服务发现事件 成功')
})
// 取消监听服务解析失败事件
wx.offLocalServiceResolveFail(function () {
console.log('取消监听 mDNS 服务解析失败的事件 成功')
})
// 取消监听服务离开
wx.offLocalServiceLost(function () {
console.log('取消监听服务离开事件 成功')
})
// 取消监听搜索停止
wx.offLocalServiceDiscoveryStop(function () {
console.log('取消监听 mDNS 服务停止搜索的事件 成功')
})
},
开始搜索 时正确，如下图。
但是随后，每次停止搜索后再次开始搜索时，每个设备会被发现了2次。再停止搜索再开启搜索，会被发现3次。经定位，是取消监听的4个方法无效。（现在是2018-12-17 11：36），如下图。
5、 最佳实践
其实，那4个取消监听的方法就算无效，对我们来说也不是很重要。
上面碰到的问题，无非是多次实现了监听事件而已。基于此，我们至少有2种解决方式。
1、使用statu来判断，不是第一次开启，就不再执行监听事件代码
2、在搜索之前就调用监听事件，开启搜索成功之后不再调用，这样子开启和关闭搜索功能，不和其他方法耦合。
于是，我们改进代码，使用第二种方法来解决这个问题。在onShow()中执行this.onLocalService()，并注释掉开启搜索成功回调里的代码即可。
最后把mdns这部分代码放到了github上。这里
6、其他注意事项
1、mdns只能真机调试
2、主动调用wx.stopLocalSeviceDiscovery()并不会触发wx.onLocalServiceDiscoveryStop事件，该事件在意外停止了搜索时才触发，例如手机屏幕关闭一段时间等。