简介uni小程序SDK

uni原生插件指的是将您原生开发的功能按照规范封装成插件包,然后即可在uni-app前端项目中通过js调用您开发的原生能力。

打开Xcode,创建一个新的工程,template选择Framework或StaticLibrary(示例工程选择的是Framework),然后点击Next

在ProductName中输入插件工程名称(建议使用一个性化的前缀,避免与其他人的插件包名冲突),其他项不需要修改保持工程默认填充的即可,然后点击Next

然后选择工程存放路径,建议直接存放在iOSSDK目录中的HBuilder-uniPluginDemo插件开发主工程目录下,如下图所示,然后点击Create

强烈建议将插件工程存放在HBuilder-uniPluginDemo插件开发主工程目录中,因为插件工程需要根据插件开发主工程相对路径引用一些文件,之后您升级SDK的时候只需要将您的插件工程Copy到新的SDK的相同位置下即可

可以删除工程自动创建的.h文件,这个文件用不到

然后选中工程名,在TARGETS->BuildSettings中,将Mach-OType设置为StaticLibrary如下图所示

然后将插件工程关闭,接下来需要将插件工程导入到插件开发主工程中

打开iOSSDK/HBuilder-uniPluginDemo工程目录,双击目录中的HBuilder-uniPlugin.xcodeproj文件运行插件开发主工程

在Xcode项目左侧目录选中主工程名,然后点击右键选择AddFilesto“HBuilder-uniPlugin”...

然后选择您刚刚创建的插件工程路径中,选中插件工程文件,勾选Createfolderreferences和Addtotargets两项,然后点击Add

这时在Xcode左侧目录中可以看到插件工程已经添加到了主工程中,如下图所示

然后在Xcode项目左侧目录选中主工程名,在TARGETS->BuildPhases->Dependencies中点击+

在弹窗中选中插件工程,如图所示,然后点击Add,将插件工程添加到Dependencies中

然后在LinkBinaryWithLibraries中点击+,同样在弹窗中选中插件工程,点击Add

此时可以看到Dependencies和LinkBinaryWithLibraries都添加了插件工程,如下图所示

接下来需要在插件工程的HeaderSearchPaths中添加开发插件所需的头文件引用,头文件存放在主工程的HBuilder-Hello/inc中,添加方法如下图所示,在Xcode项目左侧目录选中插件工程名,找到TARGETS->BuildSettings->HeaderSearchPaths双击右侧区域打开添加窗口,然后将inc目录拖入会自动填充相对路径,然后将模式改成recursive

原生插件是基于DCUniPlugin规范来实现,扩展原生功能有两种方式:

您需要根据实际的情况选择扩展方式,当然插件中可以同时存在module和component,也可以是多个module和多个component;

特别注意如果需要扩展自定义的module或者component,一定注意不要将oc的runtime暴露给JS,不要将一些诸如dlopen(),dlsym(),respondsToSelector:,performSelector:,method_exchangeImplementations()的动态和不可控的方法暴露给JS,也不要将系统的私有API暴露给JS。否则将可能面临苹果上架审核问题。

以TestModule为例,源码请查看iOSSDK/HBuilder-uniPluginDemo/DCTestUniPlugin插件工程;

新建TestModule类,继承DCUniModule,引入DCUniModule.h头文件。

TestModule.h文件

#import//引入DCUniModule.h头文件#import"DCUniModule.h"@interfaceTestModule:DCUniModule@endTestModule.h文件截图:

然后在TestModule.m文件中添加实现方法

异步方法实现

///异步方法(注:异步方法会在主线程(UI线程)执行)///@paramoptionsjs端调用方法时传递的参数支持:String、Number、Boolean、JsonObject类型///@paramcallback回调方法,回传参数给js端支持:NSString、NSDictionary(只能包含基本数据类型)、NSNumber类型-(void)testAsyncFunc:(NSDictionary*)optionscallback:(UniModuleKeepAliveCallback)callback{//options为js端调用此方法时传递的参数NSLog(@"%@",options);//可以在该方法中实现原生能力,然后通过callback回调到jsif(callback){//第一个参数为回传给js端的数据,第二个参数为标识,表示该回调方法是否支持多次调用,如果原生端需要多次回调js端则第二个参数传YES;callback(@"success",NO);}}通过宏UNI_EXPORT_METHOD将异步方法暴露给js端,只有通过UNI_EXPORT_METHOD暴露的原生方法才能被js端识别到

