PyWebIO库是一个用于在浏览器上的python工具库

　　1 说明：
　　=====
　　1.1 不需要编写Html和JS代码，就可以构建出具有良好可用性的Web程序。
　　1.2 通过python的简洁代码进行web页面开发，还可以进行数据可视化，非常简单地整合Bokeh，pyecharts，plotly，pyg2plot，cutecharts.py。
　　1.3 还可以整合进web服务器框架中去，如Tornado，Flask，Django，aiohttp。
　　1.4 本文入门级介绍，代码注释仔细，一秒入门。
　　2 安装：
　　=====
　　2.1 官网：https://www.cnpython.com/pypi/pywebio https://pywebio.readthedocs.io/en/latest/ https://github.com/wang0618/PyWebIO
　　2.2 安装：pip install pywebio #本机安装 sudo pip3.8 install pywebio
　　3 helloworld：
　　=========
　　3.1 效果图：
　　3.2 代码：  #调出set_env设置环境函数 from pywebio.session import* #调出put_text函数和style函数 from pywebio.output import*  #网页标题名 set_env(title=＂1-helloworld：你好世界＂, output_animation=False)  #默认 #put_text(＂Hello world：你好世界!＂)  #得需要css相关知识 #美化设置，css_style:字体颜色：红色,字体大小，字体样式，注意分号(;)隔开 #text-align: center 位置居中 #padding: 100px 200px;/* 文字距离上下有100px内边距 距离左右有200内边距 */ #margin: 100px 200px; /* 文字距离上下有100px外边距 距离左右有200外边距 */  #请注意，css设置字体后可能报错 style(put_text(＂Hello world：你好世界!＂),  ＂color: red;font-size: 40px;font-style: italic;text-align: center;padding: 100px 200px;＂)  ＂＂＂ #如果报错 Fontconfig warning: ＂/etc/fonts/fonts.conf＂, line 100: unknown element ＂blank＂ Option ＂sandbox＂ is unknown. Ignoring. #报错原因 是因为默认谷歌浏览器，不需要设置浏览器为360浏览器即可 ＂＂＂
　　4 loading：
　　=======
　　4.1 加载圈效果图
　　4.2 代码：from pywebio.output import*  for shape in (＂border＂, ＂grow＂):     for color in (＂primary＂, ＂secondary＂, ＂success＂, ＂danger＂, ＂warning＂, ＂info＂,＂light＂, ＂dark＂):         put_text(shape, color)         put_loading(shape=shape, color=color)  # using style() to set the size style(put_loading(), ＂width:4rem; height:4rem＂)
　　5 processbar：
　　=========
　　5.1 进度条效果图：
　　5.2 代码：from pywebio.output import*  #输出进度条 import time #属于output put_processbar(＂bar＂) for i in range(1, 11):     set_processbar(＂bar＂, i / 10)     time.sleep(0.1)
　　6 input-box：
　　=========
　　6.1 效果图：
　　6.2 代码： #参数：input，NUMBER,FLOAT from pywebio.input import* from pywebio.output import*  ＂＂＂ #方法一 #请注意注意询问，独立页面 # 询问年龄：还有type=FLOAT age = input(＂How old are you?＂, type=NUMBER) #密码输入框 password = input(＂Input password＂, type=PASSWORD) #下拉式选择 xingbie = select(＂性别＂, [＂boy＂, ＂girl＂]) #选择框 agree = checkbox(＂User Term＂, options=[＂I agree to terms and conditions＂]) # 单选：Single choice answer = radio(＂Choose one＂, options=[＂A＂, ＂B＂, ＂C＂, ＂D＂]) # 多行文本：Multi-line text input text = textarea(＂Text Area＂, rows=3, placeholder=＂Some text＂) # 文件上传File Upload img = file_upload(＂Select a image:＂, accept=＂image/*＂) ＂＂＂  #方法二：一页多行显示：input_group函数 def check_age(p):      if p < 10:         print(＂Too young!!＂)     elif 10 60:         print(＂Too old!!＂) data = input_group(＂Basic info＂,[ input(＂Input your name＂, name=＂name＂), input(＂Input your age＂, name=＂age＂, type=NUMBER, validate=check_age) ]) put_text(data[＂name＂], data[＂age＂])
　　7 table：
　　======
　　7.1 表格效果图：
　　7.2 代码：from pywebio.input import* from pywebio.output import*  #方法一：简单输出表格 put_table([ #表头：默认黑体加粗 [＂name＂,＂City＂, ＂Country＂], #表内容 [＂LiBai＂, ＂Beijing＂, ＂China＂], [＂Tom＂, ＂New York＂, ＂America＂], ])  #方法二：高级一点：输出表格 put_table([ #name占2行row，Address占2列col [span(＂Name＂,row=2), span(＂Address＂, col=2)], [＂City＂, ＂Country＂], [＂LiBai＂, ＂Beijing＂, ＂China＂], [＂Tom＂, ＂New York＂, ＂America＂], ])  #方法三：高级输出模式 put_table([ [＂Type＂, ＂Content＂], [＂html＂, put_html(＂X2＂)], [＂text＂, ＂
＂], [＂buttons＂, put_buttons([＂A＂, ＂B＂], onclick=...)], #注意奇怪的＂’的符号 [＂markdown＂, put_markdown(＂`Awesome PyWebIO!`＂)], [＂file＂, put_file(＂hello.text＂, b＂hello world＂)], #嵌入表格 [＂table＂, put_table([[＂A＂, ＂B＂], [＂C＂, ＂D＂]])] ])
　　8 widget：
　　======
　　8.1 tpl的widget小部件效果图：
　　8.2 代码：from pywebio.input import* from pywebio.output import*  #小部件输出 tpl = ＂＂＂ 
 
