说明：

=====

1.1 如果不会ｗｅｂ前端的html、JavaScript、CSS的知识怎么办？无所不能的python可以做到。

1.2 Remi是一个用于Python应用程序的GUI库，它将应用程序的界面转换为HTML，以便在Web浏览器中呈现。

1.3 这将删除特定于平台的依赖项，并允许您使用Python轻松开发跨平台应用程序！

2 准备：

=====

2.1 官网地址：

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

2.2 环境：

华为笔记本电脑、深度deepin-linux操作系统、谷歌浏览器、python3.8和微软vscode编辑器。

2.3 安装：

pip install remi
#本机安装
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):
        #实例化一个VBox，大小设置
        wid=gui.VBox(width=300, height=200)
        #窗口的标签label=显示文本，大小比例法设置
        # 注意\n代表换行，但需要配合style={"white-space":"pre"}，才起作用
        #preserves newline==保留换行符
        self.lbl=gui.Label('Hello\n World', width='80%', height='50%',style={"white-space":"pre"})
        #按钮和名称、大小设置，支持中文
        self.bt=gui.Button('Press me=点击我!', width=200, height=30)
        #绑定按钮的点击事件，调用函数
        self.bt.onclick.do(self.on_button_pressed)
        #adding the widgets to the main container
        #将小部件添加到主容器wid，有时候上面实例化用container=主容器
        wid.append(self.lbl)
        wid.append(self.bt)
        return wid

    # listener function==监听功能
    #调用点击按钮函数；emitter==发射器
    def on_button_pressed(self, emitter):
        self.lbl.set_text('Hello World!')
        
if __name__=="__main__":
    # starts the webserver
    # 主要参数
    # 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)  #本机测试地址改动无效，为默认地址
    start(MyApp, debug=True)  #端口指定无效，也不是默认8081，估计本机端口已经被占用

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)
       #主窗口实例化，定义大小和样式
        main_container=gui.VBox(width='500px', height='500px', style={'margin':'0px auto','padding':'10px'})
        #label=标签
        self.lbl=gui.Label("Label with Lock Icon=带锁图标的标签")
        #样式选择
        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")
        #下拉框内容选择
        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=表格，第一个是表头
        myList=[  ('ID','Lastname','Firstname','邮编','城市'),
                    ('1','Pan','Peter','888888','上海'),
                    ('2','Sepp','Schmuck','123456','北京')  ]
        #表格设置，内容，大小
        self.tbl=gui.Table.new_from_list(content=myList,width='400px',height='100px',margin='10px')
        #样式选择
        self.tbl.add_class("table table-striped")
        #按钮设置
        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，主窗口挂载下面项目
        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__":
    #网页标题，standalone=False默认是不允许
    start(MyApp, title="Tab Demo=表格例子", standalone=False)

5.2 操作和效果图：

６standalone：

＝＝＝＝＝＝

6.1 代码： mian.py

from remi import start, App
＃将 bootstrap.py脚本放在本代码mian.py同一个目录下
from bootstrap import MyApp

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

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

6.3　注意启动网页服务器默认为不启动(false)，需要启动则为standalone=True。

6.4 操作和效果图：

７　附一张ｇｉｆ：

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

喜欢的人，可以点赞、关注、评论、转发和收藏。

Python提供的标准库中有一个名为html的标准库，该标准库提供的功能很简单，仅仅是把一些组成标签的尖括号或者是一些特殊字符转换成实体字符。

这也是Python本身秉持的设计哲学，就是一个函数、一个模块或者一个标准库只专注于一件事或者是某一方面的事。

我们先来大概了解该标准的组成

>>> 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这两个函数上。

假设我有一些HTML，我担心其中会包含一些可能危险的<script>标记。这时有一种方法就是把标签的尖括号转换成实体符号，从以上两个函数的命名可以大概了解相应的功能。

没错escape函数就是转义的意思，就是把一些字符转换为实体字符。比如“<”会转换成“&+lt”、“>”会转换成“&+gt”等等。（加号表示连接两边的符号）

>>> 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.

查看该函数的帮助可以了解到，它会把特定字符“&”，“<”，“>”等转换成HTML安全的实体字符。该函数还有一个可选的标记参数，默认为True，意思就是该函数默认为把引用符号（“”、‘’）等一并转换。

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

上面的例子中，我设置可选参数quote为False，则它并不会对引号（‘’）进行转换。

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

上面的例子中，我使用该函数默认的可选参数，从结果中可以看出函数输出已经对引号（‘’）进行转换。

至于unescape函数，看该函数的名字就知道它的作用跟escape函数恰恰相反。

可能大家对这些功能还不是很熟悉，但是这在Web开发方面是很重要的，如果你以后学习Django来搭建自己的网站，会碰到这个功能的。

大家可以动手试试unescape函数。。。