首页 APP开发 正文

uniapp开发手册(uniapp教程文档)

APP开发 1811
今天给各位分享uniapp开发手册的知识,其中也会对uniapp教程文档进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、uniapp原生插件开发(iOS)

今天给各位分享uniapp开发手册的知识,其中也会对uniapp教程文档进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

uniapp原生插件开发(iOS)

打开 Xcode,创建一个新的Framework工程,然后点击 Next

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

然后选中工程名,在TARGETS-Build Settings中,将 Mach-O Type 设置为 Static Library 如下图所示

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

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

然后选择您刚刚创建的插件工程路径中,选中插件工程文件,勾选 Create folder references 和 Add to targets 两项,然后点击Add

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

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

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

扩展原生功能有两种方式:

module:不需要参与页面布局,只需要通过 API 调用原生功能,比如:获取当前定位信息、数据请求等功能,通过扩展module的方式来实现;

component:需要参与页面布局,比如:map、image等需要显示UI的功能,通过扩展component即组件的方法来实现;

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

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

选中工程中的HBuilder-uniPlugin-Info.plist文件右键-Open As-Source Code找到dcloud_uniplugins节点,copy下面的内容添加到dcloud_uniplugins节点下,按插件的实际信息填写对应的项

在 uni-app 项目中调用 module 方法

生成 uni-app 本地打包资源

首先需要生成本地打包资源,在 HBuilderX 中选您的 uni-app 工程,右键-发现-原生App-本地打→生成本地打包App资源

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

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

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

新建一个 package.json 文件,根据插件实际情况填写插件配置信息

然后以插件id为名新建一个文件夹,将编辑好的 package.json 放进去,然后在文件夹中在新建一个 ios (小写)文件夹,将刚刚生成的依赖库(DCTestUniPlugin.framework)copy 到 ios 根目录,这样我们的插件包就构建完成了,如下图所示

HBuilderX 的 uni-app 项目创建中“nativeplugins”目录(如不存在则创建)将插件配置到uni-app项目下的“nativeplugins”目录

uni-app原生插件本地配置

将原生插件配置到uni-app项目的“nativeplugins”下,还需要在manifest.json文件的“App原生插件配置”项下点击“选择本地插件”,在列表中选择需要打包生效的插件:

uniapp原生插件开发问题汇总

uniapp原生插件开发与使用

问题1 : 导入UniPlugin-Hello-AS工程项目后,运行时虚拟器报device support x86 but apk only supports armeabi-v7a

问题2 :打包uni-app插件时,选择Gradle---插件module---Tasks---build---assembleRelease(双击运行生成module的aar文件)

双击运行assembleRelease时失败:

修改插件module的gradle:除了对sdk的arr包引入不用改为implementation,其他地方的compileOnly都需改为implementation。

成功:

成功获取插件module的aar文件:

备注:官网原生插件开发文档中添加依赖库是所有都用compileOnly,也不知道为什么到导致运行assembleRelease时报错,将compileOnly再改为implementation即可。

Uni-app之Nvue开发细节总结

uni-app App端内置了一个基于 weex 改进的原生渲染引擎,提供了原生渲染能力

其他:待补充

uniapp框架开发技巧

//以下摘自官方文档

/*Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。例如,当你设置 vm.someData = 'new value',该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。*/

//意思就是vue在更新视图层得数据时是异步得,可是有时候我们在代码中想要等待数据完全渲染上去dom节点之后再进行获取节点信息操作。比如使用selectorQuery.select(selector) 等相关api时,如果直接使用有时候会获取不到正确的数据,此时可以通过this.$nextTick(callback)的方式在回调函数里面进行操作dom节点

关于uniapp开发手册和uniapp教程文档的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫码二维码