十種編程語言開發計算器應用

1. C語言
2. C#（windows桌面軟件）
3. Swift （ios應用）
4. python
5. Dart（Flutter應用，跨平臺，適用安卓、ios、mac、windows、web）
6. Java（安卓App）
7. Kotlin （安卓App）
8. Js+Html+Vue（H5應用）
9. 微信小程序
10. 抖音小程序

h5版

開發工具

IntelliJ IDEA

工程截圖

關鍵代碼文件

• index.html 界面及計算邏輯

完整代碼比較長，博客正文就不貼了，詳見下方鏈接。

完整源代碼

https://gitee.com/hspbc/calculators

系列文章

用十種編程語言開發計算器應用-第一篇-C語言

用十種編程語言開發計算器應用-第二篇-Java

用十種編程語言開發計算器應用-第三篇-Python

用十種編程語言開發計算器應用-第四篇-Kotlin

用十種編程語言開發計算器應用-第五篇-Flutter

用十種編程語言開發計算器應用-第六篇-iOS

關于我

廈門大學計算機專業|華為八年高級工程師
十年軟件開發經驗，5年編程培訓教學經驗
目前從事編程教學，軟件開發指導，軟件類畢業設計指導。
所有編程資料及開源項目見https://cxyxy.blog.csdn.net/article/details/120405881

者：咕隆先森

來源：Python 技術

前段時間剛接觸到前端網頁開發，但是對于剛入門的小白而言，像flask、Django等這類稍大型的框架確實不太適合，今天這個Dash是集眾家之長于一體的輕量化Web開發庫。

Dash是什么？

Dash 是一個用于構建基于 Web 的應用程序的 Python 庫，無需 JavaScript 。

Dash 同時也是用于創建分析 Web 應用程序的用戶界面庫。那些使用 Python 進行數據分析、數據挖掘、可視化、建模、儀器控制和報告的人可以立即使用 Dash 。

Dash 建立在 Plotly.js、React 和 Flask 之上，將現代 UI 元素（如下拉列表、滑塊和圖形）與你的分析 Python 代碼相結合。

網頁搭建步驟

安裝相關依賴（庫）

提示：本文基于Windows 10、Anaconda 3、Sublime Text，Python版本為3.6.5 個人習慣單獨新一個用于dash開發的虛擬環境，創建命令：

conda create -n myenv_dash python==3.6.5

安裝Dash的第三方包：

pip install dash

因為是基于Flask，所以系統會自動安裝相應的依賴，這里我建議也安裝一個額外依賴：dash_bootstrap_components

pip install dash_bootstrap_components

此依賴包含Twitter的bootstrap組件。

導入相關包

from dash import Dash, html, dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc

構建app

try:
    # 獲取在線bootstrap.min.css
    app = Dash(__name__, external_stylesheets = ['https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css'])
    print('此網頁渲染基于在線的CSS')
except:
    # 獲取本地bootstrap.min.css
    app = Dash(__name__, external_stylesheets = [r"E:\Desktop\My_Python\Dash\css\bootstrap.min.css"])
    print('此網頁渲染基于本地的CSS')
app.title = '在線匯率計算器'

此處使用的css有在線的和本地的，利用try……except……防止在線的css文件無法加載而導致報錯。

構建結果輸出函數

代碼如下（示例）：

# 輸出函數，對于重復使用的，定義函數更快捷
def item(name, img_path):
    return dbc.ListGroupItem([html.H5(name), html.Img(src=img_path), html.H5('---', id=name, className='float-right')])

因為是單輸入，多輸出，構建item函數可以重復利用，優化代碼， 函數參數有貨幣名稱和國旗（提前準備好圖片素材，大小建議不要太大，我的圖片是160*110）。dbc.ListGroupItem組件可以很好的定位標簽、文字; 其中的className='float-right'可以理解為顯示樣式，代表“靠右浮動”

網頁結構Layout搭建

代碼如下（示例）：

app.layout = dbc.Container(
    children=[
        dbc.ListGroup([
            dbc.ListGroupItem(children=[
                html.H1("匯率計算器-簡單版",style={'textAlign': 'center','color':'#272528'}),
                html.P('輸入：用于兌換外幣的人民幣數；輸出：能兌換到的外幣數；單位：單位幣值。',style={'textAlign': 'center','color':'#BB002D'}),
                dbc.Input(value = 0, id = 'input', type='number')
            ],active=True),
            item('JPY','./assets/Japan.jpg'),
            item('USD','./assets/USA.jpg'),
            item('GBP','./assets/UK.jpg'),
            item('HKD','./assets/Hongkong.jpg'),
            item('EUR','./assets/EU.png'),
            item('CHF','./assets/France.png'),
            item('INR','./assets/India.jpg')
        ],className='shadow')
    ],style={'padding':'2rem'}
)

layout為GUI布局，采用列表的模式，根據行列進行排布；style={'textAlign': 'center','color':'#272528'}為文字排布樣式設定，為字典類型，可以設置字體，顏色等 dbc.Input(value = 0, id = 'input', type='number')默認value值為0，數據類型為number用于計算；style={'padding':'2rem'}為Container（容器）的居中顯示樣式，代表畫布距離邊界的寬度。

callback回調參數設定

代碼如下（示例）：

@app.callback(
    output = [
    Output('JPY', 'children'),
    Output('USD', 'children'),
    Output('GBP', 'children'),
    Output('HKD', 'children'),
    Output('EUR', 'children'),
    Output('CHF', 'children'),
    Output('INR', 'children')
    ],
    inputs = [Input('input', 'value')]
    )
def rule(rmb):
    rmb = rmb if rmb is not None else 0
    return (
        f'{round(rmb/0.0501,2)} ￥',
        f'{round(rmb/6.7646,2)} ＄',
        f'{round(rmb/8.1682,2)} ￡',
        f'{round(rmb/0.8615,2)} ￥',
        f'{round(rmb/6.8881,2)} €',
        f'{round(rmb/7.0309,2)} €',
        f'{round(rmb/0.0852,2)} $'
        )

@app.callback可以理解為裝飾器，用于網頁的交互。rule函數用于計算匯率。ps:這里的貨幣符號不一定全對，意思一些，不用太較真哈！！！

界面效果

總結

本項目到這里，整個項目就已經完成了，涉及到的一些基礎技能，還需要一點功力，好了，今天的分享就到這里，后續會更新如何使用requests爬蟲獲取實時匯率進行動態匯率換算。