更新记录

1.0.0（2025-08-04）

项目初始化

平台兼容性

uni-app x(4.75)

介绍

本插件基于NanoHTTPD搭建Android端Http服务，能够接收接口请求参数并实时传递给uniapp应用去做进一步的业务处理。 使用示例场景：uniapp开发的安卓App需要自身作为一个服务器开放给第三方作为接口调用，然后需要实时拿到接口参数进行页面渲染或其它处理。

使用方法

1.引入插件

import { createServer, IHttpServer } from "@/uni_modules/zc-http-server"
let server : IHttpServer = createServer(8080, '0.0.0.0')

2.启动服务

server.start()

3.获取服务状态

server.isAlive()

4.获取服务启动ip

server.getHostname()

5.获取服务启动端口

server.getListeningPort()

6.关闭服务

server.stop()

7.demo示例和效果

<template>
    <view style="height: 100%;">
        <view style="height: 50%;">
            <web-view id="web-view" src="/hybrid/html/test.html"></web-view>
        </view>
        <scroll-view>
            <button @click="open_server">开启服务器</button>
            <button @click="is_alive">是否运行:{{alive}}</button>
            <button @click="get_port">获取监听端口:{{port}}</button>
            <button @click="get_host">获取监听地址:{{host}}</button>
            <button @click="stop_server">关闭服务器</button>
            <button @click="senGet" style="font-size: 12px;">接口发送get请求给原生，原生将请求参数实时回传给uniapp</button>
            <button @click="senPost" style="font-size: 12px;">接口发送post请求给原生，原生将请求参数实时回传给uniapp</button>
        </scroll-view>
    </view>
</template>

<script>
    let webviewElement = null as UniWebViewElement | null
    import { createServer, IHttpServer } from "@/uni_modules/zc-http-server"
    let server : IHttpServer = createServer(8080, '0.0.0.0')
    import BroadcastReceiver from 'android.content.BroadcastReceiver'
    import Context from 'android.content.Context'
    import Intent from 'android.content.Intent'
    import IntentFilter from 'android.content.IntentFilter'
    import Build from 'android.os.Build'
    class MyReciver extends BroadcastReceiver {
        constructor() {

        }
        override onReceive(context : Context, intent : Intent) {
            var action = intent.getAction()
            if (action.equals("ACTION_FROM_NATIVE")) {
                var value = intent.getStringExtra("key");
                // 这里可以实时获取到接口传递参数然后进行自定义处理，我这里打印出来，然后控制webview嵌的h5页面渲染这些参数
                uni.showToast({
                    icon:'none',
                    title: value!!
                })
                webviewElement?.evalJS("showMessage('" + value + "')");
            }
        }
    }
    export default {
        data() {
            return {
                receiver: null as BroadcastReceiver | null,
                server: null,
                alive: false,
                port: -1,
                host: '',
                message: ''
            }
        },
        onReady() {
            webviewElement = uni.getElementById('web-view') as UniWebViewElement
            this.receiver = new MyReciver()
            if (Build.VERSION.SDK_INT >= 33) {
                UTSAndroid.getUniActivity()?.registerReceiver(this.receiver, IntentFilter("ACTION_FROM_NATIVE"), Context.RECEIVER_EXPORTED)
            } else {
                UTSAndroid.getUniActivity()?.registerReceiver(this.receiver, IntentFilter("ACTION_FROM_NATIVE"))
            }
        },
        onUnload() {
            UTSAndroid.getUniActivity()?.unregisterReceiver(this.receiver!)
        },
        methods: {
            open_server() {
                server.start()
            },
            get_host() {
                this.host = server.getHostname()
            },
            get_port() {
                this.port = server.getListeningPort()
            },
            is_alive() {
                this.alive = server.isAlive()
            },
            stop_server() {
                server.stop()
            },
            senGet() {
                uni.request({
                    url: `http://${this.host}:${this.port}?name=张三&age=18`
                })
            },
            senPost() {
                uni.request({
                    url: `http://${this.host}:${this.port}?name=李四&age=20`,
                    method: 'POST'
                })
            }
        }
    }
</script>

<style>

</style>