A brief analysis of how to jump from applet to H5 page? (Example analysis)

How to jump from applet to H5 page? The following article will introduce to you how to jump to the H5 page in WeChat Mini Program. I hope it will be helpful to you!

WeChat Mini Program: Although the development method is similar to a web page, it is actually a self-developed program that can only run on WeChat A special web page in the browser, all functions it can use must be provided by WeChat Browser;

H5 page: This is a real web application, running in a general browser , although various browsers have subtle differences, they are generally the same. WeChat Browser is also a general browser that can support real web applications.

Therefore, it is possible for us to jump between the WeChat applet and the H5 page, but this jump is strictly controlled by the WeChat browser, so it is necessary for us to understand that these controls include Which.

The domain name where the H5 page is located: Suppose the URL of the H5 page you need to transfer is https://www.mysite.com/h5page, then the domain name mentioned here is www .mysite.com, and you read that right, this URL must be https. If you haven’t added SSL to your website, then apply for a certificate first (note that it must be Publicly applied certificates cannot be self-signed, WeChat will not recognize them!)

Okay, these are all ready, let's start developing a small example.

Since the web-view component is a full-screen component and cannot be used with other mini program components, it needs to occupy a separate page, so our example is to add one to the A page of the mini program link, jump to page B, and then use the web-view component on page B to load the H5 page.

A page

<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 page

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

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

At this time, when you click on the link with full hope, the first page will appear. One hurdle: Unbound web developer

What the hell is this? It turns out that using the web-view component is not allowed by anyone who comes up. Yes, the first authorization is required at this time, which is to authorize the developer to use the component. What's more ridiculous here is that although this component is used by the mini program, it cannot be set in the mini program development account, but must be set in the subscription account or service account, network The screenshot below that can often be found on the Internet can only be seen by logging in to Subscription Account or Service Account.

After setting and binding the developer’s WeChat account here, we can finally use the web-view component, but this time it appears again New question: Opening non-business domain names is not supported.

It turns out that you can’t just use any URL to set up a jump. You can’t jump directly to Baidu in your mini program. Go up, the domain name that the mini program can jump to must be registered in Business Domain Name. Finally, this time it is set in the mini program development account, but pay attention to the settings in Service Account There is also a setting for business domain names, so don’t get confused (the naming of WeChat is too unimaginative, it’s just a mess).

After setting up this business domain name, I happily opened the mini program, clicked the link, What! Again, this time the problem became: redirect_uri parameter error

At this time, control has been transferred from the applet to the H5 page, but the internal mechanism of the WeChat page jump is relatively It is complicated and involves OAuth authentication and the like, so this error has already been reported on the H5 page. This requires setting up the service number associated with the H5 page. The item set this time is called Webpage authorized domain name, in the function settings of the official account settings

After adding the domain name that needs to be jumped, you can finally see the H5 page appearing in the debugger On!

Finally, let’s popularize the differences between the three types of accounts on the WeChat public platform

Service account: supports the most Web development interfaces and JS development interfaces, and is the most conventional Application development account;
Subscription account: Used for publishing articles, with relatively few development interfaces and not supporting many functions. It is the stupidest article publishing account;
小program: Exclusive development account for mini program applications. It only supports the development of mini programs. Many settings must be set in the first two types of accounts.

【Related learning recommendations: 小program development tutorial】

The above is the detailed content of A brief analysis of how to jump from applet to H5 page? (Example analysis). For more information, please follow other related articles on the PHP Chinese website!