Xurh
/
ss_dc_wechat_mini_program_h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>H5通信测试</title>
    <!-- 微信 JS-SDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- H5工具类 -->
    <script src="../js/utils/h5-bridge.js"></script>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>🎛️ H5通信功能测试</h1>
            <p>测试H5页面与小程序的各种通信功能</p>

            <div class="button-group">
                <button class="btn primary" @click="goToTest1">
                    ➡️ 进入Test1
                </button>
                <button class="btn secondary" @click="handleScanCode">
                    📷 扫码
                </button>
                <button class="btn success" @click="handleChooseImage">
                    🖼️ 选择图片
                </button>
                <button class="btn warning" @click="handleH5UploadImage">
                    📤 H5图片上传
                </button>
                <button class="btn purple" @click="handleH5UploadFile">
                    📎 H5附件上传
                </button>

                <button class="btn info" @click="handleSetStorage">
                    💾 设置存储
                </button>
                <button class="btn info" @click="handleGetStorage">
                    📥 获取存储
                </button>
                <button class="btn danger" @click="handleGoBack">
                    🔙 返回小程序
                </button>

            </div>


        </div>
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {}
            },

            mounted() {
                // 初始化页面，使用自定义结果处理
                initPage('test', this.handleResult)
            },

            methods: {
                // 处理操作结果
                handleResult(data) {
                    const { action, success, result, error, message, key, value, found, phoneNumber, count, paths, files } = data

                    if (success) {
                        switch (action) {
                            case 'scanCode':
                                console.log(`📷 扫码成功: ${result}`)
                                alert(`扫码结果: ${result}`)
                                break
                            case 'chooseImage':
                                console.log(`🖼️ 选择图片成功: ${count}张`)
                                if (paths && paths.length > 0) {
                                    console.log(`📁 图片路径: ${paths[0]}`)
                                }
                                alert(`选择了 ${count} 张图片`)
                                break

                            case 'getStorage':
                                if (found) {
                                    console.log(`📥 获取存储成功: ${key} = ${JSON.stringify(value)}`)
                                    alert(`存储内容: ${JSON.stringify(value)}`)
                                } else {
                                    console.log(`📥 存储中没有找到: ${key}`)
                                    alert(`存储中没有找到: ${key}`)
                                }
                                break
                            case 'setStorage':
                                console.log(`💾 存储成功: ${key} = ${JSON.stringify(value)}`)
                                alert('存储设置成功!')
                                break
                            case 'makePhoneCall':
                                console.log(`📞 拨打电话成功: ${phoneNumber}`)
                                break
                            default:
                                console.log(`✅ ${action} 操作成功`)
                        }
                    } else {
                        console.error(`❌ ${action} 操作失败: ${error}`)
                        alert(`${action} 操作失败: ${error}`)
                    }
                },

                // 扫码
                handleScanCode() {
                    scanCode('扫描二维码')
                },

                // 选择图片
                handleChooseImage() {
                    chooseImage('选择图片')
                },

                // H5图片上传
                handleH5UploadImage() {
                    // 创建文件输入元素
                    const input = document.createElement('input')
                    input.type = 'file'
                    input.accept = 'image/*'
                    input.multiple = false

                    input.onchange = (event) => {
                        const file = event.target.files[0]
                        if (file) {
                            this.uploadFileToServer(file, 'image')
                        }
                    }

                    input.click()
                },

                // H5附件上传
                handleH5UploadFile() {
                    // 创建文件输入元素
                    const input = document.createElement('input')
                    input.type = 'file'
                    input.multiple = true
                    input.accept = '*/*'

                    input.onchange = (event) => {
                        const files = Array.from(event.target.files)
                        if (files.length > 0) {
                            files.forEach(file => {
                                this.uploadFileToServer(file, 'file')
                            })
                        }
                    }

                    input.click()
                },

                // 上传文件到服务器
                async uploadFileToServer(file, type) {
                    try {
                        console.log(`📤 开始上传${type}:`, file.name)

                        const formData = new FormData()
                        formData.append('file', file)
                        formData.append('type', type)

                        const response = await fetch('https://httpbin.org/post', {
                            method: 'POST',
                            body: formData
                        })

                        const result = await response.json()
                        console.log('✅ 上传成功:', result)

                        alert(`${type === 'image' ? '图片' : '文件'}上传成功！\n文件名: ${file.name}\n大小: ${(file.size / 1024).toFixed(2)}KB`)

                    } catch (error) {
                        console.error('❌ 上传失败:', error)
                        alert(`${type === 'image' ? '图片' : '文件'}上传失败: ${error.message}`)
                    }
                },

                // 拨打电话
                handleMakePhoneCall() {
                    makePhoneCall('10086', '拨打电话')
                },

                // 获取存储
                handleGetStorage() {
                    getStorage('test_data', '获取存储数据')
                },

                // 设置存储
                handleSetStorage() {
                    setStorage('test_data', {
                        message: '来自H5的测试数据',
                        timestamp: Date.now(),
                        user: 'H5用户'
                    }, '设置存储数据')
                },

                // 跳转到Test1页面
                goToTest1() {
                    navigateTo('test1', { from: 'home' })
                },

                // 返回小程序
                handleGoBack() {
                    goBack('从Home页面返回')
                }
            }
        }).mount('#app')
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            padding: 20px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 8px;
        }

        p {
            text-align: center;
            color: #666;
            margin-bottom: 32px;
        }

        .button-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 32px;
        }

        .btn {
            padding: 12px 16px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn.primary { background: #007AFF; color: white; }
        .btn.secondary { background: #6c757d; color: white; }
        .btn.success { background: #28a745; color: white; }
        .btn.warning { background: #ffc107; color: #212529; }
        .btn.info { background: #17a2b8; color: white; }
        .btn.danger { background: #dc3545; color: white; }
        .btn.purple { background: #6f42c1; color: white; }

        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }


        @media (max-width: 480px) {
            .button-group {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html>