今天来给大家讲解一下易语言&miniblink交互教程的第三课,也就是如何让易语言与Miniblink进行数据交互,相互传递参数。


1、用易语言调用JS

调用JS的方式很简单,只需要一句代码即可:

wke.运行JS (“ 这里填写文本型的JS代码 ”)

举个栗子:

wke.运行JS (“ alert('测试提示') ”)

易语言 python交互 易语言js交互_html




当然,也可以用这个方法来调用我们自己写的JS函数:

JS代码:

function e_1 () {
   alert('你成功调用了我'); 
}




易语言 python交互 易语言js交互_html_02

 



 




易语言代码为:




wke.运行JS (“e_1()”)

易语言 python交互 易语言js交互_html5_03

 

由此可知,wke.运行JS('参数') 的参数可以调用HTML页面中所有相关的JS代码以及我们所写的JS函数。

2、调用 JS 修改 HTML 页面内容




这部分相对会比较复杂,需要先了解JS或JQuery如何获取html页面中的内容才能实现,个人推荐用JQuery,毕竟原生的JS用起来比较繁琐

这部分与调用JS的方法一样,都是用到 wke.运行JS('参数') ,不一样的是,这部分需要对数据进行传参,可能会有点复杂。首先我们看一下易向HTML传参的代码:

HTML部分:

这部分主要是设置对应元素的ID,这次主要演示的是ID为 input_1 input 标签

<!DOCTYPE html>
<html>
	
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	</head>
	
	
	<body>
		<style>
			html,body{margin:0px;padding:0px}
			.windows{background-color:#e1e1e1;width:100%;height:100%;position:absolute;box-sizing:border-box;padding:60px}
			.title_black{width:100%;height:30px;background-color:#fff;line-height:30px;padding:0px 20px;box-sizing:border-box;}
			.div_item{width:100%}
			.div_item>p{width:100px;display:inline-block}
			.div_item>input{width:60%;display:inline-block}
			button{padding:15px}
		</style>
		<div class="windows">
			<div class="div_item">
				<p>内容1</p><input type="text" value="4869468585" id="input_1">
			</div>
			<div class="div_item">
				<p>内容2</p><input type="text" value="测试内容12894" id="input_2">
			</div>
			<br><br>
			<button>调用易子程序1</button>
			<button>调用易子程序2</button>
			<button>调用易子程序3</button>
			<button>调用易子程序4</button>
		</div>

		<script src="js/jquery-3.5.1.min.js"></script>
		<script>

			// 待易调用的JS函数1
			function e_1 () {
				alert('你成功调用了我');
			}

		</script>
	</body>
</html>



易语言部分:

wke.运行JS (“$('#input_1').val('” + 编辑框2.内容 + “')”)




如果你懂JS和JQuery,那么看完之后就了解原理了,原理其实很简单:$('#input_1').val("123") 这句代码的意思就是:将ID为 input_1 的元素内容修改为 123

这句代码对于的HTML为:

<input type="text" value="4869468585" id="input_1">




那么在易语言中我们就可以用一下代码来对HTML中的内容进行修改

wke.运行JS (“$('#input_1').val('” + 内容 + “')”)



3、调用 JS 获取 HTML 页面内容




获取HTML页面内容的代码和修改HTML的代码类似:

.版本 2

.子程序 _按钮1_被单击
.局部变量 jv, 长整数型
.局部变量 JS输出, 文本型

jv = wke.运行JS (“return $('#input_2').val()”)
JS输出 = JS到文本 (wke.全局执行 (), jv)

编辑框1.内容 = JS输出

易语言 python交互 易语言js交互_html5_04

4、HTML页面调用易代码(传参)



如果页面需要调用易语言的子程序,就需要将对应js函数和子程序通过mb绑定起来,需要用到代码:

JS绑定函数 (“JS函数”, &子程序, 0)




其中JS函数可以任意命名,但不支持中文,同时还要对html的相关组件(我这里为鼠标单击事件:Click)事件绑定上这个函数,如:

JS绑定函数 (“eyy_1”, &JS绑定_子程序1, 0)




JS绑定_子程序1部分:

JS取参数_文本 (es, 0) 这句主要用于获取JS传递的参数,0表示第1个参数

.版本 2

.子程序 JS绑定_子程序1
.参数 es, 整数型
.局部变量 参数1, 文本型
.局部变量 参数2, 文本型
.局部变量 参数3, 文本型

参数1 = JS取参数_文本 (es, 0)
参数2 = JS取参数_文本 (es, 1)
参数3 = JS取参数_文本 (es, 2)

信息框 (参数1 + #换行符 + 参数2 + #换行符 + 参数3, 0, , )

易语言 python交互 易语言js交互_易语言 python交互_05



 




HTML事件部分:

<button onclick="eyy_1('参数1','参数2','参数3')"> 调用易子程序1 </button>