HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

真是可惜呀:DCloud开发者开放平台仅支持企业实名认证

真是可惜呀:DCloud开发者开放平台仅支持企业实名认证呢!

真是可惜呀:DCloud开发者开放平台仅支持企业实名认证呢!

使用openLocation,iOS端APP高德地图白屏的解决方法(离线打包)

空白 高德地图

搜到了这个问题https://ask.dcloud.net.cn/question/113870,发现跟他的情况一样,特来分享一下。

我是用IOS离线真机调试的,Xcode下报错。
[JS Framework] 当前运行的基座不包含原生插件[mapSearch],请在manifest中配置该插件,重新制作包括该原生插件的自定义运行基座

我就纳闷了,明明只用了一个openLocation,不涉及nvue啊。
于是,使用官方的云打包试了一下,发现没有问题。

怀疑是基座问题,用了hello-uniapp-master测试了一下openLocation,发现也有这个问题。
没办法,只有一步一步排查。

我一想,安卓下没这个问题,但是IOS下,缺调用了mapSearch。
我尝试把高德地图nvue的几个类库放进去,主要是多了libDCUniMap.a、libDCUniAmap.a

这时,奇迹般地发现报错改了。
[NetworkInfo] Could not successfully update network info for descriptor
网络没权限?百度了一下,把debug改成了false。

继续测试,又报一个错误,也看不懂,但是看了一下Xcode的报错,发现调用了百度地图,DCMap
我在想,明明只引用了一个高德地图,怎么会去调百度呢。

这时看了一下类库,有一个libDCUniBmap.a,搜了一下,竟然搜不到,看名字像百度的,果断删除。
最后把plist里面,LSApplicationQueriesSchemes里面跟baidu有关的都删除。

最后,IOS下地图显示出来了。

综上,发现bug的源泉,在于IOS下面使用高德地图,必须引用nvue那几个类库。

还有问题的话,可以加我QQ:13040交流~~

继续阅读 »

搜到了这个问题https://ask.dcloud.net.cn/question/113870,发现跟他的情况一样,特来分享一下。

我是用IOS离线真机调试的,Xcode下报错。
[JS Framework] 当前运行的基座不包含原生插件[mapSearch],请在manifest中配置该插件,重新制作包括该原生插件的自定义运行基座

我就纳闷了,明明只用了一个openLocation,不涉及nvue啊。
于是,使用官方的云打包试了一下,发现没有问题。

怀疑是基座问题,用了hello-uniapp-master测试了一下openLocation,发现也有这个问题。
没办法,只有一步一步排查。

我一想,安卓下没这个问题,但是IOS下,缺调用了mapSearch。
我尝试把高德地图nvue的几个类库放进去,主要是多了libDCUniMap.a、libDCUniAmap.a

这时,奇迹般地发现报错改了。
[NetworkInfo] Could not successfully update network info for descriptor
网络没权限?百度了一下,把debug改成了false。

继续测试,又报一个错误,也看不懂,但是看了一下Xcode的报错,发现调用了百度地图,DCMap
我在想,明明只引用了一个高德地图,怎么会去调百度呢。

这时看了一下类库,有一个libDCUniBmap.a,搜了一下,竟然搜不到,看名字像百度的,果断删除。
最后把plist里面,LSApplicationQueriesSchemes里面跟baidu有关的都删除。

最后,IOS下地图显示出来了。

综上,发现bug的源泉,在于IOS下面使用高德地图,必须引用nvue那几个类库。

还有问题的话,可以加我QQ:13040交流~~

收起阅读 »

占位

uni_ad

占位

占位

uni-app动态修改原生导航栏背景颜色属性样式教程

导航栏 导航栏组件 uniapp 教程 uniapp

uni-app动态修改原生导航栏背景颜色属性样式教程:

代码如下:

uni.setNavigationBarColor({  
    frontColor: '#ffffff',  
    backgroundColor: '#15750a',  
    animation: {  
        duration: 400,  
        timingFunc: 'easeIn'  
        }  
})
继续阅读 »

uni-app动态修改原生导航栏背景颜色属性样式教程:

代码如下:

uni.setNavigationBarColor({  
    frontColor: '#ffffff',  
    backgroundColor: '#15750a',  
    animation: {  
        duration: 400,  
        timingFunc: 'easeIn'  
        }  
})
收起阅读 »

