uni-app 重新制作包括TCP-Socket原生插件(支持Android和IOS) - AimerQAQ的自定义运行基座

在 uni-app 中重新制作一个包含 TCP-Socket 原生插件的自定义运行基座，支持 Android 和 iOS，你可以按照以下步骤进行。这个插件允许你在 uni-app 中直接使用 TCP Socket 进行网络通信。

1. 创建 uni-app 项目

首先，创建一个新的 uni-app 项目。

vue create -p dcloudio/uni-preset-vue my-tcp-app

2. 创建原生插件

uni-app 支持通过原生插件的方式扩展功能。你需要为 Android 和 iOS 分别创建原生插件。

2.1 Android 原生插件

1. 创建 Android 原生模块
   在 uni-app 项目的 nativeplugins 目录下创建一个新的文件夹，例如 TCPPlugin。

2. 编写 Java 代码
   在 TCPPlugin 文件夹中创建 android 目录，并在其中编写 Java 代码实现 TCP Socket 功能。

   package com.example.tcpplugin;
   
   import io.dcloud.common.DHInterface.IWebview;
   import io.dcloud.common.DHInterface.StandardFeature;
   import io.dcloud.common.util.JSUtil;
   
   public class TCPPlugin extends StandardFeature {
   
       public void connect(IWebview pWebview, String[] pArgs) {
           // 实现 TCP 连接逻辑
           String host = pArgs[0];
           int port = Integer.parseInt(pArgs[1]);
           // TODO: 实现 TCP 连接
           JSUtil.execCallback(pWebview, "connect", "Connected to " + host + ":" + port, JSUtil.OK, false);
       }
   
       public void send(IWebview pWebview, String[] pArgs) {
           // 实现发送数据逻辑
           String data = pArgs[0];
           // TODO: 实现发送数据
           JSUtil.execCallback(pWebview, "send", "Sent: " + data, JSUtil.OK, false);
       }
   
       public void disconnect(IWebview pWebview, String[] pArgs) {
           // 实现断开连接逻辑
           // TODO: 实现断开连接
           JSUtil.execCallback(pWebview, "disconnect", "Disconnected", JSUtil.OK, false);
       }
   }
   

3. 配置插件
   在 TCPPlugin 目录下创建 plugin.json 文件，配置插件信息。

   {
     "name": "TCPPlugin",
     "id": "TCPPlugin",
     "version": "1.0.0",
     "description": "TCP Socket Plugin for Android",
     "_platforms": ["android"],
     "android": {
       "class": "com.example.tcpplugin.TCPPlugin"
     }
   }
   

2.2 iOS 原生插件

1. 创建 iOS 原生模块
   在 TCPPlugin 文件夹中创建 ios 目录，并在其中编写 Objective-C 代码实现 TCP Socket 功能。

2. 编写 Objective-C 代码
   在 ios 目录中创建 TCPPlugin.m 文件。

   #import "TCPPlugin.h"
   #import "JSUtil.h"
   
   [@implementation](/user/implementation) TCPPlugin
   
   - (void)connect:(NSArray *)arguments {
       NSString *host = [arguments objectAtIndex:0];
       NSNumber *port = [arguments objectAtIndex:1];
       // TODO: 实现 TCP 连接
       [self callback:@"connect" withResult:@"Connected" andStatus:JSUtilStatusOK];
   }
   
   - (void)send:(NSArray *)arguments {
       NSString *data = [arguments objectAtIndex:0];
       // TODO: 实现发送数据
       [self callback:@"send" withResult:@"Sent" andStatus:JSUtilStatusOK];
   }
   
   - (void)disconnect:(NSArray *)arguments {
       // TODO: 实现断开连接
       [self callback:@"disconnect" withResult:@"Disconnected" andStatus:JSUtilStatusOK];
   }
   
   [@end](/user/end)
   

3. 配置插件
   在 plugin.json 中添加 iOS 配置。

   {
     "name": "TCPPlugin",
     "id": "TCPPlugin",
     "version": "1.0.0",
     "description": "TCP Socket Plugin for iOS",
     "_platforms": ["ios"],
     "ios": {
       "class": "TCPPlugin"
     }
   }
   

3. 在 uni-app 中使用插件

1. 引入插件
   在 pages/index/index.vue 中引入并使用插件。

   <template>
     <view>
       <button @click="connect">Connect</button>
       <button @click="send">Send</button>
       <button @click="disconnect">Disconnect</button>
     </view>
   </template>
   
   <script>
   export default {
     methods: {
       connect() {
         uni.requireNativePlugin('TCPPlugin').connect(['127.0.0.1', 8080], (res) => {
           console.log(res);
         });
       },
       send() {
         uni.requireNativePlugin('TCPPlugin').send(['Hello, World!'], (res) => {
           console.log(res);
         });
       },
       disconnect() {
         uni.requireNativePlugin('TCPPlugin').disconnect([], (res) => {
           console.log(res);
         });
       }
     }
   }
   </script>