說(shuō)明：

=====

1.1 如果不會(huì)ｗｅｂ前端的html、JavaScript、CSS的知識(shí)怎么辦？無(wú)所不能的python可以做到。

1.2 Remi是一個(gè)用于Python應(yīng)用程序的GUI庫(kù)，它將應(yīng)用程序的界面轉(zhuǎn)換為HTML，以便在Web瀏覽器中呈現(xiàn)。

1.3 這將刪除特定于平臺(tái)的依賴項(xiàng)，并允許您使用Python輕松開發(fā)跨平臺(tái)應(yīng)用程序！

2 準(zhǔn)備：

=====

2.1 官網(wǎng)地址：

https://github.com/dddomodossola/remi
https://remi.readthedocs.io/en/latest/

2.2 環(huán)境：

華為筆記本電腦、深度deepin-linux操作系統(tǒng)、谷歌瀏覽器、python3.8和微軟vscode編輯器。

2.3 安裝：

pip install remi
#本機(jī)安裝
sudo pip3.8 install remi
sudo pip3.8 install -i https://mirrors.aliyun.com/pypi/simple remi

3 Hello world：

==========

3.1 代碼：注釋版

import remi.gui as gui
from remi import start, App
#定義類
class MyApp(App):
    def __init__(self, *args):
        super(MyApp, self).__init__(*args)
#以上3行代碼，固定初始化
    
    def main(self):
        #實(shí)例化一個(gè)VBox，大小設(shè)置
        wid=gui.VBox(width=300, height=200)
        #窗口的標(biāo)簽label=顯示文本，大小比例法設(shè)置
        # 注意\n代表?yè)Q行，但需要配合style={"white-space":"pre"}，才起作用
        #preserves newline==保留換行符
        self.lbl=gui.Label('Hello\n World', width='80%', height='50%',style={"white-space":"pre"})
        #按鈕和名稱、大小設(shè)置，支持中文
        self.bt=gui.Button('Press me=點(diǎn)擊我!', width=200, height=30)
        #綁定按鈕的點(diǎn)擊事件，調(diào)用函數(shù)
        self.bt.onclick.do(self.on_button_pressed)
        #adding the widgets to the main container
        #將小部件添加到主容器wid，有時(shí)候上面實(shí)例化用container=主容器
        wid.append(self.lbl)
        wid.append(self.bt)
        return wid

    # listener function==監(jiān)聽功能
    #調(diào)用點(diǎn)擊按鈕函數(shù)；emitter==發(fā)射器
    def on_button_pressed(self, emitter):
        self.lbl.set_text('Hello World!')
        
if __name__=="__main__":
    # starts the webserver
    # 主要參數(shù)
    # start(MyApp,address='127.0.0.1', port=8081, multiple_instance=False,enable_file_cache=True, update_interval=0.1, start_browser=True)
    #start(MyApp, debug=True, address='0.0.0.0', port=0)  #本機(jī)測(cè)試地址改動(dòng)無(wú)效，為默認(rèn)地址
    start(MyApp, debug=True)  #端口指定無(wú)效，也不是默認(rèn)8081，估計(jì)本機(jī)端口已經(jīng)被占用

3.2 操作和效果：

4 Bootstrap：

=========

4.1 代碼：bootstrap.py

import remi.gui as gui
from remi import start, App