//通过宏UNI_EXPORT_METHOD将异步方法暴露给js端UNI_EXPORT_METHOD(@selector(testAsyncFunc:callback:))同步方法实现

///同步方法(注:同步方法会在js线程执行)///@paramoptionsjs端调用方法时传递的参数支持:String、Number、Boolean、JsonObject类型-(NSString*)testSyncFunc:(NSDictionary*)options{//options为js端调用此方法时传递的参数NSLog(@"%@",options);/*可以在该方法中实现原生功能,然后直接通过return返回参数给js*///同步返回参数给js端支持:NSString、NSDictionary(只能包含基本数据类型)、NSNumber类型return@"success";}通过宏UNI_EXPORT_METHOD_SYNC将同步方法暴露给js端

//通过宏UNI_EXPORT_METHOD_SYNC将同步方法暴露给js端UNI_EXPORT_METHOD_SYNC(@selector(testSyncFunc:))TestModule.m文件截图:

如果需要在App启动时初始化或者需要获取系统的一些事件,需要新建一个XXXXProxy类(注意命名加前缀防止冲突),继承NSObject遵守UniPluginProtocol协议

Module进阶

关于Module和Module方法的执行特性(同步、异步;执行线程),需要了解:

uniExecuteThread

Module方法默认会在UI线程(iOS主线程)中被调用,建议不要在这做太多耗时的任务。

如果你的任务不需要在UI线程执行或需要在特定线程执行,需要实现DCUniModule中的uniExecuteThread的属性,并返回你希望方法执行所在的线程。

Module自定义队列和线程

在DCUniModule中可以通过uniExecuteQueue来实现自定义queue,通过uniExecuteThread来实现自定义的thread

特别注意如果同时指定了uniExecuteQueue和uniExecuteThread,只会执行uniExecuteQueue,uniExecuteThread将会被忽略。

如果只实现了uniExecuteThread,代码中注意要线程保活

参考示例代码

hooksClass填写hooksClass类名pluginsclass填写module或component的类名name填写暴露给js端对应的module或component名称type填写module或component配置说明

配置完如下图所示**(必须严格按照格式配置)**:

到此,我们已经完成了一个简单的module扩展,接下来讲解如何在uni-app项目中调用刚刚扩展的module方法

module支持在vue和nvue中调用,添加如下代码

然后我们要生成uni-app项目的本地打包资源,导入到插件开发工程中,测试一下功能是否正常

本操作需要在HBuilderX中进行,需要您新建一个uni-app项目,并编写js端代码,最后导出本地资源右键->发现->原生App-本地打包->生成本地打包App资源

项目编译完成后会在HBuilderX控制台输出资源存路径,点击路径会自动打开资源所在文件夹

如下图所示,__UNI_7F5F813文件夹即为应用资源包(__UNI_7F5F813为uni-app的id)

接下来,将应用资源导入到插件开发主工程的HBuilder-Hello/Pandora/apps/中,如下图所示,直接拖进去即可

然后打开工程的control.xml文件,将appid改成uni-app的id,如下图所示

然后运行项目测试,如下图所示(能调到module的方法,并且可以获取module返回的数据,则说明功能正常)

注:前端代码修改后重新导入资源时,需要在插件开发工程中删除之前导入的资源,同时将模拟器或真机上的App删除,在按照上面的教程操作,避免因为缓存问题导致加载的还是旧的资源;

接下来,我们学习一下如何扩展Component

以TestComponent为例,源码请查看iOSSDK/HBuilder-uniPluginDemo/DCTestUniPlugin插件工程;

新建TestComponent类,继承DCUniComponent类(如果这个类里什么代码也不写,它和默认的的组件能力是一致的)

一个组件默认对应一个原生view,如果未复写loadView方法提供自定义view,会默认调用基类方法返回一个继承于UIView的实例。比如我们要实现一个组件支持地图功能,我们可以返回系统的MKMapView。

**注:**不需要为view设置frame,view的大小及位置由前端css决定

