国外英文网站深圳网站建设 沙漠风
前言
本专栏是基于uniapp实现手机端各种小功能的程序，并且基于各种通讯协议如http、websocekt等，实现手机端作为客户端（或者是手持机、PDA等），与服务端进行数据通讯的实例开发。
发文平台
CSDN
环境配置
系统：windows
平台：visual studio code、HBuilderX（uniapp开发）
语言：javascript、html、vue
库：websocket、http
概述
本文是利用uniapp开发一个手机端的程序，用于实现websocket数据通讯，手机端利用uniapp实现，利用手机摄像头进行二维码扫描，获取二维码数据，通过websocket上传给服务器，服务端利用nodejs实现。
1、uniapp手机客户端实现
uniapp的开发工具是HBuilderX软件，可以在其官网下载：
https://hx.dcloud.net.cn/Tutorial/install/windows
下载完成后，按照其官网指示完成安装，然后打开HBuilderX，新建一个项目，我们可以命名为MyWebApp：
然后点击“创建”，软件将自动生成项目文件，其初始结构如下：
uniapp的开发框架是基于vue的，所以，如果你熟悉vue，那么使用uniapp开发是非常简单的。
我们可以先运行一下上面的初始代码：
HBuilderX软件内置预览功能，可以选择“PC端”或者是“移动端”来进行UI预览。
上面的预览，就是很简单的初始界面。我们需要对代码进行修改，也就是修改index.vue这个文件，我们的功能需求是实现websocket通讯，以及二维码扫描，那么我们的页面元素如下：
1、连接websocket服务器、断开
2、二维码扫描按钮、数据发送
下面是修改后的index.vue：
<template><view class="content"><view class="head-area"><text class="title">{{title}}</text></view><view class="main-area1"><view class="btns-row"><button @click="getserver">获取</button><button @click="connect">连接</button><button @click="disconnect" :disabled="btn_disconn">断开</button></view><view><ul><text class="title">服务器列表：</text><ul><label>{{servertitle}}</label><a :class="status">{{serverips}}</a></ul></ul></view></view><view class="main-area2"><view class="btns-row"><button @click="startscan">扫描</button><button class="btn-spe" @click="send">发送</button><button class="btn-spe" @click="cleardata">清空</button></view><view class="qrcodedata"><text>扫描数据：</text><text>{{qrcodedata}}</text></view><view class="senddata"><text>发送数据：</text><text>{{senddata}}</text></view><view class="recvdata"><text>接收数据：</text><text>{{recvdata}}</text></view></view><view class="foot-area"><button @click="exitapp">退出程序</button></view></view>
</template><script>export default {data() {return {title: 'Home',serverIP:'',serverPort:'',serverips:'',servertitle:'',socketTask:null,status:'disconnect',qrcodedata:'',btn_disconn:true,senddata:'',recvdata:'',}},onLoad() {},methods: {getserver(){//判断平台，如果不支持fetch，则使用uni的request发送请求const platform = process.env.VUE_APP_PLATFORM;if ( platform == 'h5'){const res = fetch('http://192.168.1.150:3000/serverip').then((response)=>{if(!response){console.log('error')}return response.json()}).then(data=>{console.log(data)const dt_json = JSON.parse(data.serverip