The applet opens the H5 page through webView and passes parameters (including webView business domain name configuration), and the H5 page returns to the applet and realizes parameter passing

The applet is embedded with webview to realize jumping and passing parameters
1. The applet opens the H5 page through the webView and passes parameters
2. H5 receives the parameters passed by the applet, H5 returns the applet and implements parameter passing, and the applet receives H5 parameters

1. The applet opens the H5 page through webView and passes parameters

In the applet, the H5 page is generally opened through the webview
common problem:
1. To open the H5 page through the webview of the applet, you need to configure the business domain name, which needs to be configured on the public platform of the applet. 2.
When opening the H5 page in the applet, it is opened with the built-in browser of WeChat; so the most common problem is , after the page is opened, the cache of WeChat’s built-in browser cannot be cleared, resulting in the content of the H5 page not being updated when the applet is opened. For this problem, you can use H5 links.

1. Business domain name

insert image description here

WeChat developer tools, you can enable non-verified business domain names, which is convenient for testing and use

insert image description here

The developer mode can be turned on for mobile phone debugging, and the business domain name is not verified, which is convenient for testing

insert image description here
Before the mini program project goes online, you must configure the business domain name, configure the business domain name
Business domain name configuration method:
(1), open the mini program public platform

(2) To configure the business domain name, you need to put the configuration file in the root directory of the domain name, and then verify

insert image description here

2. Open the H5 page in the applet and solve the problem that the cache cannot be cleared

Method: By splicing the timestamp behind the link, the link will be a different link every time it is loaded, which can solve the problem that the built-in browser cache of WeChat cannot be cleared

<template>
	<view>
		<web-view :src="src"></web-view>
	</view>
</template>
<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				src:"https://xxx/userLogin/index.html#/login?t="+new Date().getTime(),
			};
		}
	}
</script>
<style lang="scss">
</style>

2. H5 receives the parameter passed by the applet, H5 returns the applet and realizes the parameter pass, and the applet receives the parameter passed by H5

1. On the H5vue page, the created () method receives the parameters of the applet

  created () {
    
    
    this.mobileMode = this.$route.query.mobileMode
    this.mobileType = this.$route.query.mobileType
    this.code = this.$route.query.Code
    this.appid = this.$route.query.appId
  },

2. H5 returns to the applet, need to install WeChat sdk

 npm install weixin-js-sdk –save

Introduce wxsdk into the page

import wx from 'weixin-js-sdk'

insert image description here

In the success callback method, use the wxsdk method to implement the H5 return applet and pass parameters
Note: If there are many parameters, they can be converted to JSON format and passed

const personForm = JSON.stringify(this.personList)
wx.miniProgram.navigateTo({
    
    
  url: '/pages/my/load?personForm=' + personForm, // 小程序地址
  success () {
    
    
    console.log('question success')
  },
  fail (error) {
    
    
    console.log(error)
  }
})

3. Receive the H5 return parameter in the applet, and receive it in the applet onLoad

onLoad(option) {
    
    
	this.personData = JSON.parse(option.personForm);
	},