准备工作

1. 易语言、VSCode

2. miniblink模块、精易模块、Node.dll

3. JQuery-1.9.1.js

如果你没有可以去看上一期教程下载

注:

本期demo例程请到文章末尾获取~~

miniblink绑定

1. 导入miniblink、精易模块:

jquery连接易语言 易语言调用js教程_交互

 

2. 先在易语言中新建一个无边框的窗口,然后再在顶部的位置放一个透明标签组件(主要是用来移动窗口) 

jquery连接易语言 易语言调用js教程_交互_02

然后给透明标签的鼠标左键按下事件写上代码:

发送信息(161,2,0)

jquery连接易语言 易语言调用js教程_jquery连接易语言_03

3. 在窗口创建完毕事件下写上以下代码:

.版本 2

.子程序 _窗口1_创建完毕

WKE初始化 ()
mb.绑定 (窗口1.取窗口句柄 (), 真)
mb.载入文件 (取运行目录 () + “\html\index.html”)

jquery连接易语言 易语言调用js教程_html5_04

 

 

4. 最后编写好index.html文件,也就是界面即可。

jquery连接易语言 易语言调用js教程_html_05

jquery连接易语言 易语言调用js教程_html_06

 

5. 运行后可以就可以看这个html的界面被加载了出来

jquery连接易语言 易语言调用js教程_html_07

 

 JS绑定

经过以上步骤我们虽然已经把index.html这个页面加载出来了,但是当我们点击里面的按钮是没有任何效果的,这时候我们就需要绑定一个JS函数,让它能与易语言的事件进行交互。

首先,在易语言窗口创建完毕的事件下加入这行:

JS绑定函数 (“submitData”, “&登录按钮_被点击”)

再新建个名为 登录按钮_被点击 的子程序,里面写上登录按钮点击后你希望执行的易语言代码,我这里主要写个信息框。

jquery连接易语言 易语言调用js教程_易语言_08

index.html部分主要在button标签中添加一个onclick属性,也就是鼠标点击的事件属性,属性内容填submitData()  也就是在易语言绑定的那个js函数。

οnclick="submitData()" 通俗来说就是 点击了按钮》执行submitData()函数。

jquery连接易语言 易语言调用js教程_jquery连接易语言_09

 

 最后在易语言运行,点击按钮后可以看到,成功弹出了提示框。

jquery连接易语言 易语言调用js教程_jquery连接易语言_10

 

传递参数(传参)

经过上面步骤我们虽然可以通过绑定JS函数进行事件的交互,但是还无法传递参数,也就说明我们无法获取文本框<input>中的内容,这时候就涉及到一个问题参数传递的问题。

这个问题也不难解决,miniblink传参还是相对比较简单的,废话不多说,先上教程:

先在易语言 登录按钮_被点击 改成以下参数和变量、代码:

.版本 2

.子程序 登录按钮_被点击
.参数 es, 整数型
.局部变量 data, 文本型


data = JS取参数_文本 (es, 0)

信息框 (data, 0, , )

jquery连接易语言 易语言调用js教程_jquery连接易语言_11

 

html部分主要把 οnclick="submitData()" 改成 οnclick="submitData('测试测试')"

jquery连接易语言 易语言调用js教程_html_12

回到易语言并运行,点击按钮后可以看到,html中submitData的参数测试测试已经可以传递过来了。

jquery连接易语言 易语言调用js教程_jquery连接易语言_13

 

根据这个原理,只要我们在html中写个js获取账号密码框中的内容,并通过submitData函数提交就可以将账号密码的内容传递到易语言中了。

为了让大家看起来更规范,我这用了JQuery,并把它的事件统一写在了下面

jquery连接易语言 易语言调用js教程_易语言_14

 

最后总结

如果弄WebUI的话,大部分界面以及窗口事件都是要通过JS来处理的,只类似保存、读取本地账号密码这些涉及后端数据处理的时候才会用到易语言。

所以前端扎实的易友们可以来玩一下这个WebUI,毕竟html的框架、插件比较完善,有时候可能会比用自绘弄起来要更简单轻松、更容易实现。