uni-app动态隐藏底部tabbar栏教程

tabbar uniapp 教程 uniapp

uni-app动态隐藏底部tabbar栏教程:

代码如下:

uni.hideTabBar();

uni-app动态隐藏底部tabbar栏教程:

代码如下:

uni.hideTabBar();

uni-app动态隐藏导航栏按钮button教程

uniapp uniapp 教程 导航栏 导航栏组件

uni-app动态隐藏导航栏按钮button教程:

代码如下:

var webView = this.$mp.page.$getAppWebview();  
webView.setTitleNViewButtonStyle(0,{  
    width: '0'  
});  
webView.setTitleNViewButtonStyle(1,{  
    width: '0'  
});
继续阅读 »

uni-app动态隐藏导航栏按钮button教程:

代码如下:

var webView = this.$mp.page.$getAppWebview();  
webView.setTitleNViewButtonStyle(0,{  
    width: '0'  
});  
webView.setTitleNViewButtonStyle(1,{  
    width: '0'  
});
收起阅读 »

uni-app动态隐藏原生导航栏教程

导航栏 导航栏组件 uniapp 教程 uniapp

前几天碰到这个问题,记录一下:

var webView = this.$mp.page.$getAppWebview();  
let titleNView = webView.getTitleNView();  
titleNView && titleNView.hide();

代码如上所述。

继续阅读 »

前几天碰到这个问题,记录一下:

var webView = this.$mp.page.$getAppWebview();  
let titleNView = webView.getTitleNView();  
titleNView && titleNView.hide();

代码如上所述。

收起阅读 »

开发个“码假”演示App,结果惨了!

法律科普

新华社北京1月14日电(记者王任远 高洁 杨侠)在冬季疫情反弹和各地防控措施的升级的背景下,一起涉疫网络违法案件引起舆论哗然。有网友在某应用商店上发现了一款名为“健康码演示”的App,能够根据用户需要模拟各地健康码、复工码、通行码。这样一款App,无疑给举国上下努力构筑的防疫阵线带来巨大的隐患。

针对该案件,新华社记者展开追踪,并采访了相关学者和法律专家。

网友揭露“李鬼”版健康码 嫌疑人已被警方控制

11日,一名数码博主在新浪微博称,某应用商店上出现了一款名为“健康码演示”的App,能够按用户需求模拟各地健康码、复工码、通行码。不仅能显示红码、橙码、黄码、绿码状态,还能自定义显示省份、城市、姓名等信息,简直是一款通行天下的神器。

记者注意到,该App在简介上写道:“该应用仅作为演示目的,二维码并非实际健康码/复工码/通行码,请勿用于被扫描的场合,以免引起不必要的误会”。然而,某应用商店显示,该App下载次数已超过1000次。12日,该App从应用商店中消失。记者在“天眼查”中试图搜索该App显示的开发者信息,发现疑似并无该工商登记主体。

13日晚,杭州警方发布消息:解某某,男,41岁,于2020年4、5月份擅自研发“健康码演示”App并上传至应用市场,严重扰乱了社会秩序。记者从杭州警方获悉,目前解某某已被西湖区公安分局采取刑事强制措施,案件在进一步侦办中。

假健康码App开发者和使用者可能面临什么后果?

“疫情暴发以来,各地分别以行政法规、规章方式出台了各项疫情防控措施,开发此App者实际为不配合防控措施的人提供了必要帮助,对于疫情防控措施起到极大干扰,监管部门应当对其进行阻止和必要处罚。”北京天洛律师事务所黄立斌律师说。

健康码诞生以来,疫情防控部门与企图蒙混过关者之间的“斗智斗勇”就从未停过。早先,有人使用他人的绿码图片蒙混过关,于是健康码迅速在页面增加了姓名、身份证号等信息显示;有人用之前的绿码截图来欺骗检查人员,健康码又将页面升级成动态计时效果。 这次,不法软件商干脆做了一个假健康码App,这个如果真流行起来,会造成更大的防疫漏洞。

黄立斌认为,该App开发者解某某的行为构成《互联网信息服务管理办法》所列的“制作、复制、发布、传播含有法律、行政法规禁止的其他内容的信息”。“即便是App简介中标明‘请勿用于扫描场合使用’,也不能作为免责声明。”