-(UIView*)loadView{return[MKMapViewnew];}-viewDidLoad

如果需要对组件view做一些配置,比如设置delegate,在viewDidLoad生命周期方法中是一个比较好的时机

**注:**可以直接通过self.view获取view实例

-(void)viewDidLoad{((MKMapView*)self.view).delegate=self;}至此,已经完成了一个简单component的实现

配置完后如下图所示

接下来可以在uni-app中使用组件

注意:扩展的component只能在nvue文件中使用,不需要引入即可直接使用

在uni-app项目中新建nvue文件,加入下面的代码

然后运行测试,效果如下图:

刚刚做的组件只实现了UI显示,下面讲解组件的交互方式等一些高阶用法

uni-app中是通过@事件名="方法名"添加事件,如下方代码所示在nvue中,给地图组件添加mapLoaded事件

-(void)onCreateComponentWithRef:(NSString*)reftype:(NSString*)typestyles:(NSDictionary*)stylesattributes:(NSDictionary*)attributesevents:(NSArray*)eventsuniInstance:(DCUniSDKInstance*)uniInstance{if(attributes[@"showsTraffic"]){_showsTraffic=[DCUniConvertBOOL:attributes[@"showsTraffic"]];}}在生命周期方法中记得将属性值同步给地图控件

-(void)viewDidLoad{((MKMapView*)self.view).showsTraffic=_showsTraffic;}当前端更新属性时,会触发updateAttributes:方法,同步给地图控件**

原生端实现

在组件代码中使用宏UNI_EXPORT_METHOD暴露原生方法供前端调用

@implementationTestMapComponent//通过UNI_EXPORT_METHOD将方法暴露给前端UNI_EXPORT_METHOD(@selector(focus:))//options为前端传递的参数,支持NSDictionary或NSString类型-(void)focus:(NSDictionary*)options{NSLog(@"%@",options);}@end在uni-app中调用focus:方法

uni-app完整项目存放在iOSSDK/HBuilder-uniPluginDemo/UniPluginDemo

在module和component中用于页面监听持久性事件,例如定位信息,陀螺仪等的变化。

globalEvent事件只能通过页面的DCUniSDKInstance实例给当前页面发送globalEvent事件。其他页面无法接受。

示例:

页面监听event事件

varglobalEvent=uni.requireNativePlugin('globalEvent');globalEvent.addEventListener('myEvent',function(e){console.log('myEvent'+JSON.stringify(e));});在原生代码发出myEvent事件

NSDictionary*dict=[NSDictionarydictionaryWithObjectsAndKeys:@"value",@"key",nil];NSString*eventName=@"myEvent";DCUniSDKInstance*instance=self.uniInstance;[instancefireGlobalEvent:eventNameparams:params];插件开发完毕并通过测试后,接下来就可以生成插件包了

此步骤应该在您插件所有功能都开发完毕,并在开发工程中测试完成进行

|--插件id//插件包是一个以插件id命名的文件夹|--android//存放android插件所需要的依赖库及资源文件|--ios//存放ios插件所需要的依赖库及资源文件|--package.json//插件配置文件插件包的目录结构是固定的,是一个以插件id命名的文件夹,其中android路径中放的是android端插件所需要的依赖库及资源文件,ios路径中放的是ios端插件所需要的依赖库及资源文件,package.json为插件的配置文件,接下来,我们需要生成iOS插件所需的依赖库,和编写package.json文件

如下图所示,将编译工程选择为插件项目(DCTestUniPlugin),运行设备选择GenericiOSDevice

然后点击EditScheme...

在弹窗中,将Run->Info->BuildConfiguration切换到Release,然后点击Close关闭弹窗

然后在Xcode左侧目录中选中插件工程名,查看TARGETS->BuildSettings->Architectures,确保

在iOSDeploymentTarget中选中最低支持的iOS版本,建议选择iOS11.0

然后点击运行按钮或Command+B编译运行工程

编译完成后,点击顶部菜单Product>ShowBuildFolderinFinder打开编译后的路径,Release-iphoneos中的库就是编译后的插件库文件;

package.json为插件的配置文件,配置了插件id、格式、插件资源以及插件所需权限等等信息

