96 lines
5.4 KiB
HTML
96 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
<meta name="theme-color" content="#F4593C">
|
||
<title>wx-h5-demo · 共享授权规范示例</title>
|
||
<style>
|
||
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
|
||
body { font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:#F8F3EF; color:#2B2320; min-height:100vh; display:flex; justify-content:center; }
|
||
.wrap { width:100%; max-width:430px; padding:24px 20px 40px; }
|
||
.brand { font-size:22px; font-weight:800; color:#F4593C; } .brand small{color:#A79C95;font-size:13px;font-weight:500;margin-left:8px}
|
||
.env { margin:14px 0 8px; font-size:13px; color:#6B615B; } .env b{color:#2B2320}
|
||
.tag { display:inline-block; padding:2px 8px; border-radius:8px; font-size:12px; }
|
||
.tag.ok{background:#E8F2EB;color:#5F8A4A} .tag.no{background:#F6DCD6;color:#C4553A}
|
||
.card { background:#fff; border:1px solid #EFE7E1; border-radius:16px; padding:16px; margin-top:14px; }
|
||
.card h2{font-size:15px;font-weight:800;margin-bottom:10px}
|
||
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed #EFE7E1;font-size:14px}
|
||
.row:last-child{border-bottom:none} .row .k{color:#6B615B} .row .v{font-weight:600} .row .v.placeholder{color:#C9B7AC;font-weight:500}
|
||
.avatar{width:44px;height:44px;border-radius:50%;background:#F1E6E0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:18px}
|
||
.avatar img{width:100%;height:100%;object-fit:cover}
|
||
.btn{display:block;width:100%;padding:15px;border:none;border-radius:14px;font-size:15px;font-weight:700;margin-top:14px;cursor:pointer}
|
||
.btn.main{background:#F4593C;color:#fff} .btn.ghost{background:#fff;color:#6B615B;border:1px solid #EFE7E1}
|
||
.hint{font-size:12px;color:#A79C95;margin-top:12px;line-height:1.6}
|
||
#toast{position:fixed;left:50%;bottom:14%;transform:translateX(-50%);background:rgba(30,22,18,.9);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:99}
|
||
#toast.show{opacity:1}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="brand">wx-h5-demo <small>共享授权规范示例</small></div>
|
||
<div class="env">环境：<b id="envTxt">检测中…</b> <span id="envTag" class="tag no">纯浏览器</span></div>
|
||
|
||
<div class="card">
|
||
<h2>授权状态</h2>
|
||
<p id="authState" style="font-size:13px;color:#6B615B;line-height:1.6">检测中…</p>
|
||
<button class="btn main" id="btnAuth" style="display:none">授权登录</button>
|
||
<button class="btn ghost" id="btnMall">进商城</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>授权结果（宿主页回传后读取 #phone/nickname/avatar）</h2>
|
||
<div class="row"><span class="k">手机号</span><span class="v placeholder" id="rPhone">—</span></div>
|
||
<div class="row"><span class="k">昵称</span><span class="v placeholder" id="rNick">—</span></div>
|
||
<div class="row"><span class="k">头像</span><span class="v"><span class="avatar" id="rAvatarWrap"><span id="rAvatarText">宝</span></span></span></div>
|
||
</div>
|
||
|
||
<p class="hint">
|
||
本页演示<b>共享授权规范</b>：<code>wx-auth.js</code>（<code>wxAuth.init/requestProfile/goMall/readAuth/isAuthorized</code>）。
|
||
授权流程：点「授权登录」→ <code>wx.miniProgram.postMessage({action:'requestProfile'})</code> →
|
||
通用宿主页 <code>pages/annex/web_view</code> 弹原生授权面板（头像/昵称/手机号）→ <code>POST /api/mp/public/auth/profile</code> 落库共享 UserAuth →
|
||
宿主页更新 <code>web-view src</code>（hash 带结果）→ 本页重载 → <code>wxAuth.readAuth()</code> 显示。
|
||
「进商城」→ <code>wx.miniProgram.switchTab('/pages/goods_cate/goods_cate')</code>。
|
||
</p>
|
||
</div>
|
||
<div id="toast"></div>
|
||
|
||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||
<script src="wx-auth.js"></script>
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
function $(s) { return document.querySelector(s); }
|
||
function show(tag, title) {
|
||
$('#envTag').textContent = title; $('#envTag').className = 'tag ' + (tag === 'ok' ? 'ok' : 'no');
|
||
}
|
||
function render(a) {
|
||
// 已授权 → 展示；未授权 → 显示「授权登录」
|
||
var authed = a.isAuthorized();
|
||
$('#authState').textContent = authed ? '✅ 已授权（昵称/头像/手机号）' : '🔓 未授权，点下方「授权登录」';
|
||
$('#btnAuth').style.display = authed ? 'none' : 'block';
|
||
// 展示回传结果
|
||
$('#rPhone').textContent = a.readAuth().phone || '—';
|
||
$('#rNick').textContent = a.readAuth().nickname || '—';
|
||
if (a.readAuth().avatar) { $('#rAvatarWrap').innerHTML = '<img src="' + a.readAuth().avatar + '" alt="头像">'; }
|
||
}
|
||
function init() {
|
||
wxAuth.init(function (a) {
|
||
// 环境
|
||
var envTxt = a.inWebview ? '小程序 web-view' : (a.MODE === 'wechat-browser' ? '微信浏览器' : '纯浏览器');
|
||
$('#envTxt').textContent = envTxt;
|
||
// 环境 tag：已授权才 ok
|
||
render(a);
|
||
});
|
||
// 授权后（宿主更新 src，本页重载）→ 由 init 里 readAuth 拿到
|
||
}
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
init();
|
||
$('#btnAuth').addEventListener('click', function () { wxAuth.requestProfile(); });
|
||
$('#btnMall').addEventListener('click', function () { wxAuth.goMall(); });
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|