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插件的集成环境已经完成。

你可能感兴趣的:(xcode集成h5+,采用官方最新SDK,并可以支持和原生ios函数接口通信)