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

这篇具有很好参考价值的文章主要介绍了易语言&miniblink交互教程——第三课 易语言与 Miniblink 交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1、用易语言调用JS

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

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

举个栗子:

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

miniblink,易语言,UI界面,UI设计,html5,前端,html

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

JS代码:

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

miniblink,易语言,UI界面,UI设计,html5,前端,html

 

 

易语言代码为:

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

miniblink,易语言,UI界面,UI设计,html5,前端,html

 

由此可知,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输出

miniblink,易语言,UI界面,UI设计,html5,前端,html

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, , )

miniblink,易语言,UI界面,UI设计,html5,前端,html

 

HTML事件部分:文章来源地址https://www.toymoban.com/news/detail-738196.html

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

到了这里,关于易语言&miniblink交互教程——第三课 易语言与 Miniblink 交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt中多ui使用及简单布局实现交互界面

    第一章 Qt中C++代码搭配UI文件实现交互界面 第二章 Qt中多ui使用及简单布局实现交互界面 文章目录 前言 一、新增两个新UI文件 二、使用这两个新增的UI及简单布局 三.添加简单联动逻辑 四.编译运行及动态效果展示 总结         前一段时间,写了一篇关于Qt中C++代码搭配

    2024年02月04日
    浏览(56)
  • Qt中C++代码搭配UI文件实现交互界面

    第一章 Qt中C++代码搭配UI文件实现交互界面 第二章 Qt中多ui使用及简单布局实现交互界面 文章目录 一、关于Qt中的UI文件 二、创建一个基本的Qt工程 1.创建工程时,选择不生成ui文件 2.工程内容 3.构建并运行这个工程 4.实现并添加UI文件 三.使用这个新增的UI 四.编译运行 总结

    2024年02月13日
    浏览(47)
  • 【Unity之UI编程】编写一个面板交互界面需要注意的细节

    👨‍💻个人主页 :@元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏 :Unity基础实战 当登录成功后,将玩家信息类通过,UI管理器中的显示加载方法中的委托函数,进行,加载面板后的逻辑处理(在里面执行

    2024年02月05日
    浏览(47)
  • Kafka第三课

    Flume 由三部分 Source Channel Sink 可以通过配置拦截器和Channel选择器,来实现对数据的分流, 可以通过对channel的2个存储容量的的设置,来实现对流速的控制 Kafka 同样由三大部分组成 生产者 服务器 消费者 生产者负责发送数据给服务器 服务器存储数据 消费者通过从服务器取数据 但

    2024年02月13日
    浏览(34)
  • MyBatis第三课

    目录 回顾  #和$区别 #(预编译SQL)和$(即时SQL,它是进行的字符串拼接)的区别,其中之一就是预编译SQL和即时SQL的区别 原因: 两者的共同点 MaBits可以看作是Java程序和Mysql的沟通桥梁,底层还是(jdbc) 访问数据库还得是Mysql 多表查询(慢) 1.通常情况下,数据库集群是很多

    2024年01月20日
    浏览(38)
  • 第三课:GPT

    GPT出现的原因 未标注的文本数据远多于已标注的文本数据,并且对于不同的下游任务会存在不同的标注方式 GPT的方法原理 半监督学习 基于大量未标注的文本数据,训练预训练语言模型 使用已标注文本数据,对模型针对某一特定下游任务进行finetune,只更改output layer(线性层

    2024年01月21日
    浏览(44)
  • Spark第三课

    shuffle 1.打乱顺序 2.重新组合 1.分区的规则 默认与MapReduce的规则一致,都是按照哈希值取余进行分配. 一个分区可以多个组,一个组的数据必须一个分区 2. 分组的分区导致数据倾斜怎么解决? 扩容 让分区变多 修改分区规则 3.HashMap扩容为什么必须是2的倍数? 当不是2的倍数时, 好多

    2024年02月11日
    浏览(38)
  • springboot综合案例第三课

    Spring Security 的前身是 Acegi Security ,是 Spring 项目组中用来提供安全认证服务的框架。 (https://projects.spring.io/spring-security/) Spring Security 为基于J2EE企业应用软件提供了全面安全服务。特别 是使用领先的J2EE解决方案-Spring框架开发的企业软件项目。人们使用Spring Security有很多种原

    2024年02月12日
    浏览(31)
  • ChatGPT在智能人机交互界面和UI设计中的应用如何?

    在智能人机交互界面和UI设计领域,ChatGPT可以发挥重要作用,为用户提供更加智能、自然和个性化的交互体验。其自然语言处理和生成能力使其成为创新的工具,可以改变用户与系统之间的互动方式,以下将详细探讨ChatGPT在这个领域的应用。 **1. 聊天式用户界面**:ChatGPT可以

    2024年02月11日
    浏览(43)
  • 第三课:C++实现PDF去水印

    目录 1.功能概述与实现方法 2.代码实现 3.代码使用方法 4.PDF加水印原理和方法 4.1.使用“优速水印工厂”给pdf加水印 4.2.使用Acrobat XI软件给pdf加水印 4.3.使用优米处理器给pdf加水印 4.4.使用云朵办公给pdf加水印 4.5.使用livePDF给pdf加水印 PDF去水印是一项非常复杂的任务,需要一定

    2024年02月09日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包