xcode集成h5+，采用官方最新SDK，并可以支持和原生ios函数接口通信

系统环境

macbook：macos high Sierra 10.13.4
xcode：Version 9.3 (9E145)
h5+sdk: 官网最新版

说明

因为工作需要，公司准备采用H5的方式来做app，搜索各种开发环境，rn
也自己研究过，是好东西，但是觉得学习周期可能过长，所以暂时采用国产的hbuilder，虽然坑比较多，但是还是硬着头皮上

基础成果

公司第一版的ios商城系统app提前上架，

集成环境开始

吐槽一下，集成的坑真的是多到爆呀，官方文档写的也是够了，集成到死的心都有了（哈哈，本人是做前端的，app开发不懂，所以有点懵弄的），rn的环境搭建多简单。好了，开始吧,主要还是基于官方文档来：http://ask.dcloud.net.cn/article/941

• xcode创建项目什么的就一笔带过了吧
• 复制HBuilder-Hello工程的相应文件到新创建的项目文件,文件为：

ViewController.h 和 ViewController.m
AppDelegate.h 和 AppDelegate.m

• 拷贝以下文件到新创建工程目录下

iOS-SDK/SDK/Bundles/PandoraApi.bundle
iOS-SDK/SDK/control.xml
iOS-SDK/SDK/Libs/libcoreSupport.a
iOS-SDK/SDK/Libs/liblibPDRCore.a
iOS-SDK/SDK/Libs/liblibUI.a

• 拷贝IOS-SDK/SDK/inc目录到新创建工程目录下，并添加到工程内
• 点击Project->TARGETS->Build Settings搜索“Other Linker Flags”，双击搜索到的项双击，在弹出框内添加想“-ObjC”

说明：官网评论中有人说不需要设置‘-ObjC’，但是集成过程中，没有设置的话会无法集成成功，如果有高人指导，希望可以告知一二

• 点击Projcet->General->Linked Frameworks and Libraries 添加系统库到工程

按照官网文档中的库文件导入吧，如下。
JavaScriptCore.framework
WebKit.framework
CoreTelephony.framework
MobileCoreServices.framework
SystemConfiguration.framework
MediaPlayer.framework
AudioToolbox.framework
Security.framework
QuartzCore.framework
CFNetwork.framework
Foundation.framework
CoreFoundation.framework
CoreGraphics.framework
UIKit.framework
QuickLook.framework
libstdc++.6.tbd
libxml2.tbd
libz.tbd
libsqlite3.0.tbd
ImageIO.framework
CoreText.framework

• 点击Project->TARGETS->Build Settings搜索“ARC”，修改"Objective-C Automatic Reference Counting"项的值为"NO", 如果希望使用ARC则需要修改相应的内存管理代码。

如果不修改，会出现ARC restrictions的错误

• 此时运行，肯定报错，报错内容如下：

Undefined symbols for architecture x86_64:
"OBJC_CLASS$_DCSplashAdObserver", referenced from:
objc-class-ref in AppDelegate.o
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
问题原因：
因为官方默认设置了开屏广告，但是我们有没有引入。
我的处理方式：
注释掉：AppDelegate.m 中的#import "DCSplashAdObserver.h" 和 #define dcSplashAd

• 此时运行，不出意外将提示成功，但是没有在模拟器中看到失败的页面，因为我们还没做完集成呀，继续。
• 修改头文件搜索路径：

点击Project->TARGETS->Build Settings搜索"Header Search Paths",
双击搜索到的"Header Search Paths"项，将工程目录下的inc目录拖到打开的下拉框

• 修改静态库搜索路径：

点击Project->TARGETS->Build Settings搜索"Library Search Paths",
如果"Library Search Paths"项下有值则不需要处理，
如果没有值则双击搜索到的"Library Search Paths"项，将工程目录下的libs目录(静态库所在目录)拖到打开的下拉框

• 修改BitCode

