애플릿에서 H5 페이지로 이동하는 방법에 대한 간략한 분석? (예시분석)

애플릿에서 H5 페이지로 이동하는 방법은 무엇입니까? 다음 글에서는 WeChat 애플릿H5 페이지로 이동하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

WeChat 미니 프로그램: 개발 방식은 웹페이지와 유사하지만 실제로는 WeChat 자체 개발한 브라우저에서만 실행할 수 있는 특수한 웹페이지입니다. WeChat Browser 제공;

H5 페이지: 일반 브라우저에서 실행되는 실제 웹 애플리케이션입니다. 브라우저마다 미묘한 차이가 있지만 일반적으로 WeChat 브라우저를 지원할 수 있는 브라우저이기도 합니다. 실제 웹 애플리케이션.

그래서 WeChat 애플릿과 H5 페이지 사이를 이동할 수 있지만 이 점프는 WeChat 브라우저에 의해 엄격하게 제어되므로 이러한 제어에 무엇이 포함되는지 이해하는 것이 필요합니다.

H5 페이지의 도메인 이름: 이전해야 하는 H5 페이지의 URL이 https://www.mysite.com/h5page라고 가정하면 여기에 언급된 도메인 이름은 입니다. www.mysite.com을 읽어보세요. 이 URL은 https여야 합니다. 웹사이트에 SSL을 추가하지 않은 경우 먼저 인증서를 신청하세요. 공개적으로 적용한 인증서는 자체 서명할 수 없으며 WeChat에서는 이를 인식하지 못합니다! )https://www.mysite.com/h5page，那么这里所说的域名就是www.mysite.com，另外你没有看错，这个URL必须是https，如果你还没有为你的网站加上SSL，那么就先去申请一个证书吧（注意必须是公开申请的证书，不能是自签名的，微信不认哦！）

好了，这些都准备好了，让我们开始开发一个小例子。

由于web-view组件是一个全屏组件，不能和其它小程序组件合用，因此需要独立占据一个页面，所以我们到例子就是在小程序的A页面加一个链接，跳转到B页面，然后在B页面使用web-view组件来加载H5页面。

A页面

<view class="answerer flex-wrp" bindtap=&#39;jumpToH5&#39;>
        <view class="avatar flex-item">
            <image src="/images/logo-small.jpg"></image>
        </view>
        <view class="answerer-info flex-item">
            <text class="answerer-name">文章标题</text>
            <text class="answerer-des">文章摘要</text>
        </view>
        <view class="follow flex-item">
            <text>十 关注</text>
        </view>
</view>

jumpToH5: function () {
    wx.navigateTo({
      url: '/pages/B'
    })
  },

B页面

<web-view src="{{link}}" bindmessage="getMessage"></web-view>

  data: {
    link: "https://www.mysite.com/h5page"
  },

这时候当你满怀希望的点击链接时，会出现第一个坎：未绑定网页开发者

这是什么鬼，原来使用web-view组件并不是啥人上来就允许使用的，这时候需要第一个授权，就是授权开发者使用该组件。这里比较扯淡的是虽然这个组件是小程序使用的，但并不能在小程序开发号里面设置，而必须在订阅号或者服务号中进行设置，网络上经常能够查到的下面这个截图只能登录订阅号或者服务号才能看到。

在这里设置绑定了开发者的微信号以后，我们终于可以使用web-view组件了，不过这时候又出了新问题： 不支持打开非业务域名

原来并不是什么网址拿来就可以设置跳转的，你的小程序中就不能直接跳转到百度上去，小程序能够跳转的域名必须在业务域名中进行注册，总算这次是在小程序开发号里面设置了，但注意在服务号的设置里也有业务域名这个设置，不要搞混了（话说微信起名也太没有想象力了，简直是一坨浆糊）。

设置好了这个业务域名，满心欢喜地打开小程序，点击链接，What！又来，这次的问题变成了：redirect_uri参数错误

这时候控制权已经从小程序转移到了H5页面，但微信页面跳转内部的机制比较复杂，涉及到了OAuth认证之类的，所以这个错误已经是H5页面报的了，这就需要到H5页面关联的服务号中去进行设置，这次设置的项目叫做网页授权域名

