零基礎(chǔ)超詳細的webview創(chuàng)建教程

身為一個只有h5開發(fā)經(jīng)驗的程序猿,對iOS開發(fā)一直懷著一份好奇和恐懼的心情,oc從來沒有學(xué)過,Xcode也只是把它當(dāng)成在React Native開發(fā)時,運行一個application的載體。

在某天學(xué)習(xí)WebViewJavascriptBridge相關(guān)知識時,心血來潮,想玩玩iOS開發(fā),要求不高,能跑個webview,然后native和h5能通信就行??刹辉耄蜷_Xcode, 連怎么往app里拖控件,都需要求助度娘,真的是一頭霧水,所以決定記錄一下,供像我這樣的小白使用。

接下來是一大波步驟,只要夠細心,一般是不會有問題的,不過即使有問題,給我留言,我也不一定能幫你解決~~~~

  1. 打開Xcode, File->New->Project, 選擇“Single View Application”, 點擊Next;


  2. 輸入項目名稱,比如:webviewDemo, 點擊Next;


  3. 選擇存放的位置,點擊Create, 這樣一個應(yīng)用就成功被創(chuàng)建了。


  4. 視圖左邊,展開webviewDemo文件夾,選中Main.storyboard文件,


  5. 右上角設(shè)置Xcode,如下圖


    右上角視圖設(shè)置
  6. 選中View Controller, 設(shè)置模擬器大小



    4.png
  7. 然后就會看到如下圖的Scene的場景


    Scene
  8. 在Xcode的右下角,組件面板中,輸入webview搜索組件


  9. 選中Web View, 并將其拖拽至Scene,調(diào)整webview大小


    webview
  10. 確保右上角設(shè)置如下圖,先按住control鍵, 然后點擊Web View文件,將其拖拽至ViewController.h文件箭頭的位置。


  11. 彈出對話框,輸入組件名稱,比如:webView, 點擊connect, 然后會在ViewController.h以及ViewController.m文件中自動的新增幾行代碼。


  12. 在ViewController.m文件的viewDidLoad方法中,輸入以下代碼


  13. 這時候控制臺可能會出現(xiàn)如下錯誤

    解決方法:
    圖片來源:stackoverflow

    主要包括:
    (1)添加App Transport Security Settings
    (2)添加Allow Arbitrary Loads, 并將其設(shè)置為YES
    (3) 添加Exception Domains, 將www.baidu.com設(shè)置成為其中的一個Item
  14. 點擊工具欄中的三角形按鈕,或者command + R, 運行程序,這樣,webview就創(chuàng)建成功了。


接下來有空就來一片超詳細的WebViewJavascriptBridge的文章,敬請期待。
最后說一句,截步驟圖,真的好煩~~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,376評論 4 61
  • 2017-06-04 學(xué)習(xí)之中,總存在這樣或那樣的誤區(qū)。今天介紹3個部分的內(nèi)容給大家增加學(xué)習(xí)效率,分別是張弛有度、...
    一粟于海閱讀 165評論 0 0
  • 我的美國朋友L開了一個SPA店,于是我特意去捧場。話說這可真是我見過的最袖珍的SPA店,只有一個床位。而L既是老板...
    曲奇的旅行箱閱讀 696評論 0 1
  • 有時候我們需要跳轉(zhuǎn)到應(yīng)用的詳情頁(下圖),下面的代碼就可以實現(xiàn) 跳轉(zhuǎn)到應(yīng)用的詳情頁 Intent intent =...
    hunter886閱讀 2,130評論 0 3
  • “本文參與#感悟三下鄉(xiāng),青春筑夢行#活動,本人承諾,文章內(nèi)容為原創(chuàng),且未在其他平臺發(fā)表過” 在炎熱的七月,我們?nèi)?..
    蘭禾閱讀 460評論 0 0

友情鏈接更多精彩內(nèi)容