uniapp如何使用原生app开发（uniapp开发的app用户体验如何）

本篇文章给大家谈谈uniapp如何使用原生app开发，以及uniapp开发的app用户体验如何对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、uniapp原生插件开发(iOS)
• 2、uniapp原生插件开发问题汇总
• 3、混合开发之uni-app
• 4、uniapp原生插件开发-android端-component扩展
• 5、uni-app App端中使用 原生插件引入
• 6、uniApp与原生Android 的交互(uni生成android壳子)

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

uni-app App端内置weex渲染引擎，提供原生渲染能力

然而， Weex并不是一个前端框架 。实际上，前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language)，它们与原生渲染引擎是分离的。换句话说，Weex 并不依赖于特定的前端框架，随着前端技术的发展，Weex 也可以集成更多广泛使用的前端框架。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力，使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。而 nvue 解决了这个大问题，让前端工程师可以直接开发完整 App，并提供原生插件的市场交易和云打包。这些组合方案，开发者切实的提高效率、降低成本。

如果你是web前端，不熟悉 weex，那么建议你仍然以使用 vue 为主，在App端某些 vue 表现不佳的场景下使用 nvue 作为强化补充：

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力。

小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。

在普通的 H5+ 项目中，需要使用 document.addEventListener 监听原生扩展的事件。

uni-app 中，没有 document。可以使用 plus.globalEvent.addEventListener 来实现（注意manifest中需开启新编译器，即自定义组件模式"usingComponents":true）。

同理，在 uni-app 中使用 Native.js 时，一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。

注意：旧编译器（非自定义组件模式）不支持 plus.globalEvent 这个对象。

uniapp原生插件开发-android端-component扩展

本篇为 uniapp原生插件开发-android端-component扩展

这里实现一个原生的MPAndroidChart的饼状图扩展

效果如下

提醒：修改完这些你可能需要重新打开android studio，不知道是不是我的as版本太新了，修改了，然后一直停止不了之前的同步进程，重新打开as让他构建项目

该组件的调用方式为：

方法描述

initComponentHostView :使用该组件时，会自动调用该方法,返回一个你要扩展的原生组件

@UniComponentProp(name = "labelColor") ：给该组件添加一个属性,类似调用方式的 labelColor="#8A2BE2"

@UniJSMethod :声明一个该组件的方法,可以通过 this.refs.tPieChart.rotate() ，调用aging方法

uni-app App端中使用 原生插件引入

1.点击购买（0元）for云打包

2.选择需要使用原生插件的项目

3.选择项目后 ， 需要绑定app打包时的包名

4.点击下一步即可

1.在项目当中找的 manifest.json 文件 进行app原生插件绑定

2.页面引入原生插件 使用 uni.requireNativePlugin 方法引入 原生插件

3.插件id 如图

4.完成以上步骤 ，就引入成功了

uniApp与原生Android 的交互(uni生成android壳子)

3、在开发者中心配置Android证书签名

4、本地打包

打开HBuilder-Integrate-AS项目，将本地打的包拷贝到assets文件夹

关于uniapp如何使用原生app开发和uniapp开发的app用户体验如何的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。