pywebview：python更好用的web框架學

pywebview：python更好用的web框架學習之圖片顯示

說明：

=====

1.1 進一步學習pywebview相關知識。

1.2 多種方法顯示圖片；html相關知識復習，通俗易懂，使用起來比Eel方便。

1.3 一秒入門，小白一看就會，少走彎路。

2 圖片來源：

=========

正版圖片免費使用。

取名：20.jpeg

3 圖片顯示：

=========

3.1 方法一，代碼：

#方法一：默認圖片大小顯示法
import webview
if __name__=='__main__':
   #圖片與py代碼文件放在同一個文件夾即可
    webview.create_window('圖片顯示', '20.jpeg', text_select=True)
    webview.start()

3.2 方法二，代碼：

#方法二：指定窗口大小，圖片原圖顯示法
import webview
if __name__=='__main__':
    webview.create_window('圖片顯示', '20.jpeg', text_select=True,width=400, height=300)
    webview.start()

3.3 方法三，代碼：

#方法三：理解url和html
import webview
#html='20.jpeg'
pic='20.jpeg'
if __name__=='__main__':
    #窗口默認大小，注意如果下面是html=pic或者html就報錯
    webview.create_window('圖片顯示', url=pic, text_select=True)
    webview.start()

3.4 方法四，

3.4.1 py代碼：文件名：main.py

#方法四：全屏打開html，顯示原圖大小
import webview
html='1.html'
if __name__=='__main__':
    #窗口默認大小，注意如果下面是html=pic或者html就報錯
    webview.create_window('圖片顯示', url=html, text_select=True)
    webview.start()

4.4.2 注意：這里多一個：1.html文件，代碼為：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--原圖大小顯示-->
    <!--img src="20.jpeg"  alt="頭條圖片" /-->
    <!--指定圖片大小顯示,如果指定位置顯示那就是html相關知識-->
    <img src="20.jpeg"  alt="頭條圖片" width="400" height="300"/>
</body>
</html>

4.4.3 效果圖：

4.4.4 復習快速用微軟vscode編輯器新建html的方法，gif示意圖：

注意英文狀態的輸入法下的“！”,然后再回車即可。

自己整理，分享出來，喜歡就點贊、轉發和收藏。

| 王成

本文轉載自SegmentFault

WebP格式介紹

WebP是Google開發的一種新的圖片格式，它支持有損壓縮、無損壓縮和透明度，壓縮后的文件大小比JPEG、PNG等都要小。所以可以節省帶寬，減少頁面載入時間，節省用戶的流量。

Android和iOS的App只要引入Google提供的解碼庫，都可以很輕松的支持WebP格式。不過在Web上，WebP的支持還不是很廣泛。根據Can I Use的數據，目前只有Chrome、Opera瀏覽器，以及Android的WebView是支持WebP的。但是WebP圖片有這么多優點，我們能不能在Web頁面中使用呢？可以。這篇文章就來討論一下這個問題。

把已有的圖片轉換為WebP格式

要使用WebP格式，需要將你網站用到的圖片都制作一份WebP格式的版本，如果你使用CDN服務商，它們一般都會提供轉碼到WebP格式的選項。如又拍云：

增加這樣的配置后，我們可以通過給圖片URL加上相應的后綴，來使用WebP格式的版本資源。

你也可以使用Webpack、Gulp的插件來批量轉換圖片格式。這里不贅述。

在瀏覽器中使用WebP格式

因為不是所有瀏覽器都支持WebP格式，我們就有兩種思路：一個是只在支持WebP格式的瀏覽器中使用WebP格式；一個是讓不支持WebP格式的瀏覽器可以支持WebP。

姿勢一： <Picture>標簽

<Picture>是HTML5中的一個新標簽，類似<Video>它也可以指定多個格式的資源，由瀏覽器選擇自己支持的格式進行加載。

</picture>

如果瀏覽器支持WebP格式，就會加載Image.webp，否則會加載Image.jpg。

即使瀏覽器不支持<Picture>標簽，圖片仍然會正常顯示，只是CSS可能無法正確選取到Picture元素。比如在IE8中，下面的CSS就不會起作用：

.picture img { width: 100px; height: 100px;}

但是可以這樣來給圖片寫樣式：

.image { width: 100px; height: 100px;}

即使瀏覽器使用的是WebP格式的圖片，最終還是會應用img元素的樣式。

不過只要使用了HTML5Shiv，使舊的瀏覽器支持這個標簽，CSS選擇器就可以正常使用了。這種方法是最簡單的，但是不能作用于CSS中的圖片（如背景）。

姿勢二：使用JS替換圖片的URL。

