Xurh
/
ss_dc_wechat_mini_program_h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
							<!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>Test1 - 第二层页面</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>📄 Test1 页面</h1>
            <p>这是第二层页面，可以继续跳转或返回</p>

            <div class="nav-info">
                <div class="breadcrumb">
                    <span>Home</span> → <span class="current">Test1</span>
                </div>
            </div>

            <div class="button-group">
                <button class="btn primary" @click="goToTest2">
                    ➡️ 进入Test2
                </button>
                <button class="btn secondary" @click="goBackToHome">
                    ⬅️ 返回Home
                </button>
                <button class="btn warning" @click="handleScanCode">
                    📷 扫码测试
                </button>
                <button class="btn danger" @click="goBackToMiniProgram">
                    🔙 返回小程序
                </button>
            </div>


        </div>
    </div>

    <script>
        const { createApp } = Vue

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

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

            methods: {
                // 处理操作结果
                handleResult(data) {
                    const { action, success, result, error } = data

                    if (success) {
                        switch (action) {
                            case 'scanCode':
                                console.log(`📷 扫码成功: ${result}`)
                                alert(`扫码结果: ${result}`)
                                break
                            default:
                                console.log(`✅ ${action} 操作成功`)
                        }
                    } else {
                        console.error(`❌ ${action} 操作失败: ${error}`)
                        alert(`${action} 操作失败: ${error}`)
                    }
                },

                // 跳转到Test2页面
                goToTest2() {
                    navigateTo('test2', { from: 'test1' })
                },

                // 返回Home页面
                goBackToHome() {
                    navigateTo('home', { from: 'test1' })
                },

                // 扫码测试
                handleScanCode() {
                    scanCode('从Test1页面扫码')
                },

                // 返回小程序
                goBackToMiniProgram() {
                    goBack('从Test1页面返回')
                },


            }
        }).mount('#app')
    </script>

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            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: 24px;
        }

        .nav-info {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 24px;
        }

        .breadcrumb {
            font-size: 14px;
            color: #666;
        }

        .breadcrumb .current {
            color: #007AFF;
            font-weight: 500;
        }

        .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.warning { background: #ffc107; color: #212529; }
        .btn.danger { background: #dc3545; 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>