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

This article mainly introduces how to achieve interaction between WeChat Mini Programs and Html, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The realization method of interaction between WeChat Mini Programs and Html

WeChat Mini Programs visits html pages by using WebView in Mini Program as the web page hosting container, and loads html pages by configuring the src attribute of WebView. When html returns to Mini Program, you need to refer to Mini Program class library and call the specified API to redirect.

At present, the interaction between Mini Program and html is the data transmission through the parameter splicing of the jump link.

Mini Program jumps to html

1. For Mini Program to jump to html, you need to configure the jump address to the whitelist of the specified domain name.

2. Add a signature file under the root directory of the domain name server configured in the whitelist, such as: mAPifgWWWz.txt, content such as: e1756a5045b2504b499cc1cce1d2c605

3. Add the webView component to the page and configure the address:

Index.wxmlindex.js data: {urlPath:' https://visualstreet.cn/website/index.html?path=web-view&mytest=showWebView'}

When Mini Program calls html, you can write the html address in the src of WebView

Eg: https://res.wx.qq.com/index.html;

When Mini Program calls html and expects login status, login information needs to be passed to html as parameters.

Eg: https://res.wx.qq.com/index.html?user=111&unionId=222;

The html page _ window.onload will trigger the acquisition of parameters:

_ window.onload = function () {console.log_ (document.location); console.log_ (window.location); document.getElementById ("txtMsg"). InnerText=_document.location.href; document.getElementById ("txtDetail"). InnerText=window.__wxjs_environment;}

And can be passed through

Window.__wxjs_environment

Get the source of Mini Program

Html jumps to Mini Program

The html page in webView can jump back to the specified Mini Program page, that is, the html page can go through a series of operations to return the result parameters to Mini Program.

To return Mini Program using html, you need to reference the Mini Program class in the returned html page.

Call the specified API in Mini Program class to return

Wx.miniProgram.navigateTo () wx.miniProgram.navigateBack () wx.miniProgram.switchTab () wx.miniProgram.reLaunch () wx.miniProgram.redirectTo () wx.miniProgram.postMessage () wx.miniProgram.getEnv ()

When html jumps back to Mini Program, you can obtain parameter information on this page by going to Mini Program to specify router.

Eg: wx.miniProgram.navigateTo ('login/index?htmlvalue=12dasf&htmlvalue2=231') Thank you for reading this article carefully. I hope the article "how to interact between WeChat Mini Programs and Html" shared by the editor will be helpful to you. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.