uniapp开发安卓小组件（uniapp 组件）
本篇文章给大家谈谈uniapp开发安卓小组件，以及uniapp 组件对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
- 1、uni-app小程序开发踩坑记录
- 2、uniapp原生插件开发-android端-component扩展
- 3、uni-app开发一个小视频应用(二)
- 4、3.uniapp项目中引入小程序ui -vant weapp组件
- 5、uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）
uni-app小程序开发踩坑记录
最近要从零开发一个跟后台管理系统对接的小程序，因为功能比较复杂，时间短，选择了比较火的uni-app，因为小程序出现的时间较短，各方面并不完善，开发过程中就是不断踩坑的过程，特此记录一小下。
uni-app虽然功能还不完善，但是插件市场里东西还是不少的，在搭建框架中因为需求要求借鉴了之前开发的PC端，所以有一些跟之前开发VUE相关的插件 ，可以提高开发效率，
插件：
坑：
1.覆盖原生组件，需要用cover-view容器，但是cover-view里可包含的标签有限，类似view等在真机调试时不显示，需全部替换成cover-view，且icon无法显示，可以用cover-imaga代替。
2.小程序和小程序之间的跳转（如腾讯云的人机滑动验证），跳转回来时需要进行操作，此时可以判断app.vue中的options，如果按小程序文档中来说当options.scene === 1038时是小程序跳回来的场景，但是部分手机跳回来是options.scene为1001，只能将这2种都作为跳转判断的条件。
3.小程序跳转回来app中的onshow有时不执行，这个原因暂未找到
4.在uniapp的H5版本 ，接入 腾讯云滑动验证 ，示例的点击滑动验证元素是通过dom操作的，但是无效，可能跟uniAPP不支持dom操作有关系，采用定制接入方法一，手动调用。
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开发一个小视频应用(二)
前情回顾uni-app开发一个小视频应用(一)上篇文章，我们已经实现了首页的头部导航栏组件、底部的tabBar导航栏组件、中间的视频列表组件以及视频列表组件中的视频播放组件，传入视频列表渲染后已经可以上下滑动进行视频切换和播放，接下来我们将完成首页的剩余部分，左侧信息栏组件、右侧图标栏组件，以及完善视频切换动画、播放控制等功能。
左侧的信息栏组件，主要分三块: 作者名、视频标题名、音乐名。这个左侧信息栏信息是和当前播放视频相关联的，所以应该在循环视频列表的时候，将左侧信息栏组件一起渲染出来，所以左侧信息栏组件应该加到swiper-item中。
// components/list-left.vue
// components/video-list.vue
右侧图标栏组件，主要分为: 头像图标(头像设置border-radius)、收藏图标(iconfont图标)、评论图标(iconfont图标)、分享图标(iconfont图标)、音乐图标(图片设置border-radius)，右侧图标栏组件设置一个固定宽度，然后让各种图标依次排列即可，如:
// components/list-right.vue
当点击头像下部的加号图标，可以对该用户进行关注，即隐藏加号图标，还有就是收藏爱心图标颜色切换，当点击收藏爱心图标，爱心图标变成红色，再次点击收藏爱心图标，爱心图标变回白色，这里先只处理颜色的变化，具体后台交互暂不处理。
// 在头像图标下方通过绝对定位添加一个加号图标，并定位到头像底部
所谓滑动播放，即向上滑动的时候，暂停当前播放视频并且播放下一个视频，向下滑动的时候，暂停当前播放视频，播放上一个视频，而这最关键的就是如何判断是向上滑动还是向下滑动。swiper组件给我们提供了一个change事件，我们可以监听这个change事件，拿到滑动完成后滑动到了第几页，即swiper-item的序号(从0开始)，然后与滑动前的当前page相比较，就可以知道是向上滑还是向下滑了。
判断好了是上滑还是下滑后，我们还需要对上滑和下滑作出正确的处理，我们需要能够拿到每个视频播放组件，然后调用视频播放组件上的相关方法对播放进行控制，这就是涉及到了父组件如何调用子组件上方法，父组件要想调用子组件上的方法，关键是父组件要能够拿到子组件对象，我们可以通过ref实现，因为每一个视频播放组件是video-list视频列表组件的一个子组件，所以我们可以在video-list视频列表组件中给每一个video-player视频播放组件添加上一个ref="player"，即可拿到对应的视频播放组件了。
// components/video-list.vue
要想实现单击视频播放组件，视频可以进行播放和暂停切换，那么我们需要给视频播放组件添加一个isPlay属性表示视频是否处于播放中，如果是播放中，那么点击就暂停，如果不是播放中，那么点击就播放，同时，由于uni-app不支持vue的dblclick事件的，所以我们还需要对单击和双击操作进行判断，我们需要定义一个变量用于记录用户点击次数，如果300ms内用户点击次数大于等于2，那么就是双击，否则就是单击，如:
双击的时候会向video-list父组件(视频列表组件)发送一个follow事件，video-list组件监听到follow事件后再通知list-right组件调用其方法让其爱心图标变红即可，如:
之前我们的视频播放组件接收了一个index属性，即当前视频对应的索引号，我们可以通过这个索引号判断当前视频是否是第一个，然后将其video组件的autoPlay设置为true即可自动播放。
至此，首页已经完成，效果图如下:
原文地址：
3.uniapp项目中引入小程序ui -vant weapp组件
项目需求：
想要知道如何在uniapp项目中引入使用小程序ui-vant weapp组件，首先得了解如果在uniapp项目中使用小程序组件
微信小程序组件 需要放在项目特殊文件夹 wxcomponents 。
在 pages.json 对应页面的 style - usingComponents 引入组件：
在页面中使用
我对这句话的理解是：
而我们想在uniapp项目中使用vant weapp微信小程序组件的诉求，其实是想在项目中任何位置都可以使用vant组件，所以我们需要全局注册vant小程序组件
并不需要注册所有的，你使用那个组件注册那个就行
注意事项：
uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）
照着腾讯文档小程序开发了微信小程序富文本编辑器组件，这几天做个整理，如有这个需求可以前往腾讯文档小程序操作看看实际效果。毕竟参照的是微信自家小程序，无法做到百分百效果，只能按现有开放api尽可能实现。
项目地址：
uniapp插件市场：
editor富文本编辑器组件官方文档：
否则会受到小程序css影响。小程序本身editor标签有css样式：
editor {
display: block;
position: relative;
box-sizing: border-box;
-webkit-user-select: text;
user-select: text;
outline: 0;
overflow: hidden;
width: 100%;
height: 200px;
min-height: 200px;
}
that.updatePosition(keyboardHeight)
that.editorCtx.scrollIntoView()
在插入目标文字时，将值设为\n'，可以实现换行
this.editorCtx.insertText({ text: '\n' });
参考：请问editor组件控制拉起键盘操作支持吗？
小程序技术专员-sanford 2019-09-20
不支持的。iOS无法通过接口拉起键盘，必须用户点击；安卓则可以。所以，终究是不一致，不行。。
该组件主要为微信editor组件的api调用集成封装，因此受到的限制同文档描述一致，即编辑器内支持部分 HTML 标签和内联样式，不支持class和id，支持的标签详见： 。
不满足的标签会被忽略，div会被转行为p储存。
这也是为什么在做富文本解析时，仅仅用rich-text组件无法有效还原html内容，在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签。因此最好方式是引入市场封装好的富文本解析插件去解析html。
所以，开发者需要自行权衡在做富文本编辑开发时，是否使用微信自带的editor组件，或者参考腾讯文档小程序采用webview内嵌网页等方式去渲染。
小程序富文本编辑器editor初体验：( )
如果是微信原生开发，将demo组件中的相关dom元素标签和api换成微信原生即可。
uniapp开发安卓小组件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于uniapp 组件、uniapp开发安卓小组件的信息别忘了在本站进行查找喔。