class MyApp(App):
    def __init__(self, *args):
        super(MyApp, self).__init__(*args)

    def main(self):
        #引入在線Bootstrap的css文件
        my_css_head="""
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            """
        #引入在線Bootstrap的js文件
        my_js_head="""
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            """

        self.page.children['head'].add_child('mycss', my_css_head)
        self.page.children['head'].add_child('myjs', my_js_head)
       #主窗口實(shí)例化，定義大小和樣式
        main_container=gui.VBox(width='500px', height='500px', style={'margin':'0px auto','padding':'10px'})
        #label=標(biāo)簽
        self.lbl=gui.Label("Label with Lock Icon=帶鎖圖標(biāo)的標(biāo)簽")
        #樣式選擇
        self.lbl.add_class("glyphicon glyphicon-lock label label-primary")
        #輸入框
        self.tf=gui.TextInput(hint='Your Input')
        #樣式選擇
        self.tf.add_class("form-control input-lg")
        #下拉選擇框
        self.dd=gui.DropDown(width='200px')
        #字體大小
        self.dd.style.update({'font-size':'large'})
        #樣式選擇
        self.dd.add_class("form-control dropdown")
        #下拉框內(nèi)容選擇
        self.item1=gui.DropDownItem("First Choice")
        self.item2=gui.DropDownItem("Second Item")
        #定義self的功能，目前未定義
        self.dd.append(self.item1,'item1')
        self.dd.append(self.item2,'item2')
             
        #Table=表格，第一個(gè)是表頭
        myList=[  ('ID','Lastname','Firstname','郵編','城市'),
                    ('1','Pan','Peter','888888','上海'),
                    ('2','Sepp','Schmuck','123456','北京')  ]
        #表格設(shè)置，內(nèi)容，大小
        self.tbl=gui.Table.new_from_list(content=myList,width='400px',height='100px',margin='10px')
        #樣式選擇
        self.tbl.add_class("table table-striped")
        #按鈕設(shè)置
        self.bt1=gui.Button("OK", width="100px")
        #是Bootstrap樣式 Class:  btn-success
        self.bt1.add_class("btn-success")                   
        self.bt2=gui.Button("Abbruch",width="100px")
        #Bootstrap Class:  btn btn-danger
        self.bt2.add_class("btn-danger")                
                
        #Build up the gui，主窗口掛載下面項(xiàng)目
        main_container.append(self.lbl,'lbl')
        main_container.append(self.tf,'tf')
        main_container.append(self.dd,'dd')
        main_container.append(self.tbl,'tbl')
        main_container.append(self.bt1,'btn1')
        main_container.append(self.bt2,'btn2')
        
        return main_container
    
if __name__=="__main__":
    # starts the webserver
    start(MyApp, debug=True)

4.2 操作和效果圖：

5 tabbox：

=======

5.1 代碼：

import remi.gui as gui
from remi import start, App

class MyApp(App):
    def __init__(self, *args):
        super(MyApp, self).__init__(*args)

    def main(self):
        #按鈕
        b1=gui.Button('Show second tab', width=200, height=30)
        #表格框
        tb=gui.TabBox(width='80%')
        tb.append(b1, 'First')
        
        b2=gui.Button('Show third tab', width=200, height=30)
        #tb.add_tab(b2, 'Second', None)
        tb.add_tab(b2, 'Second')

        b3=gui.Button('Show first tab', width=200, height=30)
        #tb.add_tab(b3, 'Third', None)
        tb.add_tab(b3, 'Third')
        #3種方法
        b1.onclick.do(self.on_bt1_pressed, tb, b2)
        b2.onclick.do(self.on_bt2_pressed, tb, 'Third')
        b3.onclick.do(self.on_bt3_pressed, tb, 0)

        return tb
    
    #按鈕功能的定義，3種功能
    def on_bt1_pressed(self, widget, tabbox, refWidgetTab):
        tabbox.select_by_widget(refWidgetTab)

    def on_bt2_pressed(self, widget, tabbox, refWidgetTabName):
        tabbox.select_by_name(refWidgetTabName)
    
    def on_bt3_pressed(self, widget, tabbox, tabIndex):
        tabbox.select_by_index(tabIndex)

if __name__=="__main__":
    #網(wǎng)頁(yè)標(biāo)題，standalone=False默認(rèn)是不允許
    start(MyApp, title="Tab Demo=表格例子", standalone=False)

5.2 操作和效果圖：

６standalone：

＝＝＝＝＝＝

6.1 代碼： mian.py

from remi import start, App
＃將 bootstrap.py腳本放在本代碼mian.py同一個(gè)目錄下
from bootstrap import MyApp

if __name__=="__main__":
    start(MyApp, standalone=True)

6.2 代碼：bootstrap.py＝４．１所指定代碼：

6.3　注意啟動(dòng)網(wǎng)頁(yè)服務(wù)器默認(rèn)為不啟動(dòng)(false)，需要啟動(dòng)則為standalone=True。

