完整示例
示例代码一
local html = [[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据提交简单示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准 mui.css-->
<!--App 自定义的 css-->
</head>
<body>
<form id="form1" name="showUI_commit" method="post" action="/set_event">
<br>
<h5>输入框-普通</h5>
<label>输入框：
<input type="text" name="com3" value="测试" placeholder="请输入">
</label>
<br>
<h5>输入框-数字</h5>
<label>输入框：
<input type="number" name="com4" value="1" placeholder="请输入">
</label>
<br>
<h5>输入框-多行</h5>
<label>输入框：
<textarea name="com7" placeholder="请输入" row="5">asd</textarea>
</label>
<br>
<br>
<button id="actions" type="button">提交</button>
<button id="cancel" type="button">取消</button>
</form>
<script type="text/javascript">
function actions(data) {//数据提交 post 请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "/set_event", true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.onreadystatechange = function() {
var XMLHttpReq = xhr;
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var text = XMLHttpReq.responseText;
console.log(text);
} else {
console.log(XMLHttpReq.status)
}
} else {
console.log(XMLHttpReq.readyState);
}
};
alert('{"name": "showUI_commit","value":' + data + '}')
xhr.send('{"name": "showUI_commit","value":"' + data + '"}');
}
function closed() {//取消 post请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "/set_event", true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.onreadystatechange = function() {
var XMLHttpReq = xhr;
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var text = XMLHttpReq.responseText;
console.log(text);
} else {
console.log(XMLHttpReq.status)
}
} else {
console.log(XMLHttpReq.readyState);
}
};
xhr.send('{"name": "showUI_cancel"}');
}
document.getElementById('actions').onclick = function() {//数据提交按钮点击
var com3Val = document.getElementsByName('com3')[0].value; //获取 name 为 com3 的值
var com4Val = document.getElementsByName('com4')[0].value; //获取 name 为 com7 的值
var com7Val = document.getElementsByName('com7')[0].value; //获取 name 为 com3 的值
var data = com3Val + "," + com4Val + "," + com7Val;
actions(data);
}
document.getElementById('cancel').onclick = function() {//取消按钮点击
closed();
}
</script>
</body>
</html>
]]
--小精灵使用协程需要勾选网络插件
local thread = require('thread')
local event = require('event')
--创建 webview
local showui_view,err = require('webview').new("myshowui",
{html=html})
assert(showui_view,err)
event.register("showUI_commit",function(value)
local ts = require("ts")--使用扩展库前必须插入这一句
local json = ts.json--使用 JSON 模块前必须插入这一句
toast(json.encode(value),5)
showui_view.close()
end)
event.register("showUI_cancel",function(value)
showui_view.close()
end)
showui_view.show()
thread.waitAllThreadExit()
示例代码二
local html = [[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello 触动精灵 ShowUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/tsShowUI.css">
<link rel="stylesheet" href="css/icons-extra.css">
<!--App自定义的css-->
</head>
<body>
<header class="mui-bar mui-bar-nav">
<button id="ts-cancle" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span><span class=" mui-tscancel">返回</span></button>
<button id="ts-timer" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-right"></button>
<h1 class="mui-title mui-tstitle"></h1>
</header>
<footer class="mui-bar mui-bar-footer mui-bar-tsfooter">
<button id="ts-post-btn" class="mui-ts-footerbth btn mui-btn-block mui-btn-blue mui-tsaction" data-loading-text="执行中" type="button">开始</button>
</footer>
<div class="mui-content">
<form class="mui-tsform">
<div class="mui-card" id="renderbox">
</div>
</form>
</div>
<script src="js/tsShowUI.js"></script>
<script>
(function($, doc) {
var uiVersion=$.getVersion();//获取ui版本
//json兼容原showui 格式
var showui_json = {
"title": "触动精灵脚本配置", //给页面添加标题（默认标题无）
"cancelname": "取消", //给页面取消按钮添加文字（默认文字无）
"config": "save_01",
"okname": "开始", //给页面开始按钮添加文字（默认“开始”）
"style": "default",
"timer": 30,
"orient": 0,
"pagetype": "multi",
"view": [{
"type": "Label",
"text": "标题1",
"size": 18,
"align": "center",
"color": "0,168,233"
}, {
"type": "Image",
"src": "http://www.touchsprite.com/wp-content/uploads/2016/10/banner2_790x230-790x0.png"
}, {
"type": "Label",
"text": "switches控件",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"type": "switches",
"list": "开关1,开关2,开关3",
"select": "0@2"
}, {
"type": "Label",
"text": "RadioGroup控件",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"id": "ceshi4",
"type": "RadioGroup",
"list": "选项1,选项2,选项3",
"select": "1"
}, {
"type": "Label",
"text": "Edit控件（普通）",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"id": "ceshi5",
"type": "Edit",
"prompt": "请输入一个字母",
"text": "默认值",
"kbtype": "ascii"
}, {
"type": "Label",
"text": "Edit控件（多行）",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"id": "ceshi6",
"type": "Edit",
"prompt": "请输入一个字母",
"text": "默认值",
"row": "5",
"kbtype": "ascii"
}, {
"type": "Label",
"text": "Edit控件（滑块）",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"type": "Edit",
"prompt": "请输入一个数字",
"text": "2",
"kbtype": "range",
"max": "100",
"min": "0",
}, {
"type": "Label",
"text": "Edit控件（数字）",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"id": "ceshi7",
"type": "Edit",
"prompt": "请输入一个数字",
"text": "123456",
"kbtype": "number"
}, {
"type": "Label",
"text": "Edit控件（密码）",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"id": "ceshi8",
"type": "Edit",
"prompt": "请输入密码",
//已知小米8系统使用密码框会出现系统崩溃问题
"text": "hhkjkjh",
"kbtype": "password"
}, {
"type": "Label",
"text": "CheckBoxGroup控件",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"id": "ceshi9",
"type": "CheckBoxGroup",
"list": "选项1,选项2,选项3,选项4",
"select": "0@3",
}, {
"type": "Label",
"text": "ComboBox控件（二级）",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"id": "ceshi10",
"type": "ComboBox",
"list": "选项1,选项2,选项3",
"select": "2",
"data": "子选项1,子选项2,子选项3,子选项4#子选项5,子选项6,子选项7#子选项8,子选项9",
"source": "test"
}, {
"type": "Label",
"text": "ComboBox控件（一级）",
"size": 16,
"align": "left",
"color": "0,168,233"
}, {
"id": "ceshi11",
"type": "ComboBox",
"list": "选项1,选项2,选项3,选项4,选项5,选项6,选项7",
"select": "1"
}]
};
$.renderUI(showui_json);
})(mui, document)
</script>
</body>
</html>
]]
--小精灵使用协程需要勾选网络插件
local thread = require('thread')
local event = require('event')
local ts = require('ts')
local cjson = ts.json
--创建webview
local showui_view,err = require('webview').new("myshowui",
{html=html})
assert(showui_view,err)
event.register("showUI_commit",function(value)
toast(cjson.encode(value),10)
showui_view.close()
end)
event.register("showUI_cancel",function(value)
showui_view.close()
end)
showui_view.show()
thread.waitAllThreadExit()