黄立斌提醒公众,如使用该App作为健康码通行,将构成拒不配合防控措施的行为。如果使用者后期被确诊,根据《最高人民法院、最高人民检察院关于办理妨害预防,控制突发传染病疫情等灾害的刑事案件具体应用法律若干问题的解释》的相关规定,其行为就可能构成以危险方法危害公共安全罪,而App开发者属于为违法者提供帮助,属于刑事共犯。

假健康码App案件敲响了什么警钟?

“健康码App属于一种数字产品,立法部门宜根据现实发展,抓紧研究,建立完善数字服务相关法律法规。”北京工商大学国际经管学院副教授张运来说。

张运来表示,该事件反映出互联网行业的立法和监管还存在一定空白地带,为防疫管控增添了隐患,也有损政府提供的健康码查询系统的公信力。他建议,监管部门应追究App开发主体侵犯政府公信力、生产假冒伪劣产品的责任,以及应用商店审核不严以及销售虚假产品责任。

“疫情发生以来,为保证复工复产,政府和互联网企业共同开发了健康码产品,主要行使的是公共职能,但部分企业仍以流量视角看待公共防疫产品,想要蹭热度挣钱,必然踩红线违法。”黄立斌说。

黄立斌建议,对于包含必要公共服务职能的领域,还需要进一步细化立法和监管。目前传染病防控体系相关立法工作已经在进一步推进,而互联网监管上有关疫情防控的立法还有待进一步细化。另外,作为公民,应该从正规渠道关注疫情信息、配合防疫措施,不可心存侥幸。 作为开发者,对于任何涉嫌违法的事件,都要保持一颗敬畏的心。

中国社科院企业社会责任研究中心主任钟宏武建议,立法机构和监管部门要与时俱进,关注新技术、新议题中的违法违规问题,做到迅速反应,坚决遏制。新华社记者将持续追踪该案件进展。

此文章转载自新华社,如有不当联系删除。原文链接

继续阅读 »

新华社北京1月14日电(记者王任远 高洁 杨侠)在冬季疫情反弹和各地防控措施的升级的背景下,一起涉疫网络违法案件引起舆论哗然。有网友在某应用商店上发现了一款名为“健康码演示”的App,能够根据用户需要模拟各地健康码、复工码、通行码。这样一款App,无疑给举国上下努力构筑的防疫阵线带来巨大的隐患。

针对该案件,新华社记者展开追踪,并采访了相关学者和法律专家。

网友揭露“李鬼”版健康码 嫌疑人已被警方控制

11日,一名数码博主在新浪微博称,某应用商店上出现了一款名为“健康码演示”的App,能够按用户需求模拟各地健康码、复工码、通行码。不仅能显示红码、橙码、黄码、绿码状态,还能自定义显示省份、城市、姓名等信息,简直是一款通行天下的神器。

记者注意到,该App在简介上写道:“该应用仅作为演示目的,二维码并非实际健康码/复工码/通行码,请勿用于被扫描的场合,以免引起不必要的误会”。然而,某应用商店显示,该App下载次数已超过1000次。12日,该App从应用商店中消失。记者在“天眼查”中试图搜索该App显示的开发者信息,发现疑似并无该工商登记主体。

13日晚,杭州警方发布消息:解某某,男,41岁,于2020年4、5月份擅自研发“健康码演示”App并上传至应用市场,严重扰乱了社会秩序。记者从杭州警方获悉,目前解某某已被西湖区公安分局采取刑事强制措施,案件在进一步侦办中。

假健康码App开发者和使用者可能面临什么后果?

“疫情暴发以来,各地分别以行政法规、规章方式出台了各项疫情防控措施,开发此App者实际为不配合防控措施的人提供了必要帮助,对于疫情防控措施起到极大干扰,监管部门应当对其进行阻止和必要处罚。”北京天洛律师事务所黄立斌律师说。

健康码诞生以来,疫情防控部门与企图蒙混过关者之间的“斗智斗勇”就从未停过。早先,有人使用他人的绿码图片蒙混过关,于是健康码迅速在页面增加了姓名、身份证号等信息显示;有人用之前的绿码截图来欺骗检查人员,健康码又将页面升级成动态计时效果。 这次,不法软件商干脆做了一个假健康码App,这个如果真流行起来,会造成更大的防疫漏洞。

