易语言&miniblink交互教程——第三课 Miniblink 的交互与传参

测码奔腾永无BUG · 发表于 2023-2-7 19:09:55

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

1、用易语言调用JS

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

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

举个栗子：

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

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

JS代码：

[JavaScript] 纯文本查看 复制代码

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

易语言代码为：

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

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

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

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

HTML部分：

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

[HTML] 纯文本查看 复制代码

<!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为：

[HTML] 纯文本查看 复制代码

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

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

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

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

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

子程序名	返回值类型	公开	备注
_按钮1_被单击

变量名	类型	静态	数组	备注
jv	长整数型
JS输出	文本型

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

编辑框1.内容＝ JS输出

4、HTML页面调用易代码（传参）

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

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

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

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

JS绑定_子程序1部分：

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

子程序名	返回值类型	公开	备注
JS绑定_子程序1
参数名	类型	参考	可空	数组	备注
es	整数型

变量名	类型	静态	数组	备注
参数1	文本型
参数2	文本型
参数3	文本型

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

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

HTML事件部分：

[HTML] 纯文本查看 复制代码

<button> 调用易子程序1 </button>

补充内容 (2023-2-16 17:15):
WEBUI源码指引帖：https://bbs.125.la/forum.php?mod ... 14763215&page=1

全套教程可以看TX文档（懒得搬了）：https://docs.qq.com/doc/DQ1JOeFZaUUJRbURC

我非平凡 · 发表于 2023-2-11 22:07:07

一切从零开始教程专用

自由天下 · 发表于 2023-2-7 20:26:14

感谢分享，很给力！~

阿尼多 · 发表于 2023-2-7 20:16:40

学习一下

		自动登录	找回密码
密码			注册

[技术专题] 易语言&miniblink交互教程——第三课 Miniblink 的交互与传参

点评

评分