从浏览器运行 VodaPay 小程序 Web 视图应用程序时，我无法访问我的库

Question

我正忙于使用 VodaPay 小程序开发一个小程序，并在 H5 网页视图中渲染我的网页。

我已导入 CDN，它在模拟器中以及在设备上的 VodaPay 超级应用程序上运行时都能正常工作。但在设备上运行时出现以下错误：

my is not defined

我该如何防止这种情况发生？以及为什么会出现这个问题呢？

<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<script>

  // Sends message to VodaPay Mini-Program.
  my.postMessage({name:"test web-view"});

  // Did receive message from VodaPay Mini-Program.
  my.onMessage = function(e) {
    console.log(e); // {'sendToWebView': '1'}
  }
</script>

Answer 1

仅当您的迷你应用程序在设备上或模拟器中运行时，Web-View cdn 才会运行。因此有必要首先检查 my. 库可用，以便确定它在小程序上下文中运行。

<!-- MINI: Used to communicate with mini app. Have to include the script body here otherwise we get my. not recognized errors <START>-->
<script src="https://appx/web-view.min.js"></script>
<script id="messageSend">
    function sendMessage(data) {
        //If not in mini app webview then my. throws errors
        try {
            my.postMessage(data);
        } catch(error) {
        //Prevent my. from throwing error in browser
        }
    }
</script>

<script id="messageReceive">
    try {
        //Store message in session storage, and then change messageReceiveListener innerText to trigger a mutation event to notify that a message has arrived.
        my.onMessage = function (e) {
            sessionStorage.setItem('message',JSON.stringify(e)); 
            document.getElementById('messageReceiveListener').innerText = e; 
        }
        sessionStorage.setItem('inMiniProgram',true);
    } catch(error){          //Prevent my. from throwing error in browser          
            sessionStorage.setItem('inMiniProgram',false);        
    }      
</script>
<input id="messageReceiveListener" hidden></input>
 <!-- MINI:<END> -->