不会HtmlJavaScriptCSS，怎么办？有python的Remi库

　　1 说明：
　　=====
　　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=显示文本，大小比例法设置         # 注意 代表换行，但需要配合style={＂white-space＂:＂pre＂}，才起作用         #preserves newline==保留换行符         self.lbl = gui.Label(＂Hello  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.pyimport 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 = ＂＂＂                          ＂＂＂         #引入在线Bootstrap的js文件         my_js_head = ＂＂＂                          ＂＂＂          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.pyfrom 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 操作和效果图：
　　把ｗｅｂ网页变成一个ａｐｐ的ＧＵＩ
　　７　附一张ｇｉｆ：
　　代码省略
　　＝＝＝自己整理并分享＝＝＝
　　喜欢的人，可以点赞、关注、评论、转发和收藏。