完整示例

示例代码一

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()
Copyright 北京帮你玩科技有限公司 2020 all right reserved,powered by Gitbook该文章修订时间: 2020-01-19 17:41:57

results matching ""

    No results matching ""