Shulou(Shulou.com)06/02 Report--

How to jump from the mini program to the H5 page, in view of this problem, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

WeChat Mini Programs: although the development method is similar to web pages, it is actually a special web page that can only run in the browser developed by Wechat itself. All the functions it can use must be provided by Wechat browser.

H5 page: this is a real web application that runs in a general-purpose browser. Although various browsers are slightly different, they are generally the same. Wechat browser is also a general-purpose browser that can support real web applications.

This makes it possible to jump between WeChat Mini Programs and H5 pages, but this jump is strictly controlled by Wechat browser, so it is necessary for us to understand what these controls include.

The domain name where the H5 page is located: suppose you need to transfer the H5 page URL to https://www.mysite.com/h6page, then the domain name mentioned here is www.mysite.com. In addition, you have read it correctly, the URL must be https. If you have not added SSL to your website, apply for a certificate first (note that it must be a certificate applied publicly, not self-signed, Wechat does not recognize it!) )

All right, all of this is ready, so let's start developing a small example.

Because the web-view component is a full-screen component, it cannot be used with other Mini Program components, so we need to occupy a page independently, so our example is to add a link to page An of Mini Program, jump to page B, and then use the web-view component to load the H5 page in page B.

A page

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

B page

Data: {link: "https://www.mysite.com/h6page"}

At this point, when you click on the link hopefully, there will be the first hurdle: unbound web developers

It turns out that the use of web-view components is not allowed by anyone, and the first authorization is required, that is, to authorize developers to use the component. What's ridiculous here is that although this component is used by Mini Program, it cannot be set in the Mini Program development account, but must be set in Subscription account or the service number. The following screenshot that can often be found on the network can only be seen by logging in to Subscription account or the service number.

After setting up the developer's WeChat account bound here, we can finally use the web-view component, but at this time there is a new problem: opening non-business domain names is not supported.

The original is not what URL can be set to jump, your Mini Program can not jump directly to Baidu, Mini Program can jump to the domain name must be registered in the business domain name, finally this time is set in the Mini Program development account, but note that in the service number setting there is also a business domain name setting, do not get confused (in other words, Wechat name is too unimaginative, it is a paste).

Set up this business domain name, open Mini Program happily, click on the link, What! Again, this time the problem becomes: redirect_uri parameter error

At this time, control has been transferred from Mini Program to H5 page, but the internal mechanism of Wechat page jump is more complex, involving OAuth authentication and so on, so this error has already been reported by H5 page, which needs to be set up in the service number associated with H5 page. This setting project is called web page authorization domain name, which is in the function settings of official account settings.

After adding the domain name that needs to be redirected, you can finally see the H5 page appear on the debugger!

Finally, popularize the difference between the three types of accounts on Wechat public platform.

Service number: supports the most Web development interfaces and JS development interfaces, and is the most regular application development account

Subscription account: used for posting articles, there are relatively few development interfaces, and many functions are not supported. It is the most stupid article publishing account.

Mini Program: the exclusive development account of the Mini Program app, which only supports the development of Mini Program, and many settings must be set in the first two types of accounts.

This is the answer to the question about how to jump to the H5 page from a small program. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.