uniapp原生插件开发问题汇总(3.uniapp项目中引入小程序ui -vant weapp组件)

2023-11-03 22:50:12 | 新橄榄网

小编今天整理了一些uniapp原生插件开发问题汇总(3.uniapp项目中引入小程序ui -vant weapp组件)相关内容,希望能够帮到大家。

本文目录一览:

uniapp原生插件开发问题汇总(3.uniapp项目中引入小程序ui -vant weapp组件)

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即可。

uniapp原生插件开发问题汇总(3.uniapp项目中引入小程序ui -vant weapp组件)新橄榄网

3.uniapp项目中引入小程序ui -vant weapp组件

项目需求:

想要知道如何在uniapp项目中引入使用小程序ui-vant weapp组件,首先得了解如果在uniapp项目中使用小程序组件

微信小程序组件 需要放在项目特殊文件夹 wxcomponents 。

在 pages.json 对应页面的 style -> usingComponents 引入组件:

在页面中使用

我对这句话的理解是:

而我们想在uniapp项目中使用vant weapp微信小程序组件的诉求,其实是想在项目中任何位置都可以使用vant组件,所以我们需要全局注册vant小程序组件



并不需要注册所有的,你使用那个组件注册那个就行

注意事项:

uniapp原生插件开发问题汇总(3.uniapp项目中引入小程序ui -vant weapp组件)

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原生插件开发问题汇总(3.uniapp项目中引入小程序ui -vant weapp组件)”相关推荐
3.uniapp项目中引入小程序ui -vant weapp组件(微信小程序引入第三方UI组件)
3.uniapp项目中引入小程序ui -vant weapp组件(微信小程序引入第三方UI组件)

3.uniapp项目中引入小程序ui-vantweapp组件项目需求:想要知道如何在uniapp项目中引入使用小程序ui-vantweapp组件,首先得了解如果在uniapp项目中使用小程序组件微信小程序组件需要放在项目特殊文件夹wxcomponents。在pages.json对应页面的style->usingComponents引入组件:在页面中使用我对

2023-11-24 07:18:00
3.uniapp项目中引入小程序ui -vant weapp组件(利用uniapp开发小程序云函数)
3.uniapp项目中引入小程序ui -vant weapp组件(利用uniapp开发小程序云函数)

3.uniapp项目中引入小程序ui-vantweapp组件项目需求:想要知道如何在uniapp项目中引入使用小程序ui-vantweapp组件,首先得了解如果在uniapp项目中使用小程序组件微信小程序组件需要放在项目特殊文件夹wxcomponents。在pages.json对应页面的style->usingComponents引入组件:在页面中使用我对

2023-11-05 23:48:03
微信小程序canvas2d绘制圆环进度条组件(3.uniapp项目中引入小程序ui -vant weapp组件)
微信小程序canvas2d绘制圆环进度条组件(3.uniapp项目中引入小程序ui -vant weapp组件)

微信小程序canvas2d绘制圆环进度条组件Canvas2D接口(type="2d"),支持同层渲染的一个圆环进度条。(wx.createCanvasContext已废弃)3.uniapp项目中引入小程序ui-vantweapp组件项目需求:想要知道如何在uniapp项目中引入使用小程序ui-vantweapp组件,首先得了解如果在uniapp项目中使用小程序组

2023-11-01 16:04:12
利用uniapp开发小程序云函数 uniapp实现扫码OCR两功能的小程序开发到上线 3.uniapp项目中引入小程序ui -vant weapp组件
利用uniapp开发小程序云函数 uniapp实现扫码OCR两功能的小程序开发到上线 3.uniapp项目中引入小程序ui -vant weapp组件

利用uniapp开发小程序云函数config.json:index.js:package.json:安装依赖包后启动项目即可打开微信开发者工具注意:这里上传云函数可能失败。解决:关闭微信工具并重开,再次上传即可。个人建议,若要开发云函数,最好直接在小程序中开发,在uniapp中开发不仅麻烦且其它平台不通用。uniapp实现扫码O

2023-11-20 01:32:28
3.uniapp项目中引入小程序ui -vant weapp组件 uniapp实现扫码OCR两功能的小程序开发到上线 基于uni-app开发的实时公交车小程序
3.uniapp项目中引入小程序ui -vant weapp组件 uniapp实现扫码OCR两功能的小程序开发到上线 基于uni-app开发的实时公交车小程序

3.uniapp项目中引入小程序ui-vantweapp组件项目需求:想要知道如何在uniapp项目中引入使用小程序ui-vantweapp组件,首先得了解如果在uniapp项目中使用小程序组件微信小程序组件需要放在项目特殊文件夹wxcomponents。在pages.json对应页面的style->usingComponents引入组件:在页面中使用我对

2023-11-17 03:24:15
Uniapp与原生开发,哪个好?
Uniapp与原生开发,哪个好?

uni-app小程序开发踩坑记录最近要从零开发一个跟后台管理系统对接的小程序,因为功能比较复杂,时间短,选择了比较火的uni-app,因为小程序出现的时间较短,各方面并不完善,开发过程中就是不断踩坑的过程,特此记录一小下。uni-app虽然功能还不完善,但是插件市场里东西还是不少的,在搭建框架中因为需求要求借鉴了之前开发的PC端,所以有一些跟之前开发VUE相关的插件,可以提高开发效率,

2023-11-02 06:09:00
小程序js中如何引入组件
小程序js中如何引入组件

小程序js中如何引入组件小程序js中引入组件如一下步骤:1、准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内容(一般是固定的库)。2、打开util.js,继续填写重要内容将要使用的方法用module.exports给暴露出来。3、将外部js放在指定的文件夹utils里(utils规定存放js库和数字格式化文件)。4、在想要用到这个方法的j

2023-11-12 14:47:57
详解如何搭建mpvue框架搭配vant组件库的小程序项目
详解如何搭建mpvue框架搭配vant组件库的小程序项目

详解如何搭建mpvue框架搭配vant组件库的小程序项目1.vant介绍###扫码体验Vant-轻量、可靠的移动端Vue小程序组件库。由有赞公司开发与维护。提供了一系列美观、优质的移动端组件。vant官网2.在普通小程序怎么使用vant组件使用之前使用VantWeapp前,请确保你已经学习过微信官方的小程序简易教程和自定义组件介绍安装方式

2023-10-21 15:09:04