{{title}}
 {{#contents}} {{& pywebio_output_parse}} {{/contents}} 
 ＂＂＂   put_widget(tpl, { ＂open＂: True, ＂title＂: ＂小部件widget-tpl＂, ＂contents＂: [ ＂text＂, put_markdown(＂~~火车~~＂), put_table([ [＂动物＂, ＂体重＂], [＂牛＂, ＂300＂], [＂羊＂, ＂100＂], ]) ] })
　　9 grid：
　　=====
　　9.1 布局效果图：
　　9.2 代码：from pywebio.input import* from pywebio.output import*  #方法一：默认的宽和高 put_text(＂方法一：默认的宽和高＂) put_grid( [ [put_text(＂A＂), put_text(＂B＂)], [put_text(＂C＂), put_text(＂D＂)], ] )  #方法二：指定的宽和高 put_text(＂方法二：指定的宽和高＂) put_grid( [ [put_text(＂天＂), put_text(＂地＂)], [put_text(＂风＂), put_text(＂雨＂)], ], #指定宽和高 cell_width=＂100px＂, cell_height=＂50px＂ )  #方法三：再高级一点 put_text(＂方法三：再高级一点＂) put_grid([           [put_text(＂鸡＂), put_text(＂鸭＂), put_text(＂鹅＂)],           #D是居中         [None, span(put_text(＂猪＂), col=2, row=1)],          [put_text(＂猫＂), put_text(＂狗＂), put_text(＂鸟＂)],       ], cell_width=＂50px＂, cell_height=＂50px＂)
　　10 官方示例demo：BMI
　　==================
　　10.1 BMI体重指数效果图：
　　10.2 代码：from pywebio.input import input, FLOAT from pywebio.output import put_text  def bmi():     height = input(＂请输入你的身高(cm)：＂, type=FLOAT)     weight = input(＂请输入你的体重(kg)：＂, type=FLOAT)      BMI = weight / (height / 100) ** 2      top_status = [(14.9, ＂极瘦＂),                   (18.4, ＂偏瘦＂),                   (22.9, ＂正常＂),                    (27.5, ＂过重＂),                   (40.0, ＂肥胖＂),                    (float(＂inf＂), ＂非常肥胖＂)]      for top, status in top_status:         if BMI <= top:             put_text(＂你的 BMI 值: %.1f，身体状态：%s＂ % (BMI, status))             break  if __name__ == ＂__main__＂:     bmi()
　　简单入门。