• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

基于Swift3+WKWebView的WebView壳程序开发

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近想基于WebView做一个简单的iOS程序,把折腾过程记录在这里,供参考。

1. 新建一个Swift工程

选择Single View App

语言类型选择"Swift"

2. 修改ViewController的继承类

ViewController增加几个继承类: UIWebViewDelegate, WKNavigationDelegate, UIScrollViewDelegate, WKScriptMessageHandler

3. 在ViewController中增加WKWebView属性:

let webView: WKWebView = WKWebView()

4. 在viewDidLoad中增加对webView的初始化代码:

//webView自动覆盖到view边界

webView.frame=view.bounds

//禁止webView自动缩放
       webView.translatesAutoresizingMaskIntoConstraints=false
       webView.navigationDelegate=self

//禁止边界滚动
       webView.scrollView.bounces=false
       webView.scrollView.delegate=self
       view.addSubview(webView)

5. webView加载页面

if let url=URL(string: "http://192.168.2.113:8080/netpro-yjxtApp-web/logout") {
            print("url="+url.absoluteString)
            webView.load(URLRequest(url: url))
            print("load end!")
        }

6. webView加载页面的事件处理

1) 页面开始加载时调用

在ViewController中增加一个方法

func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!){
        print("加载中");
       }

2) 页面加载完成后调用

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!){
        print("加载完成"); 
       }

7. 从JS端调用Native代码

JS端调用Native代码是通过消息机制完成的。

首先在Native端,需要注册一个消息接口变量:

webView.configuration.userContentController.add(self, name: "callbackHandle")

这里注册的消息接口变量就是callbackHandle,这个变量将在JS里面使用。

然后在JS端,使用上面定义的消息接口变量向Native发送消息:

<script type="text/javascript">

var message= {
             'method': 'haha method!!!',
             'param1': 'haha param1 value, can you see it?'
       };
       window.webkit.messageHandlers.callbackHandle.postMessage(message);

</script>

最后,在Native端对消息进行拦截处理。需要在ViewController中增加一个方法:

//实现js调用ios的handle委托
       func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
          //接受传过来的消息从而决定app调用的方法
          let dict = message.body as! Dictionary<String,String>

   //即为JS message中的method属性
          let method:String = dict["method"]!

   //即为JS message中的param1属性
          let param1:String = dict["param1"]!
          print("method="+method)
          print("param1="+param1)
       }

 

最后,附上ViewController中的完整代码:

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

import UIKit
       import WebKit

class ViewController: UIViewController,
                      UIWebViewDelegate,
                      UITextFieldDelegate,
                      WKNavigationDelegate,
                      UIScrollViewDelegate,
                      WKScriptMessageHandler {
            @IBOutlet weak var loading: UIActivityIndicatorView!
   
            let webView: WKWebView = WKWebView()
   
            override func viewDidLoad() {
                super.viewDidLoad()
                webView.frame=view.bounds
                webView.translatesAutoresizingMaskIntoConstraints=false
                webView.navigationDelegate=self
                webView.scrollView.bounces=false
                webView.scrollView.delegate=self
                view.addSubview(webView)
                webView.configuration.userContentController.add(self, name: "callbackHandle")
                // Do any additional setup after loading the view, typically from a nib.
                if let url=URL(string: "http://192.168.2.113:8080/netpro-yjxtApp-web/logout") {
                    print("url="+url.absoluteString)
                    webView.load(URLRequest(url: url))
                    print("load end!")
                }
            }
    
            override func didReceiveMemoryWarning() {
                super.didReceiveMemoryWarning()
            }
    
            // 页面开始加载时调用
            func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!){
                print("加载中");
            }
    
            // 页面加载完成之后调用
            func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!){
                print("加载完成");        
            }
    
            //实现js调用ios的handle委托
            func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
                //接受传过来的消息从而决定app调用的方法
                let dict = message.body as! Dictionary<String,String>
                let method:String = dict["method"]!
                let param1:String = dict["param1"]!
                print("method="+method)
                print("param1="+param1)
            }
    
            func viewForZooming(in scrollView: UIScrollView) -> UIView? {
                return nil
            }
    
            func scrollViewWillBeginZooming(_ scrollView: UIScrollView, with view: UIView?) {
                scrollView.pinchGestureRecognizer?.isEnabled = false
            }
        }

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Swift-推送之本地推送(UILocalNotification)添加Button的点击事件发布时间:2022-07-13
下一篇:
swift与OC之间不得不知道的21点发布时间:2022-07-13
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap