前军教程网

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<p<60:
        print('Right!!')
    elif p > 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('X<sup>2</sup>')],
['text', '<hr/>'],
['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 = '''
<details {{#open}}open{{/open}}>
<summary>{{title}}</summary>
{{#contents}}
{{& pywebio_output_parse}}
{{/contents}}
</details>
'''


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()

简单入门。