자, 모두 준비되었습니다. 간단한 예제 개발을 시작하겠습니다.

web-view 구성 요소는 전체 화면 구성 요소이며 다른 미니 프로그램 구성 요소와 함께 사용할 수 없으므로 별도의 페이지를 차지해야 하므로 이 예에서는 페이지에 대한 링크를 추가합니다. 미니 프로그램의 A를 클릭하고 B 페이지로 이동한 다음 B 페이지의 web-view 구성 요소를 사용하여 H5 페이지를 로드합니다.

A페이지

rrreeerrreee

B페이지rrreeerrreee
이때 희망을 품고 링크를 클릭하면 첫 번째 관문이 나타납니다: 언바운드 웹 개발자
이게 대체 뭐죠? 저는 웹을 사용했습니다. -view 컴포넌트는 아무나 사용할 수 없습니다. 이때 개발자에게 해당 컴포넌트를 사용할 수 있는 권한을 부여하는 첫 번째 권한이 필요합니다. 여기서 우스꽝스러운 점은 이 구성요소가 미니 프로그램에서 사용되지만 미니 프로그램 개발 계정에서는 설정할 수 없고 구독 계정 또는 서비스 계정에서 설정해야 한다는 것입니다. code>, 인터넷에서 흔히 볼 수 있는 아래 스크린샷은 <code>구독 계정 또는 서비스 계정에 로그인해야만 볼 수 있습니다.

at 여기에 개발자의 WeChat 계정을 바인딩한 후 마침내 web-view 구성 요소를 사용할 수 있지만 이때 새로운 문제가 발생합니다. 비업무 도메인 이름을 여는 것은 지원되지 않습니다

🎜아닌 것으로 밝혀졌습니다 URL입니다. 미니 프로그램이 Baidu로 직접 이동할 수는 없습니다. 미니 프로그램이 이동할 수 있는 도메인 이름은 마지막으로 비즈니스 도메인 이름에 등록되어 있어야 합니다. 미니 프로그램은 개발 계정에 설정되어 있는데 서비스 계정 설정에 비즈니스 도메인 이름 설정도 있으니 헷갈리지 마세요. 너무 상상력이 부족해서 엉망일 뿐입니다.) 🎜🎜이 비즈니스 도메인 이름을 설정한 후 기쁘게 미니 프로그램을 열고 링크를 클릭하고 뭐! 이번에도 문제는 다음과 같습니다:redirect_uri 매개변수 오류🎜🎜🎜🎜이제 제어권은 애플릿에서 H5 페이지로 이전되었지만 WeChat 페이지 점프의 내부 메커니즘은 OAuth 인증 등을 포함하여 더 복잡하므로 이 오류는 이미 H5 해당 페이지가 신고되었으므로, H5 페이지와 연계된 서비스 계정에서 설정해야 합니다. 이번에 설정한 항목은 웹페이지 공인 도메인 이름입니다. , 공식 계정에 설정된 기능입니다. 설정 🎜🎜🎜🎜🎜에서 리디렉션이 필요한 도메인 이름을 추가하면 드디어 디버거에 나타나는 H5 페이지를 볼 수 있습니다! 🎜🎜마지막으로 WeChat 공개 플랫폼의 세 가지 계정 유형 간의 차이점을 대중화해 보겠습니다🎜🎜🎜🎜서비스 계정🎜: 가장 많은 웹 개발 인터페이스와 JS 개발 인터페이스를 지원하며 가장 일반적인 애플리케이션 개발 계정입니다. 계정🎜: 기사 게시에 사용되며 개발 인터페이스가 상대적으로 적고 많은 기능이 지원되지 않습니다. 기사 게시를 위한 가장 어리석은 계정입니다. 🎜🎜미니 프로그램🎜: 미니 프로그램 애플리케이션 전용 개발 계정입니다. 미니 프로그램 개발에는 계정 유형의 처음 두 가지 설정으로 이동해야 하는 설정이 많이 있습니다. 🎜🎜🎜【관련 학습 추천: 🎜미니 프로그램 개발 튜토리얼🎜】🎜

위 내용은 애플릿에서 H5 페이지로 이동하는 방법에 대한 간략한 분석? (예시분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!