利用MiniUI组件给PC软件做界面练习

By admin at 2021-05-29 • 0人收藏 • 849人看过

MiniUI扁平风格WEBUI界面库, 拥有完整的各种常用控件, 非常完备的表格组件

同为JQ界面组件,相对于layui, 更喜欢miniui提供的风格界面

官网:

http://www.miniui.com


我比较喜欢miniui的导航框架3, 于是

aardio中新建webform工程, 将下载到的miniui库里面的

image.png

将frame里面的框架3

image.png

拷贝到aardio的工程目录web中

image.png

将index.html里面的js路径改过来

image.png

import fonts.fontAwesome;
import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程12";right=1019;bottom=679;bgcolor=15793151)
mainForm.add()
/*}}*/

import console
console.open()

import web.form;
var wb = web.form( mainForm,5/*_UIFLAG_DIALOG*/,,,true);

wb.go("\web\index.html") 
wb.wait();

mainForm.show();
return win.loopMessage();

如果文件都没错的情况下, 那么运行应该就可以看到如下图

image.png

但是, 左侧导航那里并没有显示出来?

我的电脑是win7 32位, ie11 , 这里用web.form左侧导航显示不出来,估计是本地构建的原因, 我又不想用wsock.tcp.simpleHttpServer创建服务器 .

正常的应该是:

image.png

查看index.html代码, 里面有个初始化左侧导航的ajax

        $.ajax({
            url: "data/menu.txt",
            success: function (text) {
                var data = mini.decode(text);
                menu.loadData(data);
            }
        })

貌似这句不能执行导致, 于是我试着将web.form改成web.blink.form 和 web.kit.form , 发现这样是可以的

image.png

但是, 我不想用blink/wit , 既然ajax不能执行, 那么我就自己给它解析传给它,

我们是准备把这个miniui最为PC软件界面ui来用的, 那么很多动态的东西(比如 菜单 / 导航栏 / 表格内容 / 文本内容......)都是要aardio直接给miniui提供数据, 而不需要转换为json再给它.

那么, 观察html上面这个代码 , 其实就是加载txt文件, 读出里面的内容, 再把内容解析成数组, 再把数组添加到导航栏.

用aardio来加载txt , 然后内容作为参数,给那个解析并增加的那个函数就可以了.

于是, 首先 , 再aardio中添加个js能调用的函数.

//使用external接口定义网页脚本可调用的本地函数
wb.external = { 
	Aardio_addItems = function( func ){
		//读取文本 
		var text = string.load("\web\data\menu.txt");
		//调用传过来的js函数,将文本作为参数给它
		func(text);
	}
}

我们在index.html的js中添加个名称是func的js函数

function addData(text) {
	var data = mini.decode(text);
	menu.loadData(data);
}

external.Aardio_addItems(addData);

上面先定义了一个addData的函数, 函数里解析并添加数据

紧接着调用aar中的函数,将js中新增的那个addData函数作为参数传递到aar里交互.

image.png

9 个回复 | 最后更新于 2021-06-08
2021-05-30   #1

miniui的封装js里面有很多地方用到了ajax, 如果都去修改太麻烦, 还是改为web.kit.form 或者 web.blink.form来使用吧,

我测试了下同样的界面, 用blink和webKit分别渲染, 我发现webkit用时500ms左右, 但是blink用时2000ms左右, webkit虽然不会再更新了, 但是我只是用来渲染界面, 无所谓.

又测试了下所有的示例, 发现webkit在echarts图表那里高版本会导致波形不显示,使用官方echarts5.0.2没问题,  blink哪个版本都不会有这个问题 , 但是blink体积大.

综上, 看你最终取舍了, 我这里主要是绘制界面, 所以用webkit就可以了,体积小,速度快.

于是, 上面的代码还使用ajax, 将index.html还原为官方代码


2021-05-30   #2

继续测试下导航里面的页面, 将miniui官方示例的msgbox代码复制到pages目录里

image.png