{"name":"TestUniPlugin","id":"DCTestUniPlugin","version":"1.0.0","description":"uni示例插件","_dp_type":"nativeplugin","_dp_nativeplugin":{"ios":{"plugins":[{"type":"module","name":"DCTestUniPlugin-TestModule","class":"TestModule"},{"type":"component","name":"dc-testmap","class":"TestComponent"}],"frameworks":["MapKit.framework"],"integrateType":"framework","deploymentTarget":"9.0"}}}然后以插件id为名新建一个文件夹,将编辑好的package.json放进去,然后在文件夹中在新建一个ios文件夹,将刚刚生成的依赖库(DCTestUniPlugin.framework)copy到ios根目录,这样我们的插件包就构建完成了,如下图所示

**注:**iOS插件包至少需要包含:package.json文件和ios文件夹(小写的ios)里面包含.a或.framework依赖库;

A:因为uni框架机制,module的uniInstance没有绑定viewController,故uniInstance.viewController值为nil,如果想通过UIViewController来跳转页面可使用下面的方法获取UIViewController**

//引用头文件#import"PDRCoreApp.h"#import"PDRCoreAppManager.h"#import"PDRCoreAppInfo.h"//获取路径信息PDRCoreAppInfo*appinfo=[PDRCoreInstance].appManager.getMainAppInfo;//将图片存储到appinfo.documentPath路径下即可,可以创建子目录;//示例,原生图片存储路径为NSString*imgPath=[appinfo.documentPathstringByAppendingPathComponent:@"test.png"];js端获取图片路径有两种方式

说明:"_doc"是一个特殊字符,和原生端的appinfo.documentPath对应

A:如果您依赖的三方库与SDK依赖的三方库冲突

A:为了解决部分功能库引用了一些第三方库可能与开发者项目的第三方库重复引用我们从3.0.7后对于部分库和资源进行了调整。

如果开发者原来工程对资源文件有引用,现在找不到资源文件,请参考下边列表(文件路径去离线SDK下的SDK/Bundles/下寻找)

如果开发者原来工程对库的头文件有引用,现在找不到头文件,请参考下边列表(文件路径去离线SDK下的SDK/inc/下寻找)

