支付宝小程序web-view与h5交互(坑)
发布于 10 个月前 作者 12345 1779 次浏览 来自 前端进阶

小程序端代码写法

  1. axml文件代码: <view> <web-view id="web-view-1" onMessage="sendToH5Message" src={{webUrl}}></web-view> </view>

  2. JS文件代码: Page({ data: { webUrl: String, }, sendToH5Message(e) { my.alert({ content: JSON.stringify(e.detail), }); console.log(‘E:’ + e.detail); }, onLoad(query) { ///接收到的值 console.log(query.webUrl); this.setData({ webUrl: query.webUrl, }) this.webViewContext = my.createWebViewContext(‘web-view-1’); }, onReady() { console.log(“onReady”); this.webViewContext.postMessage({ name: ‘1’ }); } }); h5页面代码,react

  3. index.html文件里引入,https://appx/web-view.min.js仅在支付宝客户端打开h5页面引入才有效

<script> if (navigator.userAgent.indexOf('AlipayClient') > -1) { document.writeln('<script src="https://appx/web-view.min.js" rel="external nofollow" rel="external nofollow" ' + '>' + '<' + '/' + 'script>'); } </script>
  1. app.js代码

    componentDidMount() { // 接收来自小程序的消息。 window.my.onMessage= function (e) { console.log(‘收到消息:’+ e); window.my.alert({ content:e.name, }); // let onMessage = JSON.parse(e.res.data).name; let onMessage = e.name; this.setState({ onMsg: onMessage }); }.bind(this); }

render() { return (

<label>{this.state.onMsg}</label> <input placeholder={“向小程序发送消息”} ref={e => this.myInput = e}/> <button onClick={()=>{ this.postMessage(this.myInput.value)} }>发送</button> <button onClick={()=>this.getEnv()}>获取</button>
); }

getEnv=()=>{
    // window.my.getEnv(function(res) {
    //     console.log(res.miniprogram) // true
    // });
};

postMessage=(postData) => {
    // 网页向小程序 postMessage 消息
    console.log('发送消息:'+ postData);
    window.my.postMessage({sendMsg:postData})
};

}

坑点: 支付宝小程序模拟器运行结果与真机运行结果相差巨大!一切以真机运行为准

  1. 在支付宝真机运行时能够正确打开测试版h5网页需要设置如下: 3321BED6-322F-452F-B914-25E7FC5EC624.png
  2. 真机运行跟模拟器运行接收到的数据结构不一致 模拟器 // let onMessage = JSON.parse(e.res.data).name; 真机 let onMessage = e.name;
  3. 小程序直接向h5发送消息h5无法正确获取,真机可以正常获取数据
2 回复

问一下,第三点,朋友怎么解决的啊,H5无法获取信息

@milolijin 建议h5页面先向小程序发送一条消息,小程序收到后再向h5发送消息,有时候会出现页面多次跳转收不到消息的问题

回到顶部