支付宝小程序开发文档ajax调用,支付宝小程序web-view与h5交互（坑）

小程序端代码写法

axml文件代码：

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

if (navigator.userAgent.indexOf('AlipayClient') > -1) {

document.writeln('

}

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 (

{this.state.onMsg}

this.myInput = e}/>

{

this.postMessage(this.myInput.value)}

}>发送

this.getEnv()}>获取

);

}

getEnv=()=>{

// window.my.getEnv(function(res) {

// console.log(res.miniprogram) // true

// });

};

postMessage=(postData) => {

// 网页向小程序 postMessage 消息

console.log('发送消息:'+ postData);

window.my.postMessage({sendMsg:postData})

};

}

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

在支付宝真机运行时能够正确打开测试版h5网页需要设置如下：

真机运行跟模拟器运行接收到的数据结构不一致

模拟器

// let onMessage = JSON.parse(e.res.data).name;

真机

let onMessage = e.name;

小程序直接向h5发送消息h5无法正确获取，真机可以正常获取数据