Files
wx-h5-demo/wx-auth.js

84 lines
3.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ============================================================
wx-auth.js · H5 应用通用授权 + 跳商城 共享助手(各 H5 应用引用即可)
------------------------------------------------------------
依赖:页面引入 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
用法:在 H5 页面里
<script src="wx-auth.js"></script>
然后:
wxAuth.init(); // 检测环境 + 读取已授权资料(hash) + 回填
wxAuth.isAuthorized(); // 是否已授权(手机号/昵称/头像任一非空)
wxAuth.requestProfile(); // 点「授权登录」→ postMessage 通知宿主页
wxAuth.goMall(); // 点「进商城」→ 跳小程序商城 tabBar 页
回传协议:宿主页授权成功后更新 web-view src 为
<H5地址>?t=<ts>#openid=..&phone=..&nickname=..&avatar=..
(微信 webview 丢 query、不丢 hash,故授权结果放 hash)
============================================================ */
(function (g) {
'use strict';
function readHash(name) {
try {
var h = location.hash.slice(1) + '&' + location.search.slice(1);
var m = h.match(new RegExp('(?:^|[&#])' + name + '=([^&#]*)(?:$|[&#])'));
return m ? decodeURIComponent(m[1]) : '';
} catch (e) { return ''; }
}
var wxAuth = {
MODE: 'browser', // 'webview' | 'wechat-browser' | 'browser'
inWebview: false,
onReady: null,
/* ① 环境检测 + 读回传资料(授权后宿主更新 src,本页重载读到 hash) */
init: function (cb) {
this.onReady = cb || null;
var self = this;
var isWechat = /MicroMessenger/i.test(navigator.userAgent);
function setMode(m) {
self.MODE = m; self.inWebview = (m === 'webview');
if (self.onReady) self.onReady(self);
}
if (window.wx && window.wx.miniProgram) {
var responded = false;
window.wx.miniProgram.getEnv(function (r) {
responded = true;
setMode(r && r.miniprogram ? 'webview' : (isWechat ? 'wechat-browser' : 'browser'));
});
setTimeout(function () { if (!responded) setMode(isWechat ? 'wechat-browser' : 'browser'); }, 800);
} else {
setMode(isWechat ? 'wechat-browser' : 'browser');
}
},
/* ② 读取授权结果(hash 里的 phone/nickname/avatar) */
readAuth: function () {
return { phone: readHash('phone'), nickname: readHash('nickname'), avatar: readHash('avatar') };
},
/* ③ 是否已授权 */
isAuthorized: function () {
var a = this.readAuth();
return !!(a.nickname || a.avatar || a.phone);
},
/* ④ 请求授权:postMessage → 通用宿主页(annex/web_view)弹原生授权面板 */
requestProfile: function () {
if (!(window.wx && window.wx.miniProgram)) { this.toast('请在微信小程序中打开'); return; }
window.wx.miniProgram.postMessage({ data: { action: 'requestProfile' } });
this.toast('请在弹出的小程序面板授权');
},
/* ⑤ 跳小程序商城(tabBar 页用 switchTab;非 tabBar 用 navigateTo) */
goMall: function (url) {
if (!(window.wx && window.wx.miniProgram)) { this.toast('请在微信小程序中打开商城'); return; }
window.wx.miniProgram.switchTab({ url: url || '/pages/goods_cate/goods_cate' });
},
/* ⑥ 展示授权结果到指定元素(可选便捷方法) */
fillAuth: function (nameEl, avatarEl) {
var a = this.readAuth();
if (nameEl && a.nickname) nameEl.textContent = a.nickname;
if (avatarEl && a.avatar) avatarEl.src = a.avatar;
},
toast: function (m) {
var t = document.getElementById('toast');
if (!t) return;
t.textContent = m; t.classList.add('show');
clearTimeout(t._tt); t._tt = setTimeout(function () { t.classList.remove('show'); }, 1800);
}
};
g.wxAuth = wxAuth;
})(window);