微信が開発し、原生を模倣して「もう一度押す」機能を実現
1958 ワード
シーンの適用
微信がメニューを開発する際、メニューから入ったページがすぐに戻るキーを押すと、微信の公衆番号に戻る微信インタフェースが現れるという問題があった.何のヒントもありませんが、「京東微信公衆番号」をクリックすると、すぐに戻るボタンを押すとヒントがあり、微信JSDK開発ドキュメントには説明が見つかりませんでした.注意【京東】右上は、カスタマイズ可能です.
シナリオの原理
HTML 5の
シナリオ・コード
微信がメニューを開発する際、メニューから入ったページがすぐに戻るキーを押すと、微信の公衆番号に戻る微信インタフェースが現れるという問題があった.何のヒントもありませんが、「京東微信公衆番号」をクリックすると、すぐに戻るボタンを押すとヒントがあり、微信JSDK開発ドキュメントには説明が見つかりませんでした.注意【京東】右上は、カスタマイズ可能です.
シナリオの原理
HTML 5の
window.history.pushState
の特性を利用して、例えばAページからアクセスすると、window.history.length==1
と判断されると、window.history.pushState
が空の履歴に書き込まれるように呼び出される.また、戻りキーを傍受し、戻りキーを押すと( , , 。
)、戻りイベントがlayer弾枠プラグインを使用して「本当に微信に戻りますか?」というプロンプトを傍受する.あるいはその他.「もう一度ぶらぶら」をクリックすると、再び空白の履歴を書き、「OK」をクリックするか、「戻る」をクリックすると、微信ブラウザを閉じます.シナリオ・コード
if(window.history.length==1){//
//
pushHistory();
}
//
setTimeout(function () {
//
window.addEventListener("popstate", function(e) {
layer.open({
content: ' ?',
btn: [' ', ' '],
shadeClose: false,
yes: function(){
// API
WeixinJSBridge.call('closeWindow');
}, no: function(){
// 【 】,
pushHistory();
}
});
}, false);
}, 300);
/**
* [pushHistory ]
* @author
* @copyright
* @version [V1.0 ]
* @date 2016-07-30
* @return {[type]} [description]
*/
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}