안 드 로 이 드 웨 이 신 단 h5 페이지 하단 내 비게 이 션 표시 줄 추가
6129 단어 wechat
grow in errors
overview
최근 에 이동 단 jsp 프로젝트 를 작성 할 때 프로젝트 수요 에 따라 안 드 로 이 드 기기 에서 ios 위 챗 h5 페이지 밑 에 있 는 네 비게 이 션 바 를 실현 해 야 합 니 다.
생각 나 는 실현 방안:
iframe 사용 장점 은 다음 과 같 습 니 다.
var store = {
setItem: function (name, value) {
value = JSON.stringify(value);
window.sessionStorage.setItem(name, value);
},
getItem: function (name) {
return JSON.parse(window.sessionStorage.getItem(name));
}
};
$(function (){
var openid = getOpenId('openid');
//
var iframeSrc = "/weixin/reform/index/homepage/init/sub";
iframeSrc = store.getItem('sub_src') || iframeSrc; // sessionStorage ，
var sonWin = document.getElementsByTagName("iframe")[0].contentWindow;
$('#main_iframe').attr('src',iframeSrc);
//
if(iframeSrc.indexOf('init/sub')!== -1) {
$('.footer-nav').children('.arrow-icon-left').css('opacity', 0.4);
} else {
$('.footer-nav').children('.arrow-icon-left').css('opacity', 1);
}
$('#main_iframe').load(function () {
store.setItem('sub_src', sonWin.location.href); // url
window.parent.document.title = sonWin.document.title;// title
});
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isWeixin = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger';
if (!(isAndroid && isWeixin)) { // ios ， ios
window.location.href = iframeSrc;
}
$('.arrow-icon-left').click(function () {
window.history.back();
});
$('.arrow-icon-right').click(function () {
window.history.forward();
});
});
첫 페이지 하위 페이지 에 왼쪽 화살표 색상 코드 추가
window.addEventListener('pageshow', function () {
window.parent.$('.footer-nav').children('.arrow-icon-left').css('opacity', 0.4);
});
window.addEventListener('pagehide', function () {
window.parent.$('.footer-nav').children('.arrow-icon-left').css('opacity', 1);
});
주의 하 다.
1. 프로젝트 에 jsapi 결제 호출 이 있 을 때 결제 디 렉 터 리 에 권한 을 부여 하면 두 가지 가 존재 합 니 다.
1.1. 하 나 는 ios 위 챗 이 정상적으로 지불 하 는 권한 수여 디 렉 터 리 입 니 다. 1.2. 하 나 는 안 드 로 이 드 의 부모 페이지 권한 수여 디 렉 터 리 입 니 다.
2. 위 챗 JSApi 는 부모 window 에서
2.1 안 드 로 이 드 기기 에서 테스트 결과:
alert(typeof WeiXinJsBridge) ;// undefined
alert(typeof parent.WeiXinJsBridge); // [object]
2.2 위 챗 개발 도구 에서 하위 창 이 든 부모 창 이 든 WeiXinJSBridge 를 정상적으로 읽 을 수 있 습 니 다.
2.3 해결 방법 하위 window 의 경우 WeiXinJSBridge 결제 페이지 를 사용 해 야 합 니 다.
window.WeiXinJsBridge = window.WeiXinJsBridge || window.parent.WeiXinBridge;
iframe 을 통 해 위 챗 엔 드 아래쪽 네 비게 이 션 바 를 제거 하고 상단 네 비게 이 션 바 를 스스로 실현 하 는 것 도 좋 은 주의 입 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
위챗 애플릿 맵 API 인터페이스 응용 프로그램: 현재 위치를 가져오고 주소에 따라 맵 내비게이션을 표시하며 위치를 선택합니다1. 현재 위치 가져오기 2. 구체적인 주소에 따라 지도 내비게이션을 표시한다 1. 우선'좌표 픽업기'를 사용하여 구체적인 주소의 좌표를 얻으려면 텐센트 지도 픽업기 주소:https://lbs.qq.com/tool/...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
