|
编程学习之旅已满两个月，每天都像在探索神秘的数字迷宫，不断发现新惊喜。今天深入钻研的网页与程序交互，更是让我大开眼界 —— 原来看似独立的网页和程序，竟能像好友般默契 “对话”，这种奇妙的技术互动，瞬间点燃了我的求知欲！
网页给程序发消息
在 aardio 里，web.View 控件就像是网页和程序之间的“信使”。在网页上设置一个按钮，点击它就能触发消息发送。程序通过 wb.external 来“签收”这些消息，只要符合预设规则，程序就会立刻响应。简单文字、复杂数据结构都能传递。比如把包含姓名、年龄、爱好的对象发给程序，程序收到后整理展示，就像打开装满信息的包裹。
[AAuto] 纯文本查看 复制代码 import win.ui;
import web.view;
var winform = win.form(text="网页与程序交互示例";right=759;bottom=469)
winform.add(webView={cls="webView";left=10;top=10;right=749;bottom=459;z=1})
var wb = web.view(winform);
wb.external = {
sendMessageToApp=function(message) {
win.msgbox("收到网页消息：" + message)
}
}
wb.html = /**
<body style="white-space: pre;"><button
>发送消息给程序</button>
**/
winform.show();
win.loopMessage();
程序给网页传信息
程序给网页传递信息依靠 web.View 控件的 eval 方法，像一把钥匙打开网页里 JavaScript 代码的“大门”。程序用 eval 执行网页里的特定函数并传消息，网页接收到后展示内容。传递复杂数据时，程序先把数据转成 JSON 字符串，网页收到再解析展示，互动感十足。
[AAuto] 纯文本查看 复制代码 import win.ui;
import web.view;
/*DSG{{*/
var winform = win.form(text="网页与程序交互示例";right=759;bottom=469)
winform.add(
webView={cls="webView";left=10;top=10;right=749;bottom=459;z=1}
)
/*}}*/
var wb = web.view(winform);
var data = {
title: '文章标题',
content: '这是文章的内容'
};
wb.external ={
showDataFromApp = function() {
// 把数据转换为 JSON 字符串传递给网页
wb.eval('showDataFromApp(' + web.json.stringify(data) +')');
}
}
wb.html = /**
<body>
<script>
function showDataFromApp(data) {
// 在网页里显示收到的数据
alert('收到程序数据：标题 - ' + data.title + '，内容 - ' + data.content);
}
aardio.showDataFromApp()
</script>
</body>
**/
winform.show();
win.loopMessage();
双向交互实战
最后实现了双向交互。程序按钮点击后发送用户信息，网页收到立刻展示；网页按钮点击发感谢消息，程序通过 wb.external 接收并显示。看着代码实现有来有回的对话，特别有成就感。这两个月学的知识融会贯通，更期待之后的学习了！
[AAuto] 纯文本查看 复制代码 import win.ui;
import web.view;
var winform = win.form(text="网页与程序交互综合示例";right=759;bottom=469)
winform.add(button={cls="button";text="发送用户信息到网页";left=160;top=5;right=280;bottom=35},
webView={cls="webView";left=10;top=50;right=749;bottom=459;z=2})
var wb = web.view(winform);
wb.external = {
sendThanksMessage = function(message) {
win.msgbox("收到网页消息：" + message);
}
}
winform.button.oncommand = function(id,event){
var userInfo = {username: '李四', level: 3};
wb.eval('showUserInfo(' + web.json.stringify(userInfo) + ')');
}
wb.html = /**
<body><button>发送感谢消息给程序</button>
<div id="userInfo"></div><script>
function showUserInfo(userInfo) {
document.getElementById('userInfo').innerHTML = '用户名：' + userInfo.username + '，用户等级：' + userInfo.level;
}
function sendThanksMessage() {
aardio.sendThanksMessage('感谢程序的信息！');
}
</script>
</body>
**/
winform.show();
win.loopMessage();
今天的学习收获满满，对编程的兴趣又增加了，明天继续探索！
| 
发表于