THE END
1.uView2.0全面兼容nvue的uniapp生态框架uni多平台快速开发的UI框架 四大利器,为您保驾护航 指南 涵盖uniapp各个方面,给开发者方向指导和设计理念,让您茅塞顿开,一马平川 组件 众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用 工具库 众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨 https://uviewui.com/
2.基础配置及使用/uniapp+vue3+ts+vite+vscodeuniapp目前(20230605)uni-app最新版本(3.8.4.20230531) 一、官网文档 微信开放文档 uni-app官网-quickstart uni-app官网-组件 二、创建项目 项目目标:vue3+ts+vite+vscode 创建以 typescript 开发的工程(如命令行创建失败,请直接访问gitee下载模板) npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base https://blog.csdn.net/snowball_li/article/details/124716125
3.uniApp零基础学习第1章之uniapp介绍以及首个项目运行uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、HarmonyOS、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。 DCloud 公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群https://www.jianshu.com/p/c162948546b1
4.uniapp开发小程序的完整流程记录vue.js本文详细介绍了使用uni-app进行项目开发的全过程,包括uni-app框架的介绍、开发工具HBuilderX的下载安装与配置、项目开发中的网络请求配置、小程序分包加载、自定义组件使用、组件使用技巧等,还提及了解决开发中遇到的一些问题,需要的朋友可以参考下+ 目录 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!【 如果你https://www.jb51.net/javascript/329973542.htm
5.uniapp可以开发app吗uniapp可以开发app。uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程序,h5等,一定程度上降低了开发的成本,个人开发的压力也在某种程度上减小了。关于uniapp开发app的具体内容我们将在文章中展开。 uniapp开发app的优势 1、uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程https://worktile.com/blog/know-741/
6.UNIAPP可视化开发工具UNIAPP可视化设计工具实现了UNIAPP后台、手机页面、以及模块生成等功能的一站可视化代码生成器,无需复杂操作UNIAPP一键生成后即可直接在UNIAPP上运行,开发者仅需负责更复杂的逻辑。https://www.diygw.com/uniapp.html
7.uniapp用什么开发uniappuniapp使用vue.js框架和针对不同平台的渲染引擎,允许开发者用一套代码构建跨平台应用,包括ios、android、h5和微信小程序等。其技术栈包含vue.js框架、渲染引擎和编译器等,具有跨平台、数据驱动、组件化和插件扩展等特点,适用于企业级应用、电商平台、内容管理系统和游戏等场景。 https://m.php.cn/faq/736682.html
8.uniAPP入门:从零开始的跨平台应用开发指南uni-APP 是由阿里云团队打造的一款前端框架,专为开发者提供跨 iOS、Android、Web 及小程序的统一开发环境。uni-APP 在简化代码重用、提升开发效率方面表现出色,其丰富的组件库和API,允许开发者使用一种语言(主要为 JavaScript)和一套代码库,即可构建出适用于多个平台的应用。本文将从跨平台性、组件丰富度、社区与支https://www.imooc.com/article/350863
9.uniuni-app实战在线教育类app开发 浏览316次 文章版权归作者所有,转载请联系作者授权。https://m.study.163.com/article/1284205417
10.uni1浏览量 问图书管理员 馆际互借 点赞 收藏 访问借阅管理系统 分享 作者:袁龙 ISBN:9787302592969 出版社:清华大学出版社 出版年:2022 作者:赵龙 ISBN:9787111690627 出版社:机械工业出版社 出版年:2022 Python+Kivy(App开发)从入门到实践 作者:明日科技主编 https://www.las.ac.cn/front/book/detail?id=44962cff01f857b18beafc0c340e36b6
11.uniuni-app页面路由为框架统一管理,开发者需要在page.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以uni-app的路由用法与Vue Router不同,如仍希望采用Vue Router方式管理路由,可在插件市场搜索Vue-Router。 路由跳转 http://www.360doc.com/content/20/0624/18/13328254_920326413.shtml
12.uniapp打包成H5部署到服务器教程腾讯云开发者社区当前端uniapp写的项目开发完成的时候,需要将页面打包出来,生成H5的静态文件,部署在服务器上,通过服务器链接地址,就可以直接在手机上点开访问 了。 在网上看了一圈,好像没有找到十分详细的教程,这里稍微详细的记录了一下,uniapp打包成H5部署到服务器教程。 https://cloud.tencent.com/developer/article/1657497
13.小程序开发uniapp引入iconfont图标及使用方式【小程序开发】uniapp引入iconfont图标及使用方式 本文主要讲述的是在使用uniapp中如何引入iconfont图标,以及两种常用的位置。 ●位置一:App下原生导航栏的按钮使用字体图标。 ●位置二:页面中的任意位置使用iconfont图标。 第一步:打开iconfont官网新建项目并添加自己所需要的图标https://open.alipay.com/portal/forum/post/109101015
14.图鸟UIuniapp:图鸟UI,基于uniMandy/图鸟UI-uniapp 加入Gitee 与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :) 免费加入 已有帐号?立即登录 master 克隆/下载 git config --global user.name userName git config --global user.email userEmail 分支1 标签2 https://portrait.gitee.com/bruce_qiq/tuniao-ui
15.UniAppUni_App 更多来自此开发人员的 App Zag App 教育 Eideo 教育 Flash_Book 教育 MRCS I.V 教育 Mideo Educational Videos 教育 3lm 教育 DR MOHAMED AYMAN 教育 Pina App 商务 Mediocology 教育 FB Courses 教育 Copyright ? 2024 Apple Inc. 保留所有权利。 互联网服务条款 App Store 与https://apps.apple.com/cn/app/uni-app/id1591479376?see-all=developer-other-apps
16.如何通过UniApp客户端接入增强版活体检测方案CertifyId,然后使用CertifyId唤起客户端SDK,并对认证结果进行查询。本文介绍UniApp客户端接入的操作方法。 接入前必读 近期发现有个人开发者封装阿里云增强版实人认证SDK后开发了第三方插件,并在某平台上提供付费下载服务。阿里云提醒您,如果您使用了此类非阿里云官方提供的插件或服务,阿里云概不对由此造成的一切后果负责,https://help.aliyun.com/document_detail/189747.html