黄立斌认为,该App开发者解某某的行为构成《互联网信息服务管理办法》所列的“制作、复制、发布、传播含有法律、行政法规禁止的其他内容的信息”。“即便是App简介中标明‘请勿用于扫描场合使用’,也不能作为免责声明。”

黄立斌提醒公众,如使用该App作为健康码通行,将构成拒不配合防控措施的行为。如果使用者后期被确诊,根据《最高人民法院、最高人民检察院关于办理妨害预防,控制突发传染病疫情等灾害的刑事案件具体应用法律若干问题的解释》的相关规定,其行为就可能构成以危险方法危害公共安全罪,而App开发者属于为违法者提供帮助,属于刑事共犯。

假健康码App案件敲响了什么警钟?

“健康码App属于一种数字产品,立法部门宜根据现实发展,抓紧研究,建立完善数字服务相关法律法规。”北京工商大学国际经管学院副教授张运来说。

张运来表示,该事件反映出互联网行业的立法和监管还存在一定空白地带,为防疫管控增添了隐患,也有损政府提供的健康码查询系统的公信力。他建议,监管部门应追究App开发主体侵犯政府公信力、生产假冒伪劣产品的责任,以及应用商店审核不严以及销售虚假产品责任。

“疫情发生以来,为保证复工复产,政府和互联网企业共同开发了健康码产品,主要行使的是公共职能,但部分企业仍以流量视角看待公共防疫产品,想要蹭热度挣钱,必然踩红线违法。”黄立斌说。

黄立斌建议,对于包含必要公共服务职能的领域,还需要进一步细化立法和监管。目前传染病防控体系相关立法工作已经在进一步推进,而互联网监管上有关疫情防控的立法还有待进一步细化。另外,作为公民,应该从正规渠道关注疫情信息、配合防疫措施,不可心存侥幸。 作为开发者,对于任何涉嫌违法的事件,都要保持一颗敬畏的心。

中国社科院企业社会责任研究中心主任钟宏武建议,立法机构和监管部门要与时俱进,关注新技术、新议题中的违法违规问题,做到迅速反应,坚决遏制。新华社记者将持续追踪该案件进展。

此文章转载自新华社,如有不当联系删除。原文链接

收起阅读 »

【IOS】iphone 6,iphone 6s, iphone 6p页面白屏,嵌套scroll-view异常

iOS 白屏 uniapp

最近开发uniapp时发现,发现页面在iphone6,6s,6p,iphoneX上出现白屏,其余设备均正常,且其余页面正常。最初怀疑是内存不足webview被干掉了,但系统仅启动此应用,仍异常。而且此页面并未过多图片。
最后一行行代码删除,发现是由于页面中scroll-view嵌套scroll-view导致的,将最外层的scroll-view改为view正常。特此记录下,希望给后面的人一点借鉴。
最后吐槽下,app兼容真是坑!!!

继续阅读 »

最近开发uniapp时发现,发现页面在iphone6,6s,6p,iphoneX上出现白屏,其余设备均正常,且其余页面正常。最初怀疑是内存不足webview被干掉了,但系统仅启动此应用,仍异常。而且此页面并未过多图片。
最后一行行代码删除,发现是由于页面中scroll-view嵌套scroll-view导致的,将最外层的scroll-view改为view正常。特此记录下,希望给后面的人一点借鉴。
最后吐槽下,app兼容真是坑!!!

收起阅读 »

针对,com.sun.jna.platform.win32.Win32Exception: 系统找不到指定的文件。成功解决方案

2021-01-14 17:08:30 [LanguageServerProcess] com.sun.jna.platform.win32.Win32Exception: 系统找不到指定的文件。
at com.sun.jna.platform.win32.Advapi32Util.registryGetStringValue(Advapi32Util.java:552)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.findCoreLibrary(LibraryFinder.java:345)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.isITunesInstalled(LibraryFinder.java:328)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.getPluginDllPath(LibraryFinder.java:276)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.getPathByITunesVersionAndSystemVersion(LibraryFinder.java:259)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.loadPath(LibraryFinder.java:50)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.getMDLibrary(LibraryFinder.java:116)
at com.pandora.launcher.core.iphone.jna.md.LibraryInstance.getMDLibrary(LibraryInstance.java:15)
at com.pandora.launcher.core.iphone.jna.idevice.win.WinDeviceLibrary.addNotificationHandler(WinDeviceLibrary.java:74)
at com.pandora.launcher.core.iphone.IPhoneLauncher$5.run(IPhoneLauncher.java:829)

