更新记录

1.1.1（2024-05-31）

• 修复Content-Length重复

1.1.0（2024-04-15）

• 修复缺少default mimetypes
• 修复静态资源路径匹配问题

1.0.7（2024-03-26）

• 增加获取有线网络ip接口
• 删除remoteHostname

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

使用文档 （更多插件及问题，请加微信：zhuzheVIP1）

说明

此插件提供web服务器功能，支持静态站点，自定义接口开发等功能。

使用

1. 下载web-server.js放到项目根目录js文件夹下

   • 支持GET、POST、PUT、DELETE
   • 支持send、sendFile

2. 创建WebServer

<template>
    <view>
        <button @click="startServer">启动服务</button>
        <button @click="stopServer">停止服务</button>
    </view>
</template>

<script>
// #ifdef APP-PLUS
import { checkPort, WebServer } from '@/js/web-server.js';
// #endif
export default {
    data() {
        return {};
    },
    async onLoad() {
        // #ifdef APP-PLUS
        let port = 8080;
        const [err, res] = await checkPort(port);
        if (res == true) {
            let server = new WebServer(port);
            server.addWebStatic('/web', '/static/myweb');
            server.get('/test', (request, resp) => {
                console.log('request', request);
                resp.send({ a: 1, b: 2 });
            });
            // server.file('/', '/static/myweb/index.html');
            server.get('/', (request, resp) => {
                console.log('request', request);
                // resp.send({ a: 1 });
                resp.sendFile('/static/myweb/index.html');
            });
            server.post('/', (request, resp) => {
                console.log('request', request);
                resp.send({ a: '你好' });
            });
            server.put('/', (request, resp) => {
                console.log('request', request);
                resp.send({ a: 1 });
            });
            server.delete('/', (request, resp) => {
                console.log('request', request);
                resp.send({ a: 1 });
            });
            uni.$webServer = server;
        } else {
            console.log(err);
        }
        // #endif
    },
    methods: {
        startServer() {
            // 获取wifi ip地址
            uni.$webServer.getIp((e) => {
                uni.showToast({
                    icon: 'none',
                    title: JSON.stringify(e)
                });
            });
            // 开启服务
            uni.$webServer.start((result, msg) => {
                console.log(result);
            });
        },
        stopServer() {
            // 停止服务
            uni.$webServer.stop((result, msg) => {
                console.log(result);
            });
        }
    }
};
</script>

<style></style>

web-server.js 说明

web-server.js是基于插件封装，更加便于开发

方法

• checkPort - 检查端口是否可用

const port = 8080;
const [err, res] = await checkPort(port);
if (res == true) {
    // 端口可用
} else {
    // 端口不可用
}

类

• WebServer

// 创建一个WebServer服务
let server = new WebServer(port);

// 设置上传目录
server.setUploadDir('_doc/uploadFiles')

// 开启跨域
server.cors(true)

// 添加静态站点，访问地址 - http://<ip>:<port>/web/index.html
// 特别需要注意一点，打包h5静态文件的时候，需要设置运行的基础路径为 /web/ ,否则会出现js、css加载路径错误，出现404问题
server.addWebStatic('/web', '/static/myweb');
// 创建get请求接口
server.get('/test', (request, resp) => {
    console.log('request', request);
    resp.send({ a: 1, b: 2 });
});

// get请求，返回文件, 提供2种方式

// // 方式1，使用file方法直接映射
// server.file('/', '/static/myweb/index.html');
// 方式2
server.get('/', (request, resp) => {
    console.log('request', request);
    resp.sendFile('/static/myweb/index.html');
});
// 创建post请求接口
server.post('/', (request, resp) => {
    console.log('request', request);
    resp.send({ a: 1 });
});
// 创建put请求接口
server.put('/', (request, resp) => {
    console.log('request', request);
    resp.send({ a: 1 });
});
// 创建delete请求接口
server.delete('/', (request, resp) => {
    console.log('request', request);
    resp.send({ a: 1 });
});

// 开启WebServer
server.start((result, msg) => {
    console.log(result);
});

// 停止WebServer
server.stop((result, msg) => {
    console.log(result);
});

常见问题