首页 服务器系统 Linux

华为笔记本+深度deepin-linux操作系统：pywebview调用html

1 说明：

=====

1.1 环境：华为笔记本电脑、深度deepin-linux操作系统，Python3.8，微软vscode编辑器，谷歌浏览器。（支持华为，支持深度，支持国产科技）

1.2 pywebview是一个轻量级跨平台的 HTML 浏览器控件，可以在 GUI 应用中显示 HTML 内容。

2 加载html部分：

2.1 加载html的部分文字法

#官网例子
import webview
import time
def load_html(window):
    time.sleep(5)
    window.load_html('<h1>This is dynamically loaded HTML</h1>')  #加载网页部分文字
if __name__ == '__main__':
    window = webview.create_window('Load HTML Example', html='<h1>This is initial HTML</h1>')  #网页初始文字
    webview.start(load_html, window)

2.2 加载html图片：注意图片格式多样，包括jpg，gif，png等，本图片来源今日头条免费正版图片。

#加载jpeg图片。代码名：main.py
import webview
import time
def load_html(window):
    time.sleep(5)
    #图片20.jpeg与代码main.py在同一个目录下，即可，简单
    window.load_html('<img src="20.jpeg"  alt="头条图片" width="400" height="300"/>')
if __name__ == '__main__':
    window = webview.create_window('Load HTML Example', html='<h1>This is initial HTML</h1>')
    webview.start(load_html, window)

2.3 加载mp3

#加载本地mp3
import webview
import time
def load_html(window):
    time.sleep(5)
    window.load_html('<audio src="sn.mp3" controls="controls" autoplay="autoplay"></audio>')
if __name__ == '__main__':
    window = webview.create_window('Load HTML Example', html='<h1>This is initial HTML</h1>')
    webview.start(load_html, window)

2.4 加载mp4

#加载mp4,终端有libva info提示？
import webview
import time
def load_html(window):
    time.sleep(5)
    window.load_html(
    '''
    <video width="320" height="240" autoplay controls>
    <source src="video.mp4" type="video/mp4">
</video>
'''
)
if __name__ == '__main__':
    window = webview.create_window('Load HTML Example', html='<h1>This is initial HTML</h1>')
    webview.start(load_html,window)


3 加载整个html

3.1 加载整个html：单文件

3.1.1 单文件：pl_pie.html，与main.py在同一个目录下

这是plotly的单文件html可视化作图的饼图，以后会将到。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Javascript与Plotly结合的可视化作图</title>
	</head>
	<body>
		<div id="myDiv" style="width:600px;height:550px;"></div>
	</body>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	<!--以下需要修改数据-->
	<script>
		var data = [{
			values: [19, 26, 55],
			labels: ['A', 'B', 'C'],
			type: 'pie'
		}];
		var layout = {
			height: 400,
			width: 500
		};
		Plotly.newPlot('myDiv', data, layout);
	</script>
    <!--以上需要修改数据-->
</html>

3.1.2 main.py代码：

#------加载整个html文件------
#单文件html
#加载外部html文件：pl_pie.html
import webview
if __name__ == '__main__':
    webview.create_window('My first HTML5 application', 'pl_pie.html', text_select=True)
    webview.start()

3.1.3 效果图：


3.2 加载整个html文件，带有css和js文件夹和文件的。

3.2.1 来源：

#来源：https://www.mycodes.net/166/9399.htm
#对其代码进行修改、删除、并注释。

3.2.2 文件结构：

3.2.3 main.py代码

#加载复杂html文件带css和js文件夹
#加载外部html文件：
import webview
if __name__ == '__main__':
    webview.create_window('My first HTML5 application', 'elsfk.html', text_select=True)
    webview.start()
#来源：https://www.mycodes.net/166/9399.htm

3.2.4 elsfk.css代码：备注，源代码嵌套在html中，我将其独立出来。

/*主窗口*/
.MainFrame
{
    border: 1px solid burlywood;
    margin: 10px auto;
    position: relative;
    background-color: silver;
}
.MainFramediv
{
    float: left;
    margin: 1px;
    position: absolute;
}
.smallDiv
{
    margin: 1px;
    position: absolute;
}
.smallDivblack
{
    margin: 1px;
    position: absolute;
}
#tetris{
    width: 70%;
    margin: 0 auto;
    padding: 0;
}
#tetris:after{
    content:  "";
    Display:  block;
    Clear:  both;
}
#control{
    float: left;
    border: 1px solid silver;
    width: 150px;
    height: 578px;
    margin-top: 10px;
    margin-left: 20px;
    padding-top: 30px;
    font-size: 24px;
    font-weight: 400;
    color: blue;
    text-align: center;
}
#level,#regame{
    width: 100px;
    height: 30px;
    border: 1px solid blue;
    font-size: 16px;
    color: red;
    font-weight: 300;
}
#control p{
    margin-top: 200px;
}
#regame{
    margin-top: 100px;
    font-weight: 600;
    background-color: azure;
}
#TFrime{
    float: left;
}
#info{
    float: left;
    border: 1px solid silver;
    width: 150px;
    height: 578px;
    margin: 10px auto;
    padding-top: 30px;
    text-align: center;
    color: blue;
    font-size: 24px;
    font-weight: 400;
}
#nextfigure{
    width: 100px;
    height: 100px;
    background-color: silver;
    margin: 0 auto;
    margin-bottom: 100px;
    position: relative;
}
.drawdiv{
    background-color: red;
    margin: 1px;
    border: 1px solid silver;
    position: absolute;
}

3.2.5 其他代码省略，效果图：

3.2.6 附加：用python代码对css进行修改

import webview
#定义加载css的修改网页背景颜色
def load_css(window):
    window.load_css('body { background: lightgreen; }')
if __name__ == '__main__':
   # 注意下面与上面的区别
    window=webview.create_window('My first HTML5 application', 'elsfk.html', text_select=True)
    webview.start(load_css, window)

===完美===

相关推荐