开发环境配置指南

1. Caddy + FRP 开发环境配置

1.1 服务器配置

Caddy 配置

创建 /etc/caddy/Caddyfile:

api.yourdomain.com {
    tls {
        protocols tls1.2 tls1.3
    }

    handle /api/* {
        reverse_proxy localhost:8810
        header {
            Access-Control-Allow-Origin  *
            Access-Control-Allow-Methods "GET, POST, OPTIONS"
            Access-Control-Allow-Headers "Content-Type, Authorization"
        }
    }

    handle {
        reverse_proxy localhost:8810
    }

    log {
        output file /var/log/caddy/api.yourdomain.com.log
        format json
    }
}

FRP 服务端配置

创建 /etc/frp/frps.ini:

[common]
bind_port = 7000
kcp_bind_port = 7000
token = your_secure_token
dashboard_port = 7500
dashboard_user = admin
dashboard_pwd = your_secure_password
log_file = /var/log/frp/frps.log
log_level = info
log_max_days = 3
allow_ports = 8000-9000
heartbeat_timeout = 90

1.2 本地开发配置

FRP 客户端配置

创建 dev/frpc.ini:

[common]
server_addr = your_server_ip
server_port = 7000
token = your_secure_token
tcp_mux = true
use_encryption = true
use_compression = true

[web]
type = tcp
local_ip = 127.0.0.1
local_port = 9092
remote_port = 8810
group = web
group_key = your_group_key

health_check_type = tcp
health_check_timeout_s = 3
health_check_max_failed = 3
health_check_interval_s = 10

开发环境启动脚本

创建 start-dev.bat:

@echo off
set NODE_ENV=development
set API_URL=https://api.yourdomain.com

start cmd /k "cd server && apigo.exe"
start cmd /k "cd web-srm && npm run serve"
start cmd /k "cd dev && frpc -c frpc.ini"

2. 微信 JS-SDK 摄像头调用

2.1 配置准备

微信公众号配置

登录微信公众平台
配置 JS 接口安全域名
获取必要的配置信息：
- AppID
- AppSecret
- 授权回调域名

前端配置

创建 web-srm/js/wx-config.js:

export const wxConfig = {
    debug: false,
    appId: 'your_appid',
    timestamp: '',
    nonceStr: '',
    signature: '',
    jsApiList: [
        'checkJsApi',
        'scanQRCode',
        'chooseImage',
        'getLocalImgData'
    ]
};

2.2 后端接口实现

创建签名接口 SQL 模板：

-- API: /api/wx/sign
SELECT 
    appId,
    timestamp,
    nonceStr,
    signature
FROM WX_Sign 
WHERE url = @url
  AND created_at > DATEADD(SECOND, -7200, GETDATE())
ORDER BY created_at DESC
LIMIT 1

2.3 前端实现

工具函数

创建 web-srm/js/wx-utils.js:

import axios from './request';
import { wxConfig } from './wx-config';

export const initWxConfig = async (url) => {
    try {
        const { data } = await axios.post('/api/wx/sign', { url });
        const config = {
            ...wxConfig,
            ...data,
            debug: process.env.NODE_ENV === 'development'
        };

        wx.config(config);
        return new Promise((resolve, reject) => {
            wx.ready(() => resolve());
            wx.error((err) => reject(err));
        });
    } catch (error) {
        console.error('微信配置初始化失败:', error);
        throw error;
    }
};

export const scanQRCode = () => {
    return new Promise((resolve, reject) => {
        wx.scanQRCode({
            needResult: 1,
            scanType: ["qrCode"],
            success: (res) => resolve(res.resultStr),
            fail: (err) => reject(err)
        });
    });
};

export const chooseImage = () => {
    return new Promise((resolve, reject) => {
        wx.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['camera'],
            success: (res) => resolve(res.localIds[0]),
            fail: (err) => reject(err)
        });
    });
};

组件实现

创建 web-srm/components/WxCamera.vue:

<template>
    <div class="wx-camera">
        <el-button @click="handleCapture" :loading="loading">
            {{ loading ? '处理中...' : '拍照' }}
        </el-button>
        <img v-if="imageUrl" :src="imageUrl" class="preview" />
    </div>
</template>

<script>
import { initWxConfig, chooseImage } from '../js/wx-utils';

export default {
    name: 'WxCamera',
    data() {
        return {
            loading: false,
            imageUrl: ''
        };
    },
    async mounted() {
        try {
            await initWxConfig(window.location.href);
        } catch (error) {
            this.$message.error('微信配置初始化失败');
        }
    },
    methods: {
        async handleCapture() {
            this.loading = true;
            try {
                const localId = await chooseImage();
                // 处理图片...
                this.imageUrl = localId;
            } catch (error) {
                this.$message.error('拍照失败');
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>

<style scoped>
.wx-camera {
    padding: 15px;
}
.preview {
    margin-top: 15px;
    max-width: 100%;
}
</style>

2.4 使用说明

确保页面在微信浏览器中打开

引入微信 JS-SDK：

<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在需要使用摄像头的组件中：

<template>
 <wx-camera @capture="handleImageCapture" />
</template>


### 2.5 注意事项

1. 域名配置：
   
   - 确保域名已在微信公众平台完成备案
   - 使用 HTTPS 协议
   - 域名需要在公众号后台配置

2. 开发调试：
   
   - 开发时可在 `wx-config.js` 中设置 `debug: true`
   - 使用微信开发者工具进行调试
   - 注意调试时的域名白名单配置

3. 安全性：
   
   - 签名生成应在服务端完成
   - 注意 timestamp 的有效期（通常2小时）
   - 建议对 API 调用进行频率限制

4. 兼容性：
   
   - 确保在不同微信版本中测试
   - 提供降级方案（如普通文件上传）
   - 处理非微信环境的兼容

点点繁星

微信JS-SDK和云服务器代理本地方案