【代码入门】如何在mugeda中,实现H5作品和外部 网页之间实现数据连接

先看案例

微信截图_20161111164116.png


这个案例核心点在于,如何将在H5中输入的 数据传递到外部网页中。本人曾尝试过无代码去实现,但是结果不是很理想,没能达到在两者之间实时传递数据的效果 。
最终做出这个案例觉得还是用代码比较方便一点。用代码的话,其实方法很简单
逻辑分析,该类案例简单点说就是如何将输入的信息与查询的网址合成一个链接,然后点击按钮就可以打开这个合成后的链接,如果理解了这个逻辑的话,我想应该下面的制作就不会太难了
切入正题:
首先、要了解相关查询网站的规则,一般都是查询网站查询时都会在网址后面附带输入信息的,(需要先查询一下看一下查询后网址变化,并复制)举个栗子:
QQ截图20161111165544.jpg


截图为某天气查询网站查询某地的天气情况"id="后面的数据即使我们需要传递的数据
第二步、在舞台出入一个文本输入框(sr) ,一个文本框(addr)和一个按钮(btn)
注:括号内为 元素名称,可自定义,建议采用英文格式
第三步、将输入框内的数据传输转化为查询链接传递给 文本 (此项为重点)
我们以电话号码查询为例,查询链接为http://shouji.supfree.net/fish.asp?cat=数据
这里我们将输入框中的数据带入即可,即addr=http://shouji.supfree.net/fish.asp?cat={{sr}} 


微信截图_20161111170614.png



注意:一定不要忘了“http://”这个前缀。
剩下就是见证奇迹的时刻了 :
微信截图_20161111170904.png


在上方代码编辑框输入
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener("renderReady", function () {
var scene = this.scene;
var btn = scene.getObjectByName("btn");
btn.addEventListener("inputend", function (event) {
var addr = scene.getObjectByName("addr”);
window.location.href=addr.text;
});
});

截图.png


注上方括号内下划线所代表的即为上方所命名的元素
至此,所有结果就已完成 。
ps.如果还需要增加其他查询想的话,在复制一段中间代码(下图),并对元素(下图标红部分)重新命名即可。
截图_(1).png



了解了以上的操作后,我们就可以在木疙瘩上实现更多的H5和网页之间的数据传递了,比如 :天气查询、火车票查询等查询类的H5制作,甚至是讲述距提交到自己的数据库中,更多想不到等待着你去探索.....
本教程主要针对无代码基础用户,代码大神勿喷。

8 个评论

亲测不行 打开404
大神,能介绍下你的具体操作步骤吗
复制代码的话,注意一下格式 ,还有就是元素的命名及网址前面不要忘了“http://“
具体的操作步骤都在上面了,建议看的时候仔细一点,不要忘了细节及注意事项
哥 能加下你的QQ吗
代码最后四行 提示未闭合 是出错了吗
搞定了 实现了 谢谢大神
不用客气,有时候还是要多看几遍教程才会知道细节是多么重要

要回复文章请先登录注册