작은 프로그램에 H5를 삽입하는 방법 소개

풀어 주다: 2020-03-31 09:32:18
앞으로
4736명이 탐색했습니다.

작은 프로그램에 H5를 삽입하는 방법 소개

참고:

애플릿은 쿠키를 지원하지 않습니다. 내장된 h5는 쿠키를 지원하지만 WeChat 웹 쿠키와 공존하며 서로 영향을 미칩니다.

미니 프로그램은 https만 지원합니다.

미니 프로그램에 H5가 포함된 도메인 이름은 WeChat 백엔드에서 신뢰할 수 있는 도메인 이름으로 설정되어야 합니다.

WeChat SDK 버전 1.4를 사용하면 1.0의 일부 기능은 지원되지 않습니다. https: //res.wx.qq.com/open/js/jweixin-1.4.0.js

1. 미니 프로그램 환경 결정

작은 프로그램에 H5를 삽입하는 방법 소개

위챗의 이전 버전은 미니 프로그램의 지원 여부에 따라 다릅니다. H5를 지원하므로

wx.miniProgram.getEnv(function(res) {
     if (res.miniprogram) {
         //这里才是小程序环境
         //但是这个方法是异步的请注意
     }
로그인 후 복사

가 필요하거나 미니 프로그램 개발을 계속하도록 하십시오. H5 페이지를 열 때 URL을 통해 필드를 H5에 전달하여 해당 필드가 미니 프로그램 환경인지 확인합니다.

2. 미니 프로그램 공유

미니 프로그램 문서:

사용자는 공유 시 현재 웹 보기의 URL을 얻을 수 있습니다. 즉, onShareAppMessage 콜백에서 webViewUrl 매개변수를 반환합니다.

그러나 실제 기계 실습에서는 미니 프로그램 개발의 피드백에 따라 일부 시나리오에서 URL을 얻을 수 없으므로 최종적으로 postMessage 메소드를 통해 공유 정보를 전달합니다.

wx.miniProgram.postMessage({ data:{
      active_shareTit:分享语言,
      active_shareimg:分享图
      active_shareurl: 分享链接
}})
로그인 후 복사

3. 쿠키.

애플릿은 URL을 통해 필수 매개변수를 가져오며, H5는 이를 가로채서 쿠키에 설정합니다.

4. H5 점프 미니 프로그램

Href를 사용하여 점프할 수 없습니다! URL은 "/page/.." 형식이며 http 프로토콜을 포함할 수 없습니다. 다음 세 가지 방법을 사용해야 합니다.

navigateTo 현재 페이지를 유지하고 미니 프로그램 페이지로 이동

redirectTo 현재 페이지 닫기 그리고 미니 프로그램 페이지로 점프합니다(돌아갈 때 현재 페이지로 돌아갈 수 없습니다)

switchTab은 미니 프로그램 탭바 페이지로 점프합니다(하단 탐색 기능이 있는 미니 프로그램 페이지, NavigateTo 또는 RedirectTo를 사용하면 이 페이지가 실패합니다!)

데모:

wx.miniProgram.navigateTo({
    url: '/pages/prod/prod?参数1=大大说&参数2=qweqw'
})
로그인 후 복사

5, 미니 프로그램이 H5로 점프

src

 <web-view src="https://mp.weixin.qq.com/qq.html"></web-view>
로그인 후 복사

에서 H5에 매개변수를 전달할 수 있습니다. 권장: "Mini 프로그램 개발 튜토리얼"

위 내용은 작은 프로그램에 H5를 삽입하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