我們有很多的頁面往往會用到圖片的“懶加載”——通常是把圖片的URL放在Img元素的一個自定義屬性中，然后用JS在適當的時機將URL賦值給SRC屬性。用類似的原理，我們可以根據瀏覽器是否支持WebP格式，給Img元素賦予不同的SRC值。

首先我們需要用JS來判斷瀏覽器是否支持WebP格式，方法是給瀏覽器一個WebP格式的圖片，看瀏覽器能否正確渲染。這種方法是異步的，所以需要把后續的操作寫在回調函數中。我們可以將結果存儲在LocalStorage中，這樣之后就不用再次檢查了。

function checkWebp(callback) { var img=new Image();

img.onload=function () { var result=(img.width > 0) && (img.height > 0);

callback(result);

};

img.onerror=function () {

callback(false);

};

img.src='data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';

}

然后用下面的代碼來根據是否支持WebP替換相應的SRC。

function showImage(useWebp){ var imgs=Array.from(document.querySelectorAll('img'));

imgs.forEach(function(i){ var src=i.attributes['data-src'].value; if (useWebp){

src=src.replace(/\.jpg$/, '.webp');

}

i.src=src;

});

}

checkWebp(showImage);

這種方式的優點是可以與已有的懶加載函數相結合。而且使用JS，我們還可以處理CSS中的圖片（如背景圖等）。

姿勢三：使用JS解碼WebP圖片

既然WebP的解碼器是開源的，那么能否用JS來實現呢？當然可以，有人就用JS寫出了WebP的解碼器。引入這個JS庫，就是將所有的WebP圖片用JS解碼后轉換為Base64，然后替換掉原來的URL，這樣就可以讓原本不支持WebP的瀏覽器正常顯示WebP了。這個庫的使用方法非常簡單，看網頁的說明即可。

這種方法的缺點是，因為JS要解碼WebP圖片，需要在此異步請求SRC中的URL（不過因為圖片本身之前被下載了一次，直接使用了緩存）；而且JS解碼比較慢，對性能有影響，可能需要一段時間才能顯示出圖片來。

以上就是在瀏覽器中使用WebP圖片的幾種方法，可以根據自己的實際情況選用。在我們的實踐中，使用了WebP格式后，圖片的體積普遍縮小了1/3以上，既加快了加載的速度，還節省了用戶的流量，我們十分推薦從現在就開始使用這種格式。

又小拍也關注WebP一段時間呢，不但關注了WebP，還關注了動態WebP，不久之后會有驚喜帶給大家哦。

又拍云的處理功能實在太豐富，在圖片處理方面，略縮圖任意尺寸更改，全網一鍵更新所有圖片，打水印，URL防盜鏈等。最近上線的又拍直播云，除了直播加速、推拉流外，更具有豐富的美顏、濾鏡、水印、防盜鏈、鑒黃、禁播等功能，幫助直播平臺快速上線直播業務，快來試試吧~

言

WKWebView是iOS8 出來的瀏覽器控件,用來取代UIWebView.對于WKWebView與UIWebView的對比特點,這里就不過多的敘述,都算是老生常談的問題了,網上的說明也很多.近來在做Web端,需要植入移動端,并且做JS交互工作.以前寫過的JavaScript:淺談iOS與H5的交互-JavaScriptCore框架是用于UIWebView.在WKWebView并不適用了,自己做的過程中遇到一些坑,在這里總結一下,做一下記錄.

WKWebView加載本地 html文件

現在的項目要求就是使用存儲在本地的html文件 js文件 css文件 img圖片等文件.我使用HBuilder創建了一個Demo工程.里面包含了基本的文件以及圖片資源.如下所示.然后拖到Xcode工程中.

然后我們把整個Html工程文件夾導入工程中.

WKWebView 在iOS 9 有新的加載本地方法- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));.但是我看了網上有一些博客說- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;并不能加載本地html文件.其實兩者都能加載.只是需要把路徑寫對.第一個方法就不過多敘述了.網上有很多的博客.這里我就用第二個方法來看一下如何加載.

