系統(tǒng)環(huán)境

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

說明

因為工作需要，公司準備采用H5的方式來做app旬渠，搜索各種開發(fā)環(huán)境魏滚，rn
也自己研究過，是好東西坟漱，但是覺得學(xué)習(xí)周期可能過長，所以暫時采用國產(chǎn)的hbuilder更哄，雖然坑比較多芋齿，但是還是硬著頭皮上

基礎(chǔ)成果

公司第一版的ios商城系統(tǒng)app提前上架，

集成環(huán)境開始

吐槽一下成翩，集成的坑真的是多到爆呀觅捆，官方文檔寫的也是夠了，集成到死的心都有了（哈哈麻敌，本人是做前端的栅炒，app開發(fā)不懂，所以有點懵弄的）术羔，rn的環(huán)境搭建多簡單赢赊。好了，開始吧,主要還是基于官方文檔來：http://ask.dcloud.net.cn/article/941

• xcode創(chuàng)建項目什么的就一筆帶過了吧
• 復(fù)制HBuilder-Hello工程的相應(yīng)文件到新創(chuàng)建的項目文件,文件為：

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

• 拷貝以下文件到新創(chuàng)建工程目錄下

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目錄到新創(chuàng)建工程目錄下级历，并添加到工程內(nèi)
• 點擊Project->TARGETS->Build Settings搜索“Other Linker Flags”释移，雙擊搜索到的項雙擊，在彈出框內(nèi)添加想“-ObjC”

說明：官網(wǎng)評論中有人說不需要設(shè)置‘-ObjC’寥殖，但是集成過程中玩讳，沒有設(shè)置的話會無法集成成功，如果有高人指導(dǎo)嚼贡，希望可以告知一二

• 點擊Projcet->General->Linked Frameworks and Libraries 添加系統(tǒng)庫到工程

按照官網(wǎng)文檔中的庫文件導(dǎo)入吧熏纯，如下。
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則需要修改相應(yīng)的內(nèi)存管理代碼樟澜。

如果不修改，會出現(xiàn)ARC restrictions的錯誤

• 此時運行掐场，肯定報錯往扔，報錯內(nèi)容如下：

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)
問題原因：
因為官方默認設(shè)置了開屏廣告贩猎，但是我們有沒有引入。
我的處理方式：
注釋掉：AppDelegate.m 中的#import "DCSplashAdObserver.h" 和 #define dcSplashAd

• 此時運行萍膛，不出意外將提示成功吭服，但是沒有在模擬器中看到失敗的頁面，因為我們還沒做完集成呀蝗罗，繼續(xù)艇棕。
• 修改頭文件搜索路徑：

點擊Project->TARGETS->Build Settings搜索"Header Search Paths",
雙擊搜索到的"Header Search Paths"項，將工程目錄下的inc目錄拖到打開的下拉框

• 修改靜態(tài)庫搜索路徑：

點擊Project->TARGETS->Build Settings搜索"Library Search Paths",
如果"Library Search Paths"項下有值則不需要處理串塑，
如果沒有值則雙擊搜索到的"Library Search Paths"項沼琉，將工程目錄下的libs目錄(靜態(tài)庫所在目錄)拖到打開的下拉框

• 修改BitCode

點擊Project->TARGETS->Build Settings搜索BitCode
將Enable Bitcode項的值改成 ‘NO’

• 添加Web應(yīng)用到工程

在工程目錄下創(chuàng)建目錄”Pandora->apps->[APPID]->www“目錄，并將Web應(yīng)用拷貝到www目錄下
APPID為要加入到工程應(yīng)用mainfest.json文件
添加Pandora目錄到工程中

• 修改control.xml文件

修改control.xml文件的appid節(jié)點值為mainfest.json文件的id節(jié)點下內(nèi)容,appver節(jié)點內(nèi)容修改為manifest.json文件的version->name節(jié)點下內(nèi)容

• 階段性成果

此時再次運行模擬器桩匪，將看到hbulider官方demo頁面打瘪，只是會出現(xiàn)模版未添加的提示，暫時先不管傻昙，可以小小的慶祝一下了闺骚，集成環(huán)境基本是ok的，如果需要增加模塊妆档，請查看官方sdk文件中的Feature-iOS.xls僻爽，并對應(yīng)導(dǎo)入即可.

• 繼續(xù)，設(shè)置應(yīng)用的圖標

點擊project->target->General->App Icons and Launch Images->App Icons Source項右側(cè)小箭頭

• 設(shè)置應(yīng)用的splash圖片

拷貝HBuider-Hello工程的info.plist文件的UILaunchImages節(jié)點到新工程info.plist文件贾惦，同時拷貝HBuilder-Hello工程下的splash目錄到新工程目錄下并將其添加到新工程中
根據(jù)圖片的尺寸逐個替換splash圖片胸梆，注意文件名不能修改

• 修改info.plist文件，添加App Transport Security Settings類型為Dictionary须板，在該項下添加Allow Arbitrary Loads項類型為Boolean碰镜，值為YES
• 再次提示

運行時如果提示“打包時未添加XXX模塊”，請參考SDK/Feature-ios.xls文件习瑰，查找對應(yīng)插件名需要引入的5+庫文件和系統(tǒng)庫文件洋措，添加到工程即可

• 如果只是為了集成到ios，那到這里杰刽，集成工作就完成了菠发，其實這篇文章和官網(wǎng)一樣，只是里面有一些注意事項：

1贺嫂、splash滓鸠、inc、libs文件夾一定是要記得add到項目第喳，并且顏色是黃色糜俗。
2、庫文件一定要按照官方或者本文檔中的全部添加進去

集成環(huán)境完成了，但是真實環(huán)境往往需要和原生的ios進行通信悠抹，畢竟h5+很多系統(tǒng)級的操作還是無法更好的使用珠月，比如：需要使用第三方公司的sdk，下面我們繼續(xù)完成可以和原生ios通信的配置步驟：

• 擴展插件JS API 編寫

首先要定義一個插件類別名楔敌，并需要在IOS工程的PandoraApi.bundle\feature.plist文件中聲明插件類別名和Native層擴展插件類的對應(yīng)關(guān)系啤挎，將一下demo添加到dict下
<key>plugintest</key>
<dict>
<key>class</key>
<string>PGPluginTest</string>
</dict>

• 具體的插件寫法見官網(wǎng)：http://ask.dcloud.net.cn/article/67，我這里只是簡單實現(xiàn)了一下卵凑。
• plugintest.js文件內(nèi)容庆聘，文件是建立與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、以下是異步調(diào)用
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勺卢、同步方式調(diào)用
function PluginTestFunctionSync()
{
plus.plugintest.PluginTestFunctionSync("Html5");
}
3伙判、直接調(diào)用原生
function getText()
{
plus.plugintest.PluginTestFunctionSync("Html5");
}

結(jié)尾

到此處，一個干凈并且可以使用js插件的集成環(huán)境已經(jīng)完成黑忱。