layui做界面在aardio中使用交互学习

By admin at 2019-08-11 • 2人收藏 • 3902人看过

winform的控件一般能满足日常的需求, 但是有些时候需要更漂亮的界面,那么就不太适合了

layui作为一个成熟的web控件, 提供的控件应该可以满足大部分需求了.

下面是本人从零开始学习layui在aardio中怎么使用, 记录下来供以后忘掉的时候查阅


1, 去layui官方下载最新的组件

https://res.layui.com/static/download/layui/layui-v2.5.4.zip

2, 在aardio中创建一个空的工程

3, 工程树中添加一个名字为layui的虚拟目录

4, 将下载到的layui压缩包里的layui文件夹里面的东西都解压到上面的目录中

5, 右键同步目录

6, 在工程树的layui文件夹下新建一个index.aardio代码文件

7, 去layui官方文档里查看初步使用方法 https://www.layui.com/doc/

可以看到官方提供了一个简单的提示框示例, 那么, 就把这个代码全盘复制到index.aardio文件里去

8, 打开aardio工程的主文件, main.aardio 在里面添加web功能代码

import web.blink.form;
import wsock.tcp.simpleHttpServer;

var wb = web.blink.form(mainForm);
wb.go(wsock.tcp.simpleHttpServer.startUrl("/layui/index.aardio"))

上面为什么要把html文件写入到aardio后缀里面?

这样做可以在aardio中直接打开修改, 不用外部编辑器了

image.png

7 个回复 | 最后更新于 2019-10-14
2019-08-12   #1

为了方便以后在aar中手写layui的html代码, 我写了一个针对layui中用到的类名的智能提示库

后面会慢慢更新这个库, 方便以后的书写,

//layui CSS库
namespace layui;
/**intellisense(_layui)
.body = @<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">\n  <title>开始使用layui</title>\n  <link rel="stylesheet" href="../layui/css/layui.css">\n  <script src="../layui/layui.js"></script>\n</head>\n<body>\n__\n</body>\n</html>
.onmousedown = @onmousedown="javascript: external.__;" 
.onmouseup = @onmouseup="javascript: external.__;"
.onclick = @onclick="javascript: external.__;"
.div = @<div class="_layui__">\n</div>
.ul = @<ul class="_layui__">\n</ul>
.li = @<li class="_layui__">\n</li>
.dl = @<dl class="_layui__">\n</dl>
.dd = @<dd class="_layui__">\n</dd>
.label = @<label class="layui-form-label">__</label>
.inputText = @<input type="text" class="layui-input" name="__" required  lay-verify="required" placeholder="请输入标题">
.inputPassWord = @<input type="password" class="layui-input" name="__" required  lay-verify="required" placeholder="请输入密码">
.inputSelect = @<div class="layui-input-block">\n	<select name="city" lay-verify="required">\n		<option value=""></option>\n		<option value="0">北京</option>\n	</select>\n</div>
.href = @<a href="javascript:__">你的内容</a>
.container = @layui-container /*固定容器宽度*/
.fluid = @layui-fluid /*不固定容器宽度*/
.row = @layui-row /*定义行*/
.bg = 背景色
.col = 列属性
.icon = @layui-icon /*定义图标*/
.style = @style="font-size: 30px; color: #1E9FFF;" /*单独定义类型*/
.icon = 图标库
.form = 表单元素
end intellisense**/

/**intellisense(_layui.bg)
.red = @layui-bg-red /*红色*/
.orange = @layui-bg-orange /*橙色*/
.green = @layui-bg-green /*绿色*/
.cyan = @layui-bg-cyan /*青色*/
.blue = @layui-bg-blue /*蓝色*/
.black = @layui-bg-black /*黑色*/
.gray = @layui-bg-gray /*灰色*/
end intellisense**/

/**intellisense(_layui.col)
.xs = 超小屏幕,如手机
.sm = 小屏幕,如平板
.md = 桌面中等屏幕
.lg = 桌面大型屏幕
.space = 列间距
.offset = 列偏移
end intellisense**/

/**intellisense(_layui.col.xs)
.one = @layui-col-xs1
.two = @layui-col-xs2
.three = @layui-col-xs3
.four = @layui-col-xs4
.five = @layui-col-xs5
.six = @layui-col-xs6
.seven = @layui-col-xs7
.eight = @layui-col-xs8
.nine = @layui-col-xs9
.ten = @layui-col-xs10
.eleven = @layui-col-xs11
.twelve = @layui-col-xs12
end intellisense**/

/**intellisense(_layui.col.sm)
.one = @layui-col-sm1
.two = @layui-col-sm2
.three = @layui-col-sm3
.four = @layui-col-sm4
.five = @layui-col-sm5
.six = @layui-col-sm6
.seven = @layui-col-sm7
.eight = @layui-col-sm8
.nine = @layui-col-sm9
.ten = @layui-col-sm10
.eleven = @layui-col-sm11
.twelve = @layui-col-sm12
end intellisense**/