NSString *path=[[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"index.html"];

NSURLRequest *request=[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];

[_mainWebView loadRequest: request];

運行效果圖如下.

Xcode工程中 html文件加載js文件 css文件 img文件

上面我們加載了html.可是css樣式 .img文件和js文件都沒有加載出來.那么我們該如何解決呢?(html原始加載圖如下所示.)

對于css文件、img文件 ,js文件我們只需要把html文件中的文件夾路徑刪除即可.如下所示.

???????? 注意:這里是使用的- (WKNavigation *)loadRequest:(NSURLRequest *)request;方式加載的網頁.所有如上設置即可.如果使用的是loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL或者loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;都需要設置本地資源文件所對應的路徑! 我們只需要把資源文件所對應的路徑設置給readAccessURL 和 baseURL即可(). 例如下面所示.

//假定都在工程根目錄之下.

NSURL *baseURL=[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

[_mainWebView loadHTMLString:[self loadHtmlString] baseURL:baseURL];

對于js文件,有時候我們發現我們就算如上刪除了js文件夾的路徑依然不能使用.這是為什么呢?.這里就要去檢測查看工程的設置,是否把js文件當成一個可編譯文件使用了.我們需要把它移動到資源文件中.這樣就能正常加載了.如下圖所示.

WKWebView中警告窗確認面板輸入框的顯示

相比于UIWebView,WKWebView對警告窗確認面板輸入框并不能直接顯示.是通過WKUIDelegate代理方法收到對應的回調方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;

//接收到確認面板

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

//接收到輸入框

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

我們只需要對上面的回調方法進行實現即可實現顯示警告窗確認面板輸入框等需求.

WKWebView中OC方法調用JS方法

在WKWebView OC方法調用JS方法方法比較簡單.我們只需要使用如下方法即可.

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

看一下我寫的例子.在index.js中定義一個方法.方法內容為彈出一個警告框.代碼如下所示.

function alertAction(message) {

alert(message);

}

然后在ViewController控制器中定義一個Button.定義它的點擊方法.代碼如下所示.

- (UIButton *)alertButton{

if (_alertButton==nil) {

_alertButton=[[UIButton alloc] initWithFrame:CGRectMake(KMainWidth*0.2, KMainHeight - 60, KMainWidth * 0.6, 40)];

_alertButton.backgroundColor=[UIColor colorWithRed:250/255.0 green:204/255.0 blue:96/255.0 alpha:1.0];

_alertButton.layer.cornerRadius=6.0f;

_alertButton.layer.masksToBounds=YES;

_alertButton.titleLabel.font=[UIFont systemFontOfSize:16];

[_alertButton setTitle:@"彈出彈窗" forState:UIControlStateNormal];

[_alertButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[_alertButton addTarget:self action:@selector(alertButtonAction) forControlEvents:UIControlEventTouchUpInside];

}

return _alertButton;

}

- (void)alertButtonAction{

[self.mainWebView evaluateJavaScript:@"alertAction('OC調用JS警告窗方法')" completionHandler:^(id _Nullable item, NSError * _Nullable error) {

NSLog(@"alert");

}];

}

因為彈窗不能直接顯示.所以我們實現了對應的代理方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

UIAlertController *alert=[UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action=[UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

completionHandler();//此處的completionHandler()就是調用JS方法時，`evaluateJavaScript`方法中的completionHandler

}];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

這時候我們點擊按鈕就會調用對應的JS方法了.相比于JavaScriptCore框架還是非常簡單的.效果圖如下所示.

WKWebView中JS方法調用OC方法

上一個模塊我們看到了OC方法調用JS方法.那么JS方法調用OC方法呢?我們也只需要幾步就可以完成調用.

第一步.我們需要在WKWebView創建的過程中初始化添加ScriptMessageHandler.(命名自定例如:currentCookies.如下所示)

WKWebViewConfiguration *configuration=[[WKWebViewConfiguration alloc] init];

WKUserContentController *userController=[[WKUserContentController alloc] init];

configuration.userContentController=userController;

_mainWebView=[[WKWebView alloc] initWithFrame:CGRectMake(0, 0, KMainWidth, KMainHeight) configuration:configuration];

[userController addScriptMessageHandler:self name:@"currentCookies"];

然后實現代理方法.監聽JS的回調.為了查看效果,我們仍然使用彈窗的形式展示我們的回調信息.代碼如下所示.

//JS調用的OC回調方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

if ([message.name isEqualToString:@"currentCookies"]) {

NSString *cookiesStr=message.body;

NSLog(@"當前的cookie為： %@", cookiesStr);

UIAlertController *alert=[UIAlertController alertControllerWithTitle:@"提示" message:@"JS調用的OC回調方法" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action=[UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:nil];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

然后在Html文件中添加點擊方法.

點擊調用OC方法

</div>

緊接著.在js文件中實現點擊事件.這時候要注意的是ScriptMessageHandler的名稱要與上面定義的一致.

function buttonDivAction() {

window.webkit.messageHandlers.currentCookies.postMessage({

"body": "buttonActionMessage"

});

}

然后我們點擊網頁中對應的div就會出現對應的彈窗.效果圖如下所示.

并且控制臺打印信息如下所示.

總結

相比于UIWebView,WKWebView確實更加的方便快捷.本篇博客就到這里了.如果有任何問題,歡迎在評論區回復騷棟.感謝觀看,最后還是附上本篇博客的Demo傳送門.

在線咨詢

上一篇：如何將源文件為HTML的PDF文件轉成HTML
下一篇：2022 年前端工程師學習路線圖（完整版）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

pywebview：python更好用的web框架學

您的項目需求