点击Project->TARGETS->Build Settings搜索BitCode
将Enable Bitcode项的值改成 ‘NO’

• 添加Web应用到工程

在工程目录下创建目录”Pandora->apps->[APPID]->www“目录，并将Web应用拷贝到www目录下
APPID为要加入到工程应用mainfest.json文件
添加Pandora目录到工程中

• 修改control.xml文件

修改control.xml文件的appid节点值为mainfest.json文件的id节点下内容,appver节点内容修改为manifest.json文件的version->name节点下内容

• 阶段性成果

此时再次运行模拟器，将看到hbulider官方demo页面，只是会出现模版未添加的提示，暂时先不管，可以小小的庆祝一下了，集成环境基本是ok的，如果需要增加模块，请查看官方sdk文件中的Feature-iOS.xls，并对应导入即可.

• 继续，设置应用的图标

点击project->target->General->App Icons and Launch Images->App Icons Source项右侧小箭头

• 设置应用的splash图片

拷贝HBuider-Hello工程的info.plist文件的UILaunchImages节点到新工程info.plist文件，同时拷贝HBuilder-Hello工程下的splash目录到新工程目录下并将其添加到新工程中
根据图片的尺寸逐个替换splash图片，注意文件名不能修改

• 修改info.plist文件，添加App Transport Security Settings类型为Dictionary，在该项下添加Allow Arbitrary Loads项类型为Boolean，值为YES
• 再次提示

运行时如果提示“打包时未添加XXX模块”，请参考SDK/Feature-ios.xls文件，查找对应插件名需要引入的5+库文件和系统库文件，添加到工程即可

• 如果只是为了集成到ios，那到这里，集成工作就完成了，其实这篇文章和官网一样，只是里面有一些注意事项：

1、splash、inc、libs文件夹一定是要记得add到项目，并且颜色是黄色。
2、库文件一定要按照官方或者本文档中的全部添加进去

集成环境完成了，但是真实环境往往需要和原生的ios进行通信，毕竟h5+很多系统级的操作还是无法更好的使用，比如：需要使用第三方公司的sdk，下面我们继续完成可以和原生ios通信的配置步骤：

• 扩展插件JS API 编写

首先要定义一个插件类别名，并需要在IOS工程的PandoraApi.bundle\feature.plist文件中声明插件类别名和Native层扩展插件类的对应关系，将一下demo添加到dict下
plugintest

class
PGPluginTest

• 具体的插件写法见官网：http://ask.dcloud.net.cn/article/67，我这里只是简单实现了一下。
• plugintest.js文件内容，文件是建立与ios原生通信的桥梁

document.addEventListener( "plusready", function()
{
var _BARCODE = 'plugintest',
B = window.plus.bridge;
var plugintest =
{
PluginTestFunction : function (Argus1, Argus2, Argus3, Argus4, successCallback, errorCallback )
{
var success = typeof successCallback !== 'function' ? null : function(args)
{
successCallback(args);
},
fail = typeof errorCallback !== 'function' ? null : function(code)
{
errorCallback(code);
};
callbackID = B.callbackId(success, fail);
return B.exec(_BARCODE, "PluginTestFunction", [callbackID, Argus1, Argus2, Argus3, Argus4]);
}
};
window.plus.plugintest = plugintest;
}, true );

• 使用的html页面

1、以下是异步调用
function PluginTestFunction() {
plus.plugintest.PluginTestFunction("Html5","Plus","AsyncFunction","MultiArgument!", function( result ) {
alert( result[0] + "" + result[1] + "" + result[2] + "_" + result[3] );
},function(result){
alert(result)
});
}
2、同步方式调用
function PluginTestFunctionSync()
{
plus.plugintest.PluginTestFunctionSync("Html5");
}
3、直接调用原生
function getText()
{
plus.plugintest.PluginTestFunctionSync("Html5");
}

结尾

到此处，一个干净并且可以使用js插件的集成环境已经完成。