/**intellisense(_layui.col.md)
.one = @layui-col-md1
.two = @layui-col-md2
.three = @layui-col-md3
.four = @layui-col-md4
.five = @layui-col-md5
.six = @layui-col-md6
.seven = @layui-col-md7
.eight = @layui-col-md8
.nine = @layui-col-md9
.ten = @layui-col-md10
.eleven = @layui-col-md11
.twelve = @layui-col-md12
end intellisense**/

/**intellisense(_layui.col.lg)
.one = @layui-col-lg1
.two = @layui-col-lg2
.three = @layui-col-lg3
.four = @layui-col-lg4
.five = @layui-col-lg5
.six = @layui-col-lg6
.seven = @layui-col-lg7
.eight = @layui-col-lg8
.nine = @layui-col-lg9
.ten = @layui-col-lg10
.eleven = @layui-col-lg11
.twelve = @layui-col-lg12
end intellisense**/

/**intellisense(_layui.col.space)
.s1 = @layui-col-space1
.s3 = @layui-col-space3
.s5 = @layui-col-space5
.s8 = @layui-col-space8
.s10 = @layui-col-space10
.s12 = @layui-col-space12
.s15 = @layui-col-space15
.s18 = @layui-col-space18
.s20 = @layui-col-space20
.s22 = @layui-col-space22
.s28 = @layui-col-space28
.s30 = @layui-col-space30
end intellisense**/

/**intellisense(_layui.col.offset)
.one = @layui-col-offset1
.two = @layui-col-offset2
.three = @layui-col-offset3
.four = @layui-col-offset4
.five = @layui-col-offset5
.six = @layui-col-offset6
.seven = @layui-col-offset7
.eight = @layui-col-offset8
.nine = @layui-col-offset9
.ten = @layui-col-offset10
.eleven = @layui-col-offset11
.twelve = @layui-col-offset12
end intellisense**/

/**intellisense(_layui.icon)
.rate = @layui-icon-rate /*空心五星*/
.rateHalf = @layui-icon-rate-half /*半空心五星*/
.rateSolid = @layui-icon-rate-solid /*实心五星*/
end intellisense**/

/**intellisense(_layui.form)
.item = @layui-form-item /*定义表单项*/
.label = @layui-form-label /*静态文本*/

end intellisense**/

看似很无聊的事情, 但是对我这种html从没研究过的人来说,确实在aar里使用方便了不少

下面的html测试代码都是根据这个库来写的.

2019-08-12   #2

用到html基本上就是用无边框的窗口, 那么首先就是要实现layui模拟拖动标题栏了

首先, 在界面代码里添加交互扩展

wb.external = {
	hitcaption = function(){
		mainForm.hitCaption()
	};	
};

定义完之后, 就可以在html里面利用javascript来调用这个函数了.

下面编写基于layui的html代码文件:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../layui/layui.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header" onmousedown="javascript: external.hitcaption();">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域(可配合layui已有的水平导航) -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">内容主体区域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
</body>
</html>

image.png

2019-10-11   #3


有个问题,主界面main.aardio中的变量怎么给网页文件传递?

网页文件如何用ajax 给wsock.tcp.simpleHttpServer.startUrl发送数据?
2019-10-11   #4

回复#3 @dsp2138 :

上面不是说了吗 用wb.external

就如你所问:

你想让网页获取变量,main.aardio里定义

wb.external = {
    get变量a = function(){
        return mainform.edit.text;
    };
}

然后网页里用js获取,用external.get变量a()


想要网页发送数据给aar, 同理

wb.external = {
    网页传过来数据了 = function(a,b,c){
        //把传过来的数据求和
        mainform.edit.text = a+b+c;
    };
}

网页里js同样用external.网页传过来数据了(12,34,56);就可以了啊

至于你想怎么灵活传递数据这个就是你逻辑需要考虑的问题了.


2019-10-11   #5

回复#3 @dsp2138 :

追加一点提示, 你可以再aar文件里追加网页中的js函数, 然后就想给谁交互就和谁了

image.png



2019-10-14   #6

还有个问题,是关于doScript的用法问题
假如现在执行wb.doScript(`alert(111`)

那么在网页一加载就会弹出js原生的警告框。

但如果网页中先加载layui,也有函数

    aardio_call=function(){

wb.doScript(`layer.msg('Hello World')`)

    }


网页中调用 external.aardio_call(),而且layer定义时也去掉了 var,变为全局变量。

不管是web.form还是kit运行后都会出错,这是为何。

而我把aardio_call放在一个button里,假如这样

<button type="button" class="layui-btn layui-btn-sm" onclick="javascript:external.aardio_call('javascript:external.hello伪代码中调用')">开始使用</button>


这样被动点击在运行就正常了。

这是怎么回事?

如何让layui的元素主动执行,而不是被动?

2019-10-14   #7

回复#6 @dsp2138 :

不理解你到底想做啥? 什么叫主动?

你的意思是,网页html里主动调用aar?

网页里如果你不去手动点, 想要它自己主动调用aar, 那么你就在html里加个定时器,或者网页代码里加while , 里面循环判定执行啥啥的.

js是单线程的, 你难道还想要它跑多线程?


推荐你去aar的C大大的社区提问, bbs.aardio.org

登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...