零基础超详细的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的文章,敬请期待。
最后说一句,截步骤图,真的好烦~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,204评论 4 61
  • 2017-06-04 学习之中,总存在这样或那样的误区。今天介绍3个部分的内容给大家增加学习效率,分别是张弛有度、...
    一粟于海阅读 942评论 0 0
  • 我的美国朋友L开了一个SPA店,于是我特意去捧场。话说这可真是我见过的最袖珍的SPA店,只有一个床位。而L既是老板...
    曲奇的旅行箱阅读 3,826评论 0 1
  • 有时候我们需要跳转到应用的详情页(下图),下面的代码就可以实现 跳转到应用的详情页 Intent intent =...
    hunter886阅读 5,963评论 0 3
  • “本文参与#感悟三下乡,青春筑梦行#活动,本人承诺,文章内容为原创,且未在其他平台发表过” 在炎热的七月,我们如...
    兰禾阅读 3,085评论 0 0