针对以上错误。
我一天的时间终于搞定,本人window10 升级HBuilderX 插件时候,强制关闭,导致插件无法安装,小程启动运行,HBuilderX闪退,启动报错(如上)
我的步骤是
1.清除注册表信息

2.删除%appdata% 下HBuilderX 文件夹
3.换为低版本HBuilderX.2.6.5.20200314.full.zip成功,当换为HBuilderX.0.1.25.20180326-alpha.full失败 ,高版本 HBuilderX.3.0.5.20210107.full 失败
运行HBuilderX.2.6.5.20200314.full.zip,成功运行
以上为我的操作,仅为参考

继续阅读 »

2021-01-14 17:08:30 [LanguageServerProcess] com.sun.jna.platform.win32.Win32Exception: 系统找不到指定的文件。
at com.sun.jna.platform.win32.Advapi32Util.registryGetStringValue(Advapi32Util.java:552)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.findCoreLibrary(LibraryFinder.java:345)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.isITunesInstalled(LibraryFinder.java:328)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.getPluginDllPath(LibraryFinder.java:276)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.getPathByITunesVersionAndSystemVersion(LibraryFinder.java:259)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.loadPath(LibraryFinder.java:50)
at com.pandora.launcher.core.iphone.jna.LibraryFinder.getMDLibrary(LibraryFinder.java:116)
at com.pandora.launcher.core.iphone.jna.md.LibraryInstance.getMDLibrary(LibraryInstance.java:15)
at com.pandora.launcher.core.iphone.jna.idevice.win.WinDeviceLibrary.addNotificationHandler(WinDeviceLibrary.java:74)
at com.pandora.launcher.core.iphone.IPhoneLauncher$5.run(IPhoneLauncher.java:829)

针对以上错误。
我一天的时间终于搞定,本人window10 升级HBuilderX 插件时候,强制关闭,导致插件无法安装,小程启动运行,HBuilderX闪退,启动报错(如上)
我的步骤是
1.清除注册表信息

2.删除%appdata% 下HBuilderX 文件夹
3.换为低版本HBuilderX.2.6.5.20200314.full.zip成功,当换为HBuilderX.0.1.25.20180326-alpha.full失败 ,高版本 HBuilderX.3.0.5.20210107.full 失败
运行HBuilderX.2.6.5.20200314.full.zip,成功运行
以上为我的操作,仅为参考

收起阅读 »

uniapp中使用mqtt,支持app,h5,小程序,使用node搭建mqtt本地服务,实现发布,订阅和接收消息

uniapp nodejs

一:本地node搭建MQTT服务器

1 创建文件夹,在文件夹中添加依赖包

mqtt:npm install mqtt --save
mosca:npm install mosca --save

2 创建mqtt.js文件,并添加代码 (mtqq 服务端)

var mosca = require('mosca'); //构建服务器  
// 此处配置mqtt的http客户端,尤为重要,http.port则为你HTTP访问端口,可以在网页上输入127.0.0.1:8888(端口),能请求成功则配置成功  
var MqttServer = new mosca.Server({  
    port: 8083,  
    http: {  
        port: 8888,  
        bundle: true,  
        static: './'  
      }  
});  

//监听链接  
MqttServer.on("clientConnected", function(client) {  
    console.log("client connected", client.id);  
});  

//监听mqtt的主题消息  
MqttServer.on("published", function(packet, client) { //当客户端有连接的时候,发布主题消息  
    var topic = packet.topic;  
    console.log(packet);  
    switch (topic) {  
        case 'test':  
            console.log("message-publish", packet.payload.toString());  
            //mqtt转发主题消息  
            MqttServer.publish({  
                topic: 'other',  
                payload: '这是服务端发过来的消息!'  
            });  
            break;  
    }  
});  

MqttServer.on('ready', function() {  
    console.log("mqtt is running....");  
});

3 创建publish文件,并添加代码 (mqtt 发布者)

var mqtt = require('mqtt');  
var client = mqtt.connect('mqtt://127.0.0.1:8083');//连接到服务端  
var num = 1;  
var qtt = {};//定义消息(可以为字符串,对象等)  