6.4 操作和效果圖：

７　附一張ｇｉｆ：

＝＝＝自己整理并分享＝＝＝

喜歡的人，可以點(diǎn)贊、關(guān)注、評(píng)論、轉(zhuǎn)發(fā)和收藏。

Python提供的標(biāo)準(zhǔn)庫(kù)中有一個(gè)名為html的標(biāo)準(zhǔn)庫(kù)，該標(biāo)準(zhǔn)庫(kù)提供的功能很簡(jiǎn)單，僅僅是把一些組成標(biāo)簽的尖括號(hào)或者是一些特殊字符轉(zhuǎn)換成實(shí)體字符。

這也是Python本身秉持的設(shè)計(jì)哲學(xué)，就是一個(gè)函數(shù)、一個(gè)模塊或者一個(gè)標(biāo)準(zhǔn)庫(kù)只專注于一件事或者是某一方面的事。

我們先來(lái)大概了解該標(biāo)準(zhǔn)的組成

>>> import html
>>> dir(html)
['__all__', '__builtins__', '__cached__', '__doc__', '__file__', '__loader__', '__name__', '__package__', '__path__', '__spec__', '_charref', '_html5', '_invalid_charrefs', '_invalid_codepoints', '_re', '_replace_charref', 'entities', 'escape', 'unescape']

我們不管那些以_開頭的東東，把注意放在escape和unescape這兩個(gè)函數(shù)上。

假設(shè)我有一些HTML，我擔(dān)心其中會(huì)包含一些可能危險(xiǎn)的<script>標(biāo)記。這時(shí)有一種方法就是把標(biāo)簽的尖括號(hào)轉(zhuǎn)換成實(shí)體符號(hào)，從以上兩個(gè)函數(shù)的命名可以大概了解相應(yīng)的功能。

沒(méi)錯(cuò)escape函數(shù)就是轉(zhuǎn)義的意思，就是把一些字符轉(zhuǎn)換為實(shí)體字符。比如“<”會(huì)轉(zhuǎn)換成“&+lt”、“>”會(huì)轉(zhuǎn)換成“&+gt”等等。（加號(hào)表示連接兩邊的符號(hào)）

>>> import html
>>> help(html.escape)
Help on function escape in module html:

escape(s, quote=True)
    Replace special characters "&", "<" and ">" to HTML-safe sequences.
    If the optional flag quote is true (the default), the quotation mark
    characters, both double quote (") and single quote (') characters are also
    translated.

查看該函數(shù)的幫助可以了解到，它會(huì)把特定字符“&”，“<”，“>”等轉(zhuǎn)換成HTML安全的實(shí)體字符。該函數(shù)還有一個(gè)可選的標(biāo)記參數(shù)，默認(rèn)為True，意思就是該函數(shù)默認(rèn)為把引用符號(hào)（“”、‘’）等一并轉(zhuǎn)換。

>>> import html
>>> demo="<h1>Hello World!，'</h1>"
>>> html.escape(demo,quote=False)
"<h1>Hello World!，'mangfu'</h1>"

上面的例子中，我設(shè)置可選參數(shù)quote為False，則它并不會(huì)對(duì)引號(hào)（‘’）進(jìn)行轉(zhuǎn)換。

>>> import html
>>> demo="<h1>Hello World!，'</h1>"
>>> html.escape(demo)
'<h1>Hello World!，'mangfu'</h1>'

上面的例子中，我使用該函數(shù)默認(rèn)的可選參數(shù)，從結(jié)果中可以看出函數(shù)輸出已經(jīng)對(duì)引號(hào)（‘’）進(jìn)行轉(zhuǎn)換。

至于unescape函數(shù)，看該函數(shù)的名字就知道它的作用跟escape函數(shù)恰恰相反。

可能大家對(duì)這些功能還不是很熟悉，但是這在Web開發(fā)方面是很重要的，如果你以后學(xué)習(xí)Django來(lái)搭建自己的網(wǎng)站，會(huì)碰到這個(gè)功能的。

大家可以動(dòng)手試試unescape函數(shù)。。。