위 챗 애플 릿 웹 뷰 H5 삽입 방법 인 스 턴 스

머리말
위 챗 애플 릿 이 새로운 개방 능력 을 제공 합 니 다!드디어 애플 릿 에 HTML 페이지 를 삽입 하 는 기능 을 열 었 습 니 다!위 챗 애플 릿 기초 라 이브 러 리 1.6.4 부터 우 리 는 애플 릿 에<웹-view>구성 요 소 를 설치 하여 우리 의 HTML 페이지 를 연결 할 수 있 습 니 다.그 전에 우 리 는 애플 릿 에서 기 존의 HTML 프로그램(예 를 들 어 HTML 5 글 시스템,쇼핑 몰 시스템 등)을 통합 시 킬 수 없 었 고 애플 릿 방식 으로 다시 개발 할 수 밖 에 없 었 습 니 다.지금 은<웹-view>가 있 으 면 이러한 웹 시스템 을 편리 하 게 통합 시 켜 상당 한 업 무량 을 줄 일 수 있 습 니 다.
tips:개인 형식의 애플 릿 은 웹-viwe 인용 H5 를 지원 하지 않 으 며 애플 릿 관리 배경 에 H5 도 메 인 이름 을 업무 도 메 인 으로 설정 해 야 합 니 다.
방법 은 아래 와 같다.
1.페이지 주 소 를 직접 가 져 오기;

url 은 점프 가 필요 한 주 소 를 위해 encodeURIComponent 로 url 을 인 코딩 할 수 있 습 니 다.애플 릿 은 decodeURIComponent 로 디 코딩 할 수 있 습 니 다.url 에서 사용 할 수 있 습 니까?&참조,애플 릿 은 onLoad 에서 option 으로 인 자 를 직접 받 을 수 있 습 니 다.
2.애플 릿 상단 설정 투명;
웹-view 에 삽 입 된 H5 페이지 는 투명 하 게 설정 할 수 없고 페이지 상단 의 색상 만 수정 할 수 있 습 니 다.

a.모든 페이지 가 투명 하 게 설정 되 어 있 습 니 다(app.json 에 있 는 window 에 navigation Style:custom 을 추가 하면 상단 네 비게 이 션 표시 줄 이 사라 지고 오른쪽 상단 캡슐 모양 의 단추 만 유지 합 니 다).

b.단독 페이지 설정 투명(각 단독 json 에 navigation Style:custom 추가);

3.애플 릿 이 H5 페이지 로 이동
메모:redirecto 를 사용 하여 H5 페이지 로 이동 한 후,끼 워 넣 은 H5 페이지 에 되 돌아 오 는 단추 가 없습니다.왼쪽 에 첫 페이지 로 돌아 가 는 단추 가 하나 밖 에 없습니다.

4.H5 애플 릿 페이지 로 이동
도입<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>해 야 매개 변 수 를 사용 할 수 있 습 니 다.
wx.miniProgram.switchTab({ url:url}); //애플 릿 tabbar 페이지 로 건 너 뛰 기,참조 전송 불가
wx.miniProgram.navigateTo({url:url,query:{/매개 변수 작성});/작은 프로그램 이 tabbar 페이지 가 아 닌 곳 으로 넘 어가 면 참조 할 수 있 습 니 다.
다른 점프 는 다음 그림 을 참고 하 세 요.

5.H5 bindmessage 를 사용 하여 애플 릿 에 전달
tips:bindmessage 를 사용 할 때 사용자 가 애플 릿 의 후퇴,공유 단 추 를 누 르 거나 애플 릿 에 포 함 된 H5 페이지 를 없 애 야만 매개 변 수 를 전달 할 수 있 습 니 다.그렇지 않 으 면 트리거 되 지 않 습 니 다.
6.H5 다른 작은 프로그램의 인 터 페 이 스 를 사용 하면 API 를 참고 할 수 있 습 니 다.제 가 언급 하지 않 았 기 때문에 링크 를 참고 해 드 리 겠 습 니 다.
참조 링크:developers.weixin.qq.com/miniprogram...
총결산
위 챗 애플 릿 웹 뷰 H5 에 포 함 된 글 을 소개 합 니 다.더 많은 위 챗 애플 릿 웹 뷰 H5 에 포 함 된 내용 은 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!