再去data目录里把menu.txt里面文本改下

image.png

这时候运行程序

image.png

2021-05-30   #3

单纯讨论一下 ajax 函数为什么报错:

IE11又或者Chrome 限制 ajax 读取本地文件( 即使 HTML 是使用 file:// 协议打开 )

还是推荐用 wsock.tcp.simpleHttpServer 或者 wsock.tcp.asynHttpServer 解决这一类问题,因为这些网页程序基本上只考虑为 HTTP 服务器服务,即使没有这个问题也可能会遇到其他一些奇怪的问题,好在 aardio 创建 HTTP 服务器既轻量又方便。

另外一个解决这个问题的办法是降级到 IE10,
在HTML文件里 head 部分添加下面的代码即可:

<meta http-equiv="X-UA-Compatible" content="IE=10"/>

顺便测试一下,miniui 低于 IE10 样式就出错了,如果是这样,考虑到 miniui 收费且代码加密,可以试试免费的 React + antd,antd 新版支持IE11,antd 低版本可以支持IE8( 配置有些复杂 )

可以用 plus 控件做导航栏,antd 做导航栏也不太好看,但适合做表格这些。

2021-05-30   #4

jQuery 还有一个问题,
jQuery 1.6.2 的 ajax 函数虽然能访问 file:// 协议,但发布后不支持通过 res:// 协议访问 exe 资源,这个问题在 jQuery 1.6.3 已解决。

参考帖子:
http://bbs.aardio.com/forum.php?mod=viewthread&tid=1702

2021-05-30   #5

打算把整个miniui的demo都转移到上面建的工程里, 我做了一个文本匹配转换工具, 其实就是把原来的树形表转换为json,给左侧列表用

image.png

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=968;bottom=532)
winform.add(
button={cls="button";text="转换";left=481;top=216;right=969;bottom=262;dl=1;dr=1;dt=1;z=2};
button2={cls="button";text="清空";left=0;top=216;right=478;bottom=262;dl=1;dt=1;z=3};
s1={cls="edit";left=0;top=0;right=969;bottom=215;dl=1;dr=1;dt=1;edge=1;multiline=1;z=1};
t1={cls="edit";left=0;top=264;right=969;bottom=533;db=1;dl=1;dr=1;dt=1;edge=1;multiline=1;z=4}
)
/*}}*/

winform.button2.oncommand = function(id,event){
	winform.s1.text = "";
	winform.t1.text = "";
}

var convFun = function(text){
	var pattern =  //\<a href=\"(.*?)\".*?\>(.*?)\<
	for s1,s2 in string.gmatch( text, pattern ){
		winform.t1.log('{ "id": "',s2,'", iconCls: "fa fa-assistive-listening-systems", text: "',s2,'", url: "pages/',s1,'"},' ,'\r\n' )
	}
}

winform.button.oncommand = function(id,event){
	convFun(winform.s1.text);
}

winform.show();
win.loopMessage();


2021-05-30   #6

弄了一下午, 把官方示例文件放到框架3里面了.

还没加任何交互功能 , 等有时间慢慢加.

image.png

GIF.gif

工程源码下载:

链接:https://pan.baidu.com/s/1ZgSnzzuJyklmjXNCnWmN2Q 

提取码:sdr3 

复制这段内容后打开百度网盘手机App,操作更方便哦


2021-06-04   #7

放弃webview+layui了吗,师兄

我现在的表格用webview+vue的一个表格组件(vxe-grid),速度贼快,但是在blink里就不舒服了

2021-06-04   #8

回复#7 @netfox :

layui感觉比miniui麻烦点, webview就是个浏览器,miniui也支持吧

2021-06-08   #9

嗯嗯vxe.png

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前在学aardio+halcon机器视觉.
加入本站专享群:783804676
AARDIO语言QQ大群:70517368
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
C大Aardio论坛:Aar爱好者论坛
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
赞助商:才仁机械
下载站:
非凡软件站



Loading...