setInterval(function() {  
    qtt.title = 'publish';  
    qtt.text = '这是第'+num+'条测试消息';  
    client.publish('test',JSON.stringify(qtt),{qos:1,retain:true});//hello mqtt +   
    num++  
    console.log("publish 发布了一条内容为text的消息")  
},2000);

4 创建subclient文件,并添加代码 (mqtt 订阅者)

// 接收消息的客户端;  
var mqtt = require('mqtt');  
let options = {  
    clientId:"test-id",  
    connectTimeout: 600000,  
    clean: true  
}  
var client2 = mqtt.connect("mqtt://127.0.0.1:8083",options);  
console.log(client2)  
//订阅主题为test的消息  
client2.subscribe('test',{qos:1},function(err){  
    if(!err) {  
        console.log('订阅主题成功')  
    }else{  
        console.log(err)  
    }  
});  

client2.on('message',function(top,message) {  
    console.log(message.toString());  
});

5 在当前文件夹下打开三个命令窗口,依次运行

node mqtt.js
node publish.js
node subclient.js
ps:遇到 schema 报错需注释掉 /node_modules/jsonschema/lib/validator.js 中的如下代码

if((typeof schema !== 'boolean' && typeof schema !== 'object') || schema === null){  
   throw new SchemaError('Expected `schema` to be an object or boolean');  
}

运行后的效果截图

至此,本地成功搭建mqtt服务端

二:在uniapp中使用mqtt,在H5和app端实现订阅,接收消息

1 创建一个uniapp 默认项目,并引入node依赖

npm install mqtt@3.0.0

2 在组件中发起订阅,订阅方法如下

connect() {  
    var self = this  
    var subscribe = "test"    
    var mqtt = require('mqtt/dist/mqtt.js')  
    // #ifdef H5  
    let options = {  
        clientId:"H5_test",  
        connectTimeout: 600000,  
        clean: true  
    }  
    // 此处的端口为mqtt.js中的http端口,否则H5和手机连接不上mqtt服务器  
    var client = mqtt.connect('ws://127.0.0.1:8888/mqtt',options)  
    // #endif  
    // #ifdef MP-WEIXIN||APP-PLUS  
    let options = {  
        clientId:"APP_test",  
        connectTimeout: 600000,  
        clean: true  
    }  
    // 此处需要改成你的主机ip,并保证测试手机跟你的电脑处于同一个局域网  
    var client = mqtt.connect('wx://xxx.xxx.x.xxx:8888/mqtt',options)  
        // #endif  
    client.on('connect', function(res) {  
        uni.showToast({  
            title:"连接成功",  
            duration:2000,  
            icon:"none"  
        })  

        client.subscribe(subscribe, function(err) {  
            if (!err) {  
                uni.showToast({  
                    title:"订阅成功",  
                    duration:2000,  
                    icon:"none"  
                })  
            }  
        })  
    }).on('message', function(topic, message) {  
        console.log(JSON.parse(message.toString()))  
    }).on('reconnect', function(topic, message) {  
        console.log("重连")  
    })  
}

附上H5和手机端订阅后的效果,需要两个demo的可以留言邮箱

有时没看到消息的话 可去 https://gitee.com/lianzhichao/mqtt-serverandclient/tree/master/rar 下载

本文借鉴猫猫猫猫的mqtt-demo,因为在猫猫发布的篇中参与评论后,许多小伙伴联系我,想要从0开始搭建,使用mqtt,所以写了这篇文章,如果有大佬发现错误或有侵权之处,联系侵删,多有不足之处请原谅,觉得不错麻烦给个赞哦,谢谢各位

继续阅读 »

一:本地node搭建MQTT服务器

1 创建文件夹,在文件夹中添加依赖包

mqtt:npm install mqtt --save
mosca:npm install mosca --save

2 创建mqtt.js文件,并添加代码 (mtqq 服务端)

var mosca = require('mosca'); //构建服务器  
// 此处配置mqtt的http客户端,尤为重要,http.port则为你HTTP访问端口,可以在网页上输入127.0.0.1:8888(端口),能请求成功则配置成功  
var MqttServer = new mosca.Server({  
    port: 8083,  
    http: {  
        port: 8888,  
        bundle: true,  
        static: './'  
      }  
});  

//监听链接  
MqttServer.on("clientConnected", function(client) {  
    console.log("client connected", client.id);  
});  

//监听mqtt的主题消息  
MqttServer.on("published", function(packet, client) { //当客户端有连接的时候,发布主题消息  
    var topic = packet.topic;  
    console.log(packet);  
    switch (topic) {  
        case 'test':  
            console.log("message-publish", packet.payload.toString());  
            //mqtt转发主题消息  
            MqttServer.publish({  
                topic: 'other',  
                payload: '这是服务端发过来的消息!'  
            });  
            break;  
    }  
});  

MqttServer.on('ready', function() {  
    console.log("mqtt is running....");  
});

3 创建publish文件,并添加代码 (mqtt 发布者)

var mqtt = require('mqtt');  
var client = mqtt.connect('mqtt://127.0.0.1:8083');//连接到服务端  
var num = 1;  
var qtt = {};//定义消息(可以为字符串,对象等)  

setInterval(function() {  
    qtt.title = 'publish';  
    qtt.text = '这是第'+num+'条测试消息';  
    client.publish('test',JSON.stringify(qtt),{qos:1,retain:true});//hello mqtt +   
    num++  
    console.log("publish 发布了一条内容为text的消息")  
},2000);

4 创建subclient文件,并添加代码 (mqtt 订阅者)

// 接收消息的客户端;  
var mqtt = require('mqtt');  
let options = {  
    clientId:"test-id",  
    connectTimeout: 600000,  
    clean: true  
}  
var client2 = mqtt.connect("mqtt://127.0.0.1:8083",options);  
console.log(client2)  
//订阅主题为test的消息  
client2.subscribe('test',{qos:1},function(err){  
    if(!err) {  
        console.log('订阅主题成功')  
    }else{  
        console.log(err)  
    }  
});  

client2.on('message',function(top,message) {  
    console.log(message.toString());  
});

5 在当前文件夹下打开三个命令窗口,依次运行

node mqtt.js
node publish.js
node subclient.js
ps:遇到 schema 报错需注释掉 /node_modules/jsonschema/lib/validator.js 中的如下代码

if((typeof schema !== 'boolean' && typeof schema !== 'object') || schema === null){  
   throw new SchemaError('Expected `schema` to be an object or boolean');  
}

运行后的效果截图

至此,本地成功搭建mqtt服务端

二:在uniapp中使用mqtt,在H5和app端实现订阅,接收消息

1 创建一个uniapp 默认项目,并引入node依赖

npm install mqtt@3.0.0

2 在组件中发起订阅,订阅方法如下

connect() {  
    var self = this  
    var subscribe = "test"    
    var mqtt = require('mqtt/dist/mqtt.js')  
    // #ifdef H5  
    let options = {  
        clientId:"H5_test",  
        connectTimeout: 600000,  
        clean: true  
    }  
    // 此处的端口为mqtt.js中的http端口,否则H5和手机连接不上mqtt服务器  
    var client = mqtt.connect('ws://127.0.0.1:8888/mqtt',options)  
    // #endif  
    // #ifdef MP-WEIXIN||APP-PLUS  
    let options = {  
        clientId:"APP_test",  
        connectTimeout: 600000,  
        clean: true  
    }  
    // 此处需要改成你的主机ip,并保证测试手机跟你的电脑处于同一个局域网  
    var client = mqtt.connect('wx://xxx.xxx.x.xxx:8888/mqtt',options)  
        // #endif  
    client.on('connect', function(res) {  
        uni.showToast({  
            title:"连接成功",  
            duration:2000,  
            icon:"none"  
        })  

        client.subscribe(subscribe, function(err) {  
            if (!err) {  
                uni.showToast({  
                    title:"订阅成功",  
                    duration:2000,  
                    icon:"none"  
                })  
            }  
        })  
    }).on('message', function(topic, message) {  
        console.log(JSON.parse(message.toString()))  
    }).on('reconnect', function(topic, message) {  
        console.log("重连")  
    })  
}

附上H5和手机端订阅后的效果,需要两个demo的可以留言邮箱

有时没看到消息的话 可去 https://gitee.com/lianzhichao/mqtt-serverandclient/tree/master/rar 下载

本文借鉴猫猫猫猫的mqtt-demo,因为在猫猫发布的篇中参与评论后,许多小伙伴联系我,想要从0开始搭建,使用mqtt,所以写了这篇文章,如果有大佬发现错误或有侵权之处,联系侵删,多有不足之处请原谅,觉得不错麻烦给个赞哦,谢谢各位

收起阅读 »