零基础超详细的webview创建教程

身为一个只有h5开发经验的程序猿，对iOS开发一直怀着一份好奇和恐惧的心情，oc从来没有学过，Xcode也只是把它当成在React Native开发时，运行一个application的载体。

在某天学习WebViewJavascriptBridge相关知识时，心血来潮，想玩玩iOS开发，要求不高，能跑个webview，然后native和h5能通信就行。可不曾想，打开Xcode, 连怎么往app里拖控件，都需要求助度娘，真的是一头雾水，所以决定记录一下，供像我这样的小白使用。

接下来是一大波步骤，只要够细心，一般是不会有问题的，不过即使有问题，给我留言，我也不一定能帮你解决~~~~

1. 打开Xcode, File->New->Project, 选择“Single View Application”, 点击Next;

   
   
   

2. 输入项目名称，比如：webviewDemo, 点击Next;

   
   
   

3. 选择存放的位置，点击Create, 这样一个应用就成功被创建了。

   
   
   

4. 视图左边，展开webviewDemo文件夹，选中Main.storyboard文件，

   
   
   

5. 右上角设置Xcode,如下图

   
   
   

   右上角视图设置

6. 选中View Controller, 设置模拟器大小

   
   
   
   
   
   

   4.png

7. 然后就会看到如下图的Scene的场景

   
   
   

   Scene

8. 在Xcode的右下角，组件面板中，输入webview搜索组件

   
   
   

9. 选中Web View, 并将其拖拽至Scene，调整webview大小

   
   
   

   webview

10. 确保右上角设置如下图，先按住control键, 然后点击Web View文件，将其拖拽至ViewController.h文件箭头的位置。

    
    
    

11. 弹出对话框，输入组件名称，比如：webView, 点击connect, 然后会在ViewController.h以及ViewController.m文件中自动的新增几行代码。

    
    
    

12. 在ViewController.m文件的viewDidLoad方法中，输入以下代码

    
    
    
13. 这时候控制台可能会出现如下错误
    
    
    
    解决方法：
    
    

    图片来源：stackoverflow
    
    主要包括：
    （1）添加App Transport Security Settings
    （2）添加Allow Arbitrary Loads, 并将其设置为YES
    (3) 添加Exception Domains, 将www.baidu.com设置成为其中的一个Item

14. 点击工具栏中的三角形按钮，或者command + R, 运行程序，这样，webview就创建成功了。

    
    
    

接下来有空就来一片超详细的WebViewJavascriptBridge的文章，敬请期待。
最后说一句，截步骤图，真的好烦~~~