The h5 generated by uniapp interacts with the native flutter

        Recently I received a request to make some h5 pages with the app. It just so happens that h5 is generated by uniapp. It is somewhat different from ordinary h5 in use, so here is a summary of how to transfer data to flutter using h5 pages generated by uniapp.

1 - Uniapp calls flutter method

let param = {a:1,b:2}
kjToLessonSubmit.postMessage(JSON.stringify(param))

The kjToLessonSubmit here is a method written by flutter.

2 - How flutter calls uniapp

It is worth noting here that when we use uniapp to write code, the method is written in methods, but flutter cannot call the function we wrote in methods. At this time, you need to write the function under the window.

window.fluGetUserInfo = (data) => {
				this.fluGetUserInfo(data)
			}

What I used here is to let him call the method I wrote in method, but here you can also operate directly in it.

[Note] Please note that what I write here is an arrow function, so this can point to the current method. If you do not use the arrow function, remember to change the point of this.

[Note again: About url passing parameters]

When passing parameters through url in uniapp, we can get the content in the option attribute of onload. However, if the app jumps to the h5 page, the parameters cannot be obtained through option. We need to use window.location.href to deconstruct the parameters. Paste Check out my code

let urlRes = window.location.href.split('?')[1]?.split('&')
let finRes = {}
urlRes?.forEach(item => {
	finRes[item.split('=')[0]] = item.split('=')[1]

})
this.option = finRes

At this time, what is our url in finRes? The parameters brought later can be used normally in the interface.       

The interaction with flutter is completed here. Just record it briefly. Later, you will have time to make up for how flutter calls methods in h5.