聊聊iOS和h5交互的那些事-MUI

• 最近公司要求以后的项目要用iOS原生框架和h5页面结合完成,发现网上这方面的资料好少(js交互的资料是挺多的，我的h5页面是用MUI完成的，这方面的资料真的好少)

把我最近的进度做个总结

• 去MUI官网下载SDK 点击这里查看官方文档，下载SDK
• 下图是SDK文件夹

MUI_SDK.png

• Feature-iOS.xls 里面是常用静态库和动态库(这些东西我也不太懂)
• HBuilder-Hello 纯H5demo
• HBuilder-integrate iOS集成MUI SDK
• SDK 这个就不解释了

用webView 加载h5页面

• 1.SDK->Bundles->PandoraApi.bundle引入工程
• 2.SDK->inc 引入工程(注意是create groups形式)

找到工程里TARGETS->Build Settings ->Library Search Paths

360B1BE8-2C4E-40D9-A4AE-22278B6685EC.png

这里是引入动态库路径(我是这么理解的，如有误请指出)

• 3.SDK->Libs ->Release-iphoneos路径引入Release(发布模式)
• 4.SDK->Libs ->Release-iphonesimulator路劲引入Debug(调试模式)

7F794218-1F74-41E5-84DD-B347E08D6C1D.png

• 5.在Feature-iOS.xls中找到上图中的Framework画圈圈部分，工程->TARGETS->BuildPhases->Link Binary With Libraries 加入圈出来的framework
• 6.找到工程里TARGETS->Build Settings ->Other Linker Flags 把上图圈出来的-llibPDRCore 加进去

做完这些MUI的基本库就引入进来了，如果想要用到MUI里面的第三方登录，支付，地图，就按照上面的流程继续添加你需要的动态库和静态库

接下来引入h5文件

• 把h5工程拖入到你的工程，一定注意路径名不能有中文，不然有可能会找不到h5文件
• 在适当的位置添加如下代码(借用官方给的代码)

80E7B858-CCF2-457E-B7AF-F691ABFA9548.png

• 不出意外，你已经可以在oc 框架里显示h5页面了
• 这中间会出现各种莫名其妙的问题，反复搞几次就可以了

- 最后让我狠狠地吐槽下官方文档-->你TMD能再敷衍些么#￥%￥……#￥……#￥%……

• 关于 oc和js交互
  • JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架
  • JavaScriptCore by Example

---

2017-06-21 更新

一年多过去了, 很多人通过这个博客找到我, 其实我也就只用了 Hbuilder 一个多月的时间. 现在也忘得差不多了, 这篇文章也只是能帮你把项目跑起来, 更深入的知识需要去查官方文档(我继续吐槽官方文档, 一年前有多渣,现在就有多渣)

特意去看了下官方文档. 照着官方的步骤下来是不会成功的. 因为他缺少下面的系统库, 大家可以加上试试!

68E63EBD9D16A179114F71E1D5F1205E.png