精易论坛

标题: 易如云WebView2计算器例子 [打印本页]
作者: RySoftware    时间: 昨天 12:42
标题: 易如云WebView2计算器例子
  
全局变量名类 型数组公开备 注
网页网页视图  



i支持库列表   支持库注释   
eWebView2(未知支持库)
  
窗口程序集名保 留  保 留备 注
窗口程序集_启动窗口  易如云窗口程序主程序集
变量名类 型数组备 注
显示器文本文本型  

子程序名返回值类型公开备 注
__启动窗口_创建完毕 程序从这里进行初始化准备
网页.创建组件 (_启动窗口.取窗口句柄 ())
网页.禁止缩放 (真)
网页.禁用默认纵向滚动条 ()
网页.禁用默认横向滚动条 ()
网页.禁用默认菜单 ()
网页.加载HTML ( #计算器UI交互 )
网页.绑定JS回调 (&按钮事件)
显示器文本 ＝ “0”
子程序名返回值类型公开备 注
按钮事件  
参数名类 型参考可空数组备 注
消息文本型
变量名类 型静态数组备 注
MSG文本型 
字符组文本型0
MSG ＝ 取Json文本 (消息, “msg”, )
判断 (取Json文本 (消息, “type”, ) ＝ “btnclick”)
判断 (MSG ＝ “0”)
如果真 (显示器文本 ≠ “0”)
显示器文本 ＝ 显示器文本 ＋ “0”

判断 (MSG ＝ “1”)
如果真 (显示器文本 ＝ “0”)
显示器文本 ＝ “”
显示器文本 ＝ 显示器文本 ＋ “1”
判断 (MSG ＝ “2”)
如果真 (显示器文本 ＝ “0”)
显示器文本 ＝ “”
显示器文本 ＝ 显示器文本 ＋ “2”
判断 (MSG ＝ “3”)
如果真 (显示器文本 ＝ “0”)
显示器文本 ＝ “”
显示器文本 ＝ 显示器文本 ＋ “3”
判断 (MSG ＝ “4”)
如果真 (显示器文本 ＝ “0”)
显示器文本 ＝ “”
显示器文本 ＝ 显示器文本 ＋ “4”
判断 (MSG ＝ “5”)
如果真 (显示器文本 ＝ “0”)
显示器文本 ＝ “”
显示器文本 ＝ 显示器文本 ＋ “5”
判断 (MSG ＝ “6”)
如果真 (显示器文本 ＝ “0”)
显示器文本 ＝ “”
显示器文本 ＝ 显示器文本 ＋ “6”
判断 (MSG ＝ “7”)
如果真 (显示器文本 ＝ “0”)
显示器文本 ＝ “”
显示器文本 ＝ 显示器文本 ＋ “7”
判断 (MSG ＝ “8”)
如果真 (显示器文本 ＝ “0”)
显示器文本 ＝ “”
显示器文本 ＝ 显示器文本 ＋ “8”
判断 (MSG ＝ “9”)
如果真 (显示器文本 ＝ “0”)
显示器文本 ＝ “”
显示器文本 ＝ 显示器文本 ＋ “9”
判断 (MSG ＝ “+”)
如果真 (取文本右边 (显示器文本, 1) ≠ “+” 且 取文本右边 (显示器文本, 1) ≠ “-” 且 取文本右边 (显示器文本, 1) ≠ “×” 且 取文本右边 (显示器文本, 1) ≠ “÷”)
如果真 (取文本右边 (显示器文本, 1) ＝ “.”)
显示器文本 ＝ 取文本左边 (显示器文本, 取文本长度 (显示器文本) － 1)

显示器文本 ＝ 显示器文本 ＋ “+”

判断 (MSG ＝ “-”)
如果真 (取文本右边 (显示器文本, 1) ≠ “+” 且 取文本右边 (显示器文本, 1) ≠ “-” 且 取文本右边 (显示器文本, 1) ≠ “×” 且 取文本右边 (显示器文本, 1) ≠ “÷”)
如果真 (取文本右边 (显示器文本, 1) ＝ “.”)
显示器文本 ＝ 取文本左边 (显示器文本, 取文本长度 (显示器文本) － 1)

显示器文本 ＝ 显示器文本 ＋ “-”

判断 (MSG ＝ “*”)
如果真 (取文本右边 (显示器文本, 1) ≠ “+” 且 取文本右边 (显示器文本, 1) ≠ “-” 且 取文本右边 (显示器文本, 1) ≠ “×” 且 取文本右边 (显示器文本, 1) ≠ “÷”)
如果真 (取文本右边 (显示器文本, 1) ＝ “.”)
显示器文本 ＝ 取文本左边 (显示器文本, 取文本长度 (显示器文本) － 1)

显示器文本 ＝ 显示器文本 ＋ “×”

判断 (MSG ＝ “/”)
如果真 (取文本右边 (显示器文本, 1) ≠ “+” 且 取文本右边 (显示器文本, 1) ≠ “-” 且 取文本右边 (显示器文本, 1) ≠ “×” 且 取文本右边 (显示器文本, 1) ≠ “÷”)
如果真 (取文本右边 (显示器文本, 1) ＝ “.”)
显示器文本 ＝ 取文本左边 (显示器文本, 取文本长度 (显示器文本) － 1)

显示器文本 ＝ 显示器文本 ＋ “÷”

判断 (MSG ＝ “=”)
' 仅作教学，实际本项目没有用到页面中的数据，完全易如云本地变量操控
 ' 网页.调用JS函数 (“getScreenText();”)
计算 ()
判断 (MSG ＝ “AC”)
显示器文本 ＝ “0”
判断 (MSG ＝ “BC”)
显示器文本 ＝ 取文本左边 (显示器文本, 取文本长度 (显示器文本) － 1)
如果真 (显示器文本 ＝ “”)
显示器文本 ＝ “0”

判断 (MSG ＝ “CE”)
取符号集 (显示器文本, 字符组, , , , , 假)
如果 (取数组成员数 (字符组) ＞ 1)
删除成员 (字符组, 取数组成员数 (字符组), )
显示器文本 ＝ 合并文本数组 (字符组, “”)
显示器文本 ＝ “0”

判断 (MSG ＝ “.”)
如果真 (是否可加小数点 ())
显示器文本 ＝ 显示器文本 ＋ “.”



网页.调用JS函数 (“setScreenText('” ＋ 显示器文本 ＋ “');”)
判断 (取Json文本 (消息, “type”, ) ＝ “getScreenText”)
' 仅作教学，实际本项目没有用到页面中的数据，完全易如云本地变量操控
显示器文本 ＝ MSG



子程序名返回值类型公开备 注
计算  
变量名类 型静态数组备 注
字符组文本型0
IDX整数型 
取符号集 (显示器文本, 字符组, , , , , 假)
IDX ＝ -1
判断循环首 (取数组成员数 (字符组) ＞ 1)
IDX ＝ 找乘号 (字符组)
如果真 (IDX ≠ -1)
字符组 [IDX] ＝ 到文本 (到数值 (字符组 [IDX － 1]) × 到数值 (字符组 [IDX ＋ 1]))
删除成员 (字符组, IDX ＋ 1, )
删除成员 (字符组, IDX － 1, )
到循环尾 ()
IDX ＝ 找除号 (字符组)
如果真 (IDX ≠ -1)
字符组 [IDX] ＝ 到文本 (到数值 (字符组 [IDX － 1]) ÷ 到数值 (字符组 [IDX ＋ 1]))
删除成员 (字符组, IDX ＋ 1, )
删除成员 (字符组, IDX － 1, )
到循环尾 ()
IDX ＝ 找加号 (字符组)
如果真 (IDX ≠ -1)
字符组 [IDX] ＝ 到文本 (到数值 (字符组 [IDX － 1]) ＋ 到数值 (字符组 [IDX ＋ 1]))
删除成员 (字符组, IDX ＋ 1, )
删除成员 (字符组, IDX － 1, )
到循环尾 ()
IDX ＝ 找减号 (字符组)
如果真 (IDX ≠ -1)
字符组 [IDX] ＝ 到文本 (到数值 (字符组 [IDX － 1]) － 到数值 (字符组 [IDX ＋ 1]))
删除成员 (字符组, IDX ＋ 1, )
删除成员 (字符组, IDX － 1, )
到循环尾 ()

判断循环尾 ()
显示器文本 ＝ 字符组 [1]
子程序名返回值类型公开备 注
找乘号整数型 
参数名类 型参考可空数组备 注
字符组文本型
变量名类 型静态数组备 注
I整数型 
计次循环首 (取数组成员数 (字符组), I)
如果真 (字符组 [I] ＝ “×”)
返回 (I)

计次循环尾 ()
返回 (-1)
子程序名返回值类型公开备 注
找除号整数型 
参数名类 型参考可空数组备 注
字符组文本型
变量名类 型静态数组备 注
I整数型 
计次循环首 (取数组成员数 (字符组), I)
如果真 (字符组 [I] ＝ “÷”)
返回 (I)

计次循环尾 ()
返回 (-1)
子程序名返回值类型公开备 注
找加号整数型 
参数名类 型参考可空数组备 注
字符组文本型
变量名类 型静态数组备 注
I整数型 
计次循环首 (取数组成员数 (字符组), I)
如果真 (字符组 [I] ＝ “+”)
返回 (I)

计次循环尾 ()
返回 (-1)
子程序名返回值类型公开备 注
找减号整数型 
参数名类 型参考可空数组备 注
字符组文本型
变量名类 型静态数组备 注
I整数型 
计次循环首 (取数组成员数 (字符组), I)
如果真 (字符组 [I] ＝ “-”)
返回 (I)

计次循环尾 ()
返回 (-1)
子程序名返回值类型公开备 注
合并文本数组文本型 
参数名类 型参考可空数组备 注
待合并的数组文本型
合并符号文本型默认为 ","
变量名类 型静态数组备 注
合并符文本型 
合并文本文本型 
I整数型 
如果 (是否为空 (合并符号))
合并符 ＝ “,”
合并符 ＝ 合并符号
计次循环首 (取数组成员数 (待合并的数组), I)
如果 (合并文本 ＝ “”)
合并文本 ＝ 待合并的数组 [I]
合并文本 ＝ 合并文本 ＋ 合并符 ＋ 待合并的数组 [I]

计次循环尾 ()
返回 (合并文本)
子程序名返回值类型公开备 注
是否可加小数点逻辑型 
变量名类 型静态数组备 注
字符组文本型0
判断目标文本型 
取符号集 (显示器文本, 字符组, , , , , 假)
判断目标 ＝ 字符组 [取数组成员数 (字符组)]
如果真 (寻找文本 (判断目标, “.”, , 假) ＝ -1 且 取文本右边 (显示器文本, 1) ≠ “+” 且 取文本右边 (显示器文本, 1) ≠ “-” 且 取文本右边 (显示器文本, 1) ≠ “×” 且 取文本右边 (显示器文本, 1) ≠ “÷”)
返回 (真)
返回 (假)
子程序名返回值类型公开备 注
取符号集长整数型 获取代码的token列表, 返回token数量
参数名类 型参考可空数组备 注
代码文本型
储存符号集的变量文本型
符号表文本型最多支持双字符组成的复合符号, 默认列表: { “+”, “-”, “*”, “/”, “,”, “=”, “==”, “!=”, “<”, “>”, “<=”, “>=”, “{”, “}”, “(”, “)”, “[”, “]”, “<<”, “>>”, “;” }
左字符串界定符文本型默认 #引号
右字符串界定符文本型默认 #引号
行注释符号文本型默认 //
保留换行逻辑型默认 不保留
变量名类 型静态数组备 注
代码行文本型0
行文本型0
字符串拼接逻辑型 
字符串表文本型0
J整数型 
I整数型 
暂存文本型 
跳过逻辑型 
K整数型 
连续跳逻辑型 
字符串索引整数型 
清除数组 (储存符号集的变量)
如果 (是否为空 (符号表))
符号表 ＝ { “+”, “-”, “×”, “÷”, “,”, “=”, “==”, “!=”, “<”, “>”, “<=”, “>=”, “{”, “}”, “(”, “)”, “[”, “]”, “<<”, “>>”, “;”, “@#” }
加入成员 (符号表, “@#”)

如果真 (是否为空 (左字符串界定符))
左字符串界定符 ＝ #引号
如果真 (是否为空 (右字符串界定符))
右字符串界定符 ＝ #引号
如果真 (是否为空 (行注释符号))
行注释符号 ＝ “//”
代码行 ＝ 分


i支持库列表   支持库注释   
eWebView2(未知支持库)
EJson(未知支持库)

[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iOS 计算器</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

        }

        body {

            min-height: 100vh;

            background: linear-gradient(135deg, #2c2c34, #121217);

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .calculator-window {

            width: 320px;

            background: rgba(40, 40, 48, 0.9);

            backdrop-filter: blur(18px);

            -webkit-backdrop-filter: blur(18px);

            border-radius: 0;

            overflow: hidden;

            box-shadow: 0 20px 60px rgba(0,0,0,0.5);

            border: 1px solid rgba(255,255,255,0.1);

        }

        .display-area {

            padding: 24px 20px 12px;

            width: 100%;

            height: 90px;

            display: flex;

            justify-content: flex-end;

            align-items: flex-end;

            overflow: hidden;

        }

        .result-text {

            color: #ffffff;

            font-size: 48px;

            font-weight: 300;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: clip;

            line-height: 1;

        }

        .keys-wrap {

            padding: 10px;

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 10px;

        }

        button.key {

            height: 64px;

            border-radius: 0;

            border: none;

            font-size: 24px;

            cursor: pointer;

            transition: filter 0.15s ease;

        }

        button.key:active {

            filter: brightness(1.3);

        }

        .key-gray {

            background: #a5a5a5;

            color: #000;

        }

        .key-orange {

            background: #ff9f0a;

            color: #fff;

        }

        .key-dark {

            background: #333336;

            color: #fff;

        }

        .key-zero {

            grid-column: span 2;

            border-radius: 0;

            text-align: left;

            padding-left: 26px;

        }

    </style>

</head>

<body>

    <div class="calculator-window">

        <div class="display-area">

            <div class="result-text">0</div>

        </div>

        <div class="keys-wrap">

            <button class="key key-gray" data-val="AC">AC</button>

            <button class="key key-gray" data-val="CE">CE</button>

            <button class="key key-gray" data-val="BC">BC</button>

            <button class="key key-orange" data-val="/">÷</button>



            <button class="key key-dark" data-val="7">7</button>

            <button class="key key-dark" data-val="8">8</button>

            <button class="key key-dark" data-val="9">9</button>

            <button class="key key-orange" data-val="*">×</button>



            <button class="key key-dark" data-val="4">4</button>

            <button class="key key-dark" data-val="5">5</button>

            <button class="key key-dark" data-val="6">6</button>

            <button class="key key-orange" data-val="-">-</button>



            <button class="key key-dark" data-val="1">1</button>

            <button class="key key-dark" data-val="2">2</button>

            <button class="key key-dark" data-val="3">3</button>

            <button class="key key-orange" data-val="+">+</button>



            <button class="key key-dark key-zero" data-val="0">0</button>

            <button class="key key-dark" data-val=".">.</button>

            <button class="key key-orange" data-val="=">=</button>

        </div>

    </div>



    <script>

        function erymsg(msg) {

            if (window.chrome && window.chrome.webview) {

                const json = {

                    type: 'btnclick',

                    msg: msg

                }

                window.chrome.webview.postMessage(JSON.stringify(json));

            }

        }



        document.addEventListener('DOMContentLoaded', function () {

            const keys = document.querySelectorAll('.key');

            keys.forEach(btn => {

                btn.addEventListener('click', function () {

                    const val = this.dataset.val;

                    erymsg(val);

                });

            });

            autoFitFontSize();

        });



        function setScreenText(text) {

            const resultText = document.querySelector('.result-text');

            resultText.textContent = text;

            autoFitFontSize();

        }



        function getScreenText(){

            const resultText = document.querySelector('.result-text');

            const json = {

                type: 'getScreenText',

                msg: resultText.textContent

            }

            window.chrome.webview.postMessage(JSON.stringify(json));

        }

        

        function autoFitFontSize() {

            const textEl = document.querySelector('.result-text');

            const wrapEl = document.querySelector('.display-area');

            const MAX_FONT = 48;

            const MIN_FONT = 12;

            const availableWidth = wrapEl.clientWidth - 20 * 2 - 10;



            let low = MIN_FONT;

            let high = MAX_FONT;

            let bestFit = MAX_FONT;

            while (high - low > 0.1) {

                const mid = (low + high) / 2;

                textEl.style.fontSize = mid + 'px';

                if (textEl.scrollWidth <= availableWidth) {

                    bestFit = mid;

                    low = mid;

                } else {

                    high = mid;

                }

            }

            textEl.style.fontSize = bestFit + 'px';

        }

    </script>

</body>

</html>

C1.png
C2.png

下载WebView2支持库(1)

下载WebView2支持库(1)

下载WebView2支持库(2)

下载WebView2支持库(2)

易如云WebView2例子计算器.7z

392.83 KB, 下载次数: 1, 下载积分: 精币 -2 枚

作者: RySoftware    时间: 昨天 12:44
易如云QQ群: 979337437、964283733
作者: 1184798949    时间: 昨天 17:02
感谢分享



欢迎光临 精易论坛 (https://bbs.ijingyi.com/) Powered by Discuz! X3.4