計(jì)算器是一個(gè)常見的應(yīng)用程序,在 AWTK 串口屏中,利用 fscript 表達(dá)式計(jì)算函數(shù),無(wú)需編寫一行傳統(tǒng)的代碼,即可實(shí)現(xiàn)一個(gè)簡(jiǎn)單的計(jì)算器應(yīng)用程序。
1. 功能
計(jì)算器是一個(gè)很常見的應(yīng)用,比如在電子秤中,可能就需要這樣一個(gè)應(yīng)用。在計(jì)算器中會(huì)用到一些有意思的知識(shí)點(diǎn),比如嵌入鍵盤,在數(shù)字輸入或密碼輸入也會(huì)用到。這里我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的計(jì)算器,不需要編寫代碼,設(shè)計(jì)好界面,添加綁定規(guī)則即可。
在這里例子中,模型(也就是數(shù)據(jù))里只有一個(gè)expr:
變量名 | 數(shù)據(jù)類型 | 功能說(shuō)明 |
expr | 字符串 | 保存表達(dá)式或結(jié)果 |
2. 創(chuàng)建項(xiàng)目
從模板創(chuàng)建項(xiàng)目,將 hmi/template_app 拷貝 hmi/calculator 即可。
第一個(gè)項(xiàng)目最好不要放到其它目錄,因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂剑仁煜ぶ笤倏紤]放到其它目錄。路徑中也不要中文和空格,避免不必要的麻煩。
3. 制作界面
用 AWStudio 打開上面 calculator 目錄下的 project.json 文件。里面有一個(gè)空的窗口,做出類似下面的界面。
4. 添加綁定規(guī)則
4.1 表達(dá)式(結(jié)果)
用 edit 控件顯示表達(dá)式,將表達(dá)式的文本屬性綁定到expr變量。添加自定義的屬性v-data:value,將值設(shè)置為{expr}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-data:value | {expr} | expr 是內(nèi)置的變量,用于保存表達(dá)式。 |
4.2 輸入數(shù)字 0
將0按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘0’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘0’)} | 在表達(dá)式后面追加字符串‘0’。 |
4.3 輸入數(shù)字 1
將1按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘1’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘1’)} | 在表達(dá)式后面追加字符串‘1’。 |
4.4 輸入數(shù)字 2
將2按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘2’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘2’)} | 在表達(dá)式后面追加字符串‘2’。 |
4.5 輸入數(shù)字 3
將3按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘3’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘3’)} | 在表達(dá)式后面追加字符串‘3’。 |
4.6輸入數(shù)字 4
將4按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘4’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘4’)} | 在表達(dá)式后面追加字符串‘4’。 |
4.7輸入數(shù)字 5
將5按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘5’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘5’)} | 在表達(dá)式后面追加字符串‘5’。 |
4.8輸入數(shù)字6
將6按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘6’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘6’)} | 在表達(dá)式后面追加字符串‘6’。 |
4.9輸入數(shù)字7
將7按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘7’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘7’)} | 在表達(dá)式后面追加字符串‘7’。 |
4.10輸入數(shù)字8
將8按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘8’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘8’)} | 在表達(dá)式后面追加字符串‘8’。 |
4.11輸入數(shù)字9
將9按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘9’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘9’)} | 在表達(dá)式后面追加字符串‘9’。 |
4.12輸入運(yùn)算符+
將+按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘+’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘+’)} | 在表達(dá)式后面追加字符串‘+’。 |
4.13輸入運(yùn)算符-
將-按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘-’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘-’)} | 在表達(dá)式后面追加字符串‘-’。 |
4.14輸入運(yùn)算符*
將*按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘*’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘*’)} | 在表達(dá)式后面追加字符串‘*’。 |
4.15輸入運(yùn)算符/
將/按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr, expr+‘/’)}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, expr+‘/’)} | 在表達(dá)式后面追加字符串‘/’。 |
4.16 輸入=計(jì)算結(jié)果
將=按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr,str(eval(expr)))}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr, str(eval(expr)))} | eval 計(jì)算表達(dá)式結(jié)果,str 將結(jié)果轉(zhuǎn)成字符串。 |
4.17 刪除鍵<=
將<=按鈕的點(diǎn)擊事件綁定到fscript命令。添加自定義的屬性v-on:click,將值設(shè)置為{fscript, Args=set(expr,usubstr(expr,0,-1))}。
綁定屬性 | 綁定規(guī)則 | 說(shuō)明 |
v-on:click | {fscript, Args=set(expr,usubstr(expr,0,-1))} | 刪除表達(dá)式中最后一個(gè)字符。 |
4.18 窗口模型
指定窗口的模型為 dummy(expr=’’),dummy 是一個(gè)簡(jiǎn)單的模型,只能存放數(shù)據(jù),而且是控件或窗口私有的。expr=’'表示將 expr 初始化為空字符串。
5. 初始化數(shù)據(jù)
無(wú)
6. 描述需要持久化的數(shù)據(jù)
無(wú)
7. 編譯運(yùn)行
運(yùn)行 bin 目錄下的 demo 程序:
8. 注意
本項(xiàng)目并沒(méi)有編寫界面相關(guān)的代碼,AWStudio 在 src/pages 目錄下生成了一些代碼框架,這些代碼并沒(méi)有用到,可以刪除也可以不用管它,但是不能加入編譯。
完整示例請(qǐng)參考:demo_calculator。
-
開源
+關(guān)注
關(guān)注
3文章
3256瀏覽量
42419 -
計(jì)算器
+關(guān)注
關(guān)注
16文章
437瀏覽量
37297 -
串口屏
+關(guān)注
關(guān)注
8文章
532瀏覽量
37332 -
awtk
+關(guān)注
關(guān)注
0文章
43瀏覽量
216
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論