微信小程序UDP通信,注意点 接收 onMessage 收到的message是ArrayBuffer缓冲,不能直接输出,要另转String处理
1、WXML 页面代码
<!--index.wxml-->
<view class="container">
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<view class="alllightbtn">
<view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 1">灯1</view>
<view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 2">灯2</view>
<view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 3">灯3</view>
<view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 4">灯4</view>
<view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 5">灯5</view>
<view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 6">灯6</view>
<view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 7">灯7</view>
<view class=".lightbtn" bindtap="onlightTap" data-lightnum="Light 8">灯8</view>
</view>
<view class="rcvUdpContent" wx:if="{{udprcvshow>0}}">{{udpRcvdata}}</view>
</view>
2、WXSS 样式代码
/**index.wxss**/ .usermotto {
margin: 20px 0px;
background-color: #e9f2f7;
border-top: solid 1px #0093dd;
border-bottom: solid 1px #0093dd;
width: 100%;
text-align: center;
padding: 10px;
} .user-motto {
font-size: 20px;
font-weight: bold;
} .alllightbtn {
display: block;
border: 1px solid #0093dd;
text-align: center;
} .lightbtn {
border: 2px solid #0093dd;
border-radius: 10px;
padding: 30px 40px;
margin: 10px;
display: inline-block;
} .lightbtn:active {
background-color: #606060;
} .rcvUdpContent {
position: fixed;
top: 10px;
left: 0px;
right: 0px;
padding: 40px 20px;
text-align: center;
font-size: 24px;
background: #eaf5ea;
border-top: solid 1px #0093dd;
border-bottom: solid 2px #0093dd;
}
3、js代码-----注意点 接收 onMessage 收到的message是ArrayBuffer缓冲,不能直接输出,要另转String处理
//index.js
//获取应用实例
const app = getApp() Page({
data: {
motto: 'UDP通信<->8路',
udp: null,
udpRcvdata:'udp recived data',
udprcvshow:0,
},
//点击灯按钮事件处理函数
onlightTap: function (light) {
var senddata = 'click ' + light.currentTarget.dataset.lightnum
console.log(senddata) this.udp.send({
address: 'gzlema.cn',//ip:47.92.29.6
port: 60000,
message: senddata
})
},
//UDP 接收到数据的事件处理函数,参数res={message,remoteInfo}
onUdpMessage: function (res) {
if (res.remoteInfo.size > 0) {
console.log('onUdpMessage() 接收数据 ' + res.remoteInfo.size + ' 字节:' + JSON.stringify(res, null, '\t')) // 将 ArrayBuffer类型的res.message取出来
let unit8Arr = new Uint8Array(res.message)
let encodedString = String.fromCharCode.apply(null, unit8Arr)
let decodedString = decodeURIComponent(escape((encodedString)))//没有这一步中文会乱码
console.log('message:'+decodedString)
// 将 ArrayBuffer类型的res.message取出来 this.setData({ udpRcvdata: 'udp rcv: ' + decodedString}) // 更新str到UI this.setData({ udprcvshow: Number(this.data.udprcvshow)+2000})//延时统一加2秒
console.log(this.data.udprcvshow)
var pagethis = this
setTimeout(function(){
pagethis.setData({ udprcvshow: Number(pagethis.data.udprcvshow) - 2000 })//延时统一减2秒
console.log(pagethis.data.udprcvshow)
},2000) //只显示2秒后隐藏
}
},
//页面加载完成事件由系统调用
onLoad: function () {
console.log('页面 index 加载完成事件onLoad()')
this.udp = wx.createUDPSocket() //新建udp实例
this.udp.bind() //udp绑定本机
this.udp.onMessage(this.onUdpMessage) //指定接收事件处理函数
}
})
4 较果图
微信小程序UDP通信,注意点 接收 onMessage 收到的message是ArrayBuffer缓冲,不能直接输出,要另转String处理的更多相关文章
- 微信小程序UDP通信
前言 UDP通信分为单播 广播 组播,基础库2.7.0之后,小程序开始支持UDP通信,目前小程序只支持单播. 小程序API 小程序UDP通信这一块可以说是很简单了就一个UDPSocket实例.然后bi ...
- 微信小程序页面通信
目录 微信小程序页面通信 方式一:通过URL 方式二:通过全局变量 方式三:通过本地存储 方式四:通过路由栈 微信小程序页面通信 方式一:通过URL // A 页面 wx.navigateTo({ u ...
- 微信小程序组件通信
父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...
- 微信小程序组件通信入门及组件生命周期函数
组件生命周期函数链接地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.h ...
- 微信小程序 组件通信相关知识整理
1.自定义组件间通信与事件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.htm ...
- 微信小程序组建通信
子组件传递父组件需要用到triggerEvent方法,当子组件(自定义组件)点击button的时候调用triggerEvent方法传递一些数据,首先第一个属性为自定义名称(myevent)对应父组件( ...
- 让微信小程序开发如鱼得水
关于微信小程序开发一直想写一篇相关的文章总结和记录下,结果拖延症犯了迟迟没有下笔:这不最近天气不错,于是找一个空闲的下午将这篇文章输出下(好像跟天气没啥关系),那我们就开始吧! 注意:本文默认开发 ...
- 微信小程序image组件中aspectFill和widthfix模式应用详解
aspectFill 与 widthfix 都是保持宽高比不变 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来.也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发 ...
- 图片的URL上传至阿里云OSS操作(微信小程序二维码返回的二进制上传到OSS)
当我们从网络中获取一个URL的图片我们要存储到本地或者是私有的云时,我们可以这样操作 把url中的图片文件下载到本地(或者上传到私有云中) public String uploadUrlToOss ...
随机推荐
- 将Python模块转变为命令行工具
问:如何输入命令行就能执行python代码呢? 答:要将python模块转变为命令行工具只用在 setup.py 文件中添加参数entry_points 例如: entry_points={ 'con ...
- 51Nod 1344 走格子 (贪心)
有编号1-n的n个格子,机器人从1号格子顺序向后走,一直走到n号格子,并需要从n号格子走出去.机器人有一个初始能量,每个格子对应一个整数A[i],表示这个格子的能量值.如果A[i] > 0,机器 ...
- [BOI2003] Gem - 树形dp
结论 不同颜色数不会超过 \(O(\log n)\) 然后就是很简单的树形dp了 顺便复习一下树形dp怎么写 #include <bits/stdc++.h> using namespac ...
- C++——动态内存分配1
9.动态内存分配 new 类型名T(初值列表) 其功能是在程序执行期间申请用于存放T类型对象的内存空间,并依初值列表赋以初值,结果值:成功则T类型的指针,指向新分配的内存:失败则为0(null).若 ...
- Spring与RestHighLevelClient
Elasticsearch连接方式有两种:分别为TCP协议与HTTP协议 最近使用es比较多,之前使用一直是使用spring封装的spring-data-elasticsearch:关于spring- ...
- 项目转移时发生的错误<springboot+mybatis(xml逆向工程自动生成)>
org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'app ...
- python:创建文件
#!/usr/bin/python# -*- coding:utf-8 -*- open('a.txt','w+')
- C++-POJ2960-S-Nim-[限制型Nim]
每次只能从取集合S中个数的物品,其他和普通Nim游戏相同 预处理出每种物品堆的sg值,然后直接xor一下,xor-sum>0即必胜 #include <set> #include & ...
- navicat操作mysql数据库
1.利用mysql来做ER图 1.1点击模型->新建模型->点击表->新建表,这样就可以了 1.2 建好的ER图->工具 有导出到sql ,有同步到数据库 1.3 建好的表,可 ...
- [HEOI2016] 字符串 - 后缀数组,主席树,ST表,二分
[HEOI2016] 字符串 Description 给定一个字符串 \(S\), 有 \(m\) 个询问,每个询问给定参数 \((a,b,c,d)\) ,求 \(s[a..b]\) 的子串与 \(s ...