Abstract

This paper records one of the many problems encountered by the rookie author in the process of using UniApp to develop the project: the pit encountered when developing the communication function between Webview and H5 page of Alipay small program, and the phenomenon of h5 page redirecting to H5 page opened by WebView for the first time in postMessage communication.

Teasing: Compatible, what a nice word.

preface

Development tool: UniApp 3.1.18; Alipay small program developer tool 2.0 Stable

The body of the

The content is not much, this article is only a brief introduction.

Using uniapp development pay treasure to small programs, the webview after open the h5 page, can use @ message event and webViewContext postMessage realize two-way communication. Here is the code:

The code for the small program side is as follows:

<web-view :src="src" @message="getMessage" ></web-view>
Copy the code
let webViewContext;

export default {
    data() {
        return {
            src: ' '}; },methods: {
        /** * Receive message */
        getMessage(e){
            console.log("getMessage: ", e);
            let method = e.detail.method;
            let param = e.detail.param;

            if(! webViewContext) { webViewContext = my.createWebViewContext(e.target.id); }if (method == 'login') {
                // todo something
            }

            if (method == "fedLogout") {
                // todo something
            }

            if (method == "close") {
                // todo something}},/** * Send a message */
        postMessage({method, data, code=200, msg}){
            webViewContext.postMessage({
                method: method,
                data: data,
                code: code,
                msg: msg }); }}};Copy the code

If you’re careful, you might notice that there’s no “this.” in front of webViewContext, there’s no mistake, it’s intentional. Why do I write that? I’ll explain that later.

Here is the code for the H5 side:

<! DOCTYPEhtml>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            // Introduce Alipay JSSDK
            if (navigator.userAgent.indexOf('AlipayClient') > -1) {
                document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
            }
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <! -- built files will be auto injected -->
    </body>
</html>
Copy the code
function login () {
    return new Promise((resolve, reject) = > {
        /**
         * 和小程序通信
         */
        my.postMessage({
                method: "login"
        });

        /** * listen on the applet */
        my.onMessage = function(response) {
                console.log(response);
                if (response.method == "login") {
                        if (response.code == 200) {
                                resolve(response.data);
                        } else{ reject(response.msg); }}}; }); }Copy the code

Now, let me show you why we don’t put webViewContext in data, we declare it separately.

The reason is that if you put webViewContext in data, when the webViewContext changes, it will trigger the vUE page to re-render, even if the webViewContext is not in the page element. Of course, not just webViewContext, but any field that can change, you can’t put it in data. This pit is wasting my time!!

The author has not found an elegant solution to this problem. To solve this problem, the webViewContext and other fields are directly outside. If there are big guys who know how to deal with, please do not hesitate to advise.

Afterword.

A little digression.

Nine times out of ten, life is unpleasant. No matter how hard you work in one area, people will always criticize you for being inadequate in other areas. If you try to help someone out, you won’t necessarily be rewarded.

You still have to make yourself happy. Unlike me, I only love the author.