1 说明:
=====
1.1 环境:华为笔记本电脑、深度deepin-linux操作系统,Python3.8,微软vscode编辑器,谷歌浏览器。(支持华为,支持深度,支持国产科技)
1.2 pywebview是一个轻量级跨平台的 HTML 浏览器控件,可以在 GUI 应用中显示 HTML 内容。
2 加载html部分:
2.1 加载html的部分文字法
#官网例子import webviewimport timedef load_html(window): time.sleep(5) window.load_html('
This is dynamically loaded HTML
') #加载网页部分文字if __name__ == '__main__': window = webview.create_window('Load HTML Example', html='
This is initial HTML
') #网页初始文字 webview.start(load_html, window)
2.2 加载html图片:注意图片格式多样,包括jpg,gif,png等,本图片来源今日头条免费正版图片。
#加载jpeg图片。代码名:main.pyimport webviewimport timedef load_html(window): time.sleep(5) #图片20.jpeg与代码main.py在同一个目录下,即可,简单 window.load_html('')if __name__ == '__main__': window = webview.create_window('Load HTML Example', html='
This is initial HTML
') webview.start(load_html, window)
2.3 加载mp3
#加载本地mp3import webviewimport timedef load_html(window): time.sleep(5) window.load_html('')if __name__ == '__main__': window = webview.create_window('Load HTML Example', html='
This is initial HTML
') webview.start(load_html, window)
2.4 加载mp4
#加载mp4,终端有libva info提示?import webviewimport timedef load_html(window): time.sleep(5) window.load_html( '''
This is initial HTML
') webview.start(load_html,window)
3 加载整个html
3.1 加载整个html:单文件
3.1.1 单文件:pl_pie.html,与main.py在同一个目录下
这是plotly的单文件html可视化作图的饼图,以后会将到。
Javascript与Plotly结合的可视化作图
3.1.2 main.py代码:
#------加载整个html文件------#单文件html#加载外部html文件:pl_pie.htmlimport webviewif __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 webviewif __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)
===完美===
自己整理,分享出来,一秒就会。
喜欢就点赞,转发和收藏。