uni-app (组件以及api) 的速读

最新推荐文章于 2024-06-17 22:50:35 发布

weixin_43910427

最新推荐文章于 2024-06-17 22:50:35 发布

阅读量1.3k

点赞数

分类专栏： UNI

本文链接：https://blog.csdn.net/weixin_43910427/article/details/106575832

版权

UNI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本篇博文仅仅是按照自己的阅读习惯进行归类，快速熟悉用法，如果是入门想跟着文档学，最好是直接看官方文档

由其他项目转为uni-app 的指南 (其中js方面的api需要做非常多的兼容，不是很划算)

uni-app 的组件（即是标签）与小程序的相同，如 view ,text,# image,navigator 等
uni-app 的组件规范与vue组件相同
uni-app 的属性类型：除基本的几种外，还有EventHandler(@success success 是组件传出来的动作) ,Any (data-)
uni-app 的组件类型大致归类：

视图容器（view,scroll-view,swiper）
基础内容（icon ,text,rich-text,progess）
表单组件 (button,form,input,checkbox,radio,picker,picker-view,slider,switch,label)
导航（navigator）
媒体组件（audio,camera,image,video,live-player – 直播播放,live-pusher – 直播推流实时音视频录制）
地图 (map)
画布（canvas）
web-view (web浏览器组价)
专有组件如open-data (这是个什么东东)
扩展组件（uni-ui 基于vue组件，flex布局，无dom的跨全端ui框架）

更多的组件的文档入口由此入

配置uni-app项目的路由,参考地址

文档地址

注意：vue-cli 项目请手动配置 vue.config.js 下 transpileDependencies:[‘uni-simple-router’]

uni-app 的pages.json 的每一项比之前都多了一个 style:{navigationBarTitleText :’’},这大概是把之前小程序中放在json中配置的东西放到pages中了

配置的大概点：

需要新建vue.config.js （在文件中引入uni-read-pages 并配置，目的是为了拿到相关的path）
在mian.js 中从uni-simple-router 中引入 Router,{RouterMount} 并Vue.use(Router)
const router = new Router = new Router ({routes:ROUTES}) 这里的 ROUTES 是在vue.config.js 中接收路径的时候自定义的名称
router.beforeEach 设置前置路由守卫，与vue的路由守卫设置是一致的
这里的router甚至不需要挂载到app 上

组件的开始学习：

view 视图容器

点击这个元素的时候的样式 hover-class=“activeClass”
- 点击这个元素的时候没有改变 hover-class=“none”
- 点击这个元素的时候是否阻止父级的点击态被触发 hover-stop-propagation
- 按下元素后多久才显示点击状态 hover-start-time
- 元素的点击状态维持多久 hover-stay-time

scroll-view 可滚动视图区域

使用竖向滚动时，需要给一个固定高度，通过 css 设置 height。
- 使用横向滚动的时候，需要给scroll-view 设置css属性 white-space:nowrap;以及容器中的子容器，display:inline-box;
- scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面，长列表应该使用list而不是scroll-view
- scroll-into-view 的优先级高于 scroll-top。
  upper-threshold=“100” 设置这里意味着向顶部滑动的时候的触顶会多触发一次，在设置位置的时候触发一次，以及真正触顶的触发一次
scroll-top 滚动条距离顶部的位置
scroll-top=“200” 适合于需要定位到容器某一位置的时候使用
scroll-into-view 滚动到指定id的元素
scroll-with-animation 滚动时是否添加动画过渡
show-scrollbar 是否显示滚动条，低版本无效
其他的属性需要的时候看文档

swiper 滑块视图容器

indicator-dots 是否显示指示点
autoplay 是否自动轮播
duration 滑动一张图需要的时间
interval 间隔多长时间开始下一次滑动
circular 是否循环播放
vertical 是否竖向轮播
@change 轮播图改变的事件，获取当前激活的轮播图的下标

movable-view 可移动的视图容器，movable-area – movable-view 的可移动区域

movable-view必须在组件中，并且必须是直接子节点，否则不能移动
- 常见问题可参照 https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98
- 暂时搁置，无法拖动，也无法触发

cover-view 覆盖在原生组件上的文本视图
实例代码：（用于覆盖在原生的vedio组件上）

  <video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
      <cover-view class="controls-title">简单的自定义 controls</cover-view>
      <cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
      <cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
  </video>

cover-image 覆盖在原生组件上的图片视图

video 视频

获取视频的实例 uni.createVideoContext(‘demoVideo’)
:controls=“controls” 是否显示底部的工具栏
:muted = “muted” 是否静音播放
:enable-progress-gesture=“enProgessGesture” 是否允许使用手势操作进度条
:show-center-play-btn=“disable”
src=“https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v” 视频的地址
:initial-time=“initialTime” 初始化的时候开始播放的起点
:autoplay=“autoplay” 是否自动播放
:loop=“loop” 是否循环播放
:danmu-list=“danmuList” 初始化时候的弹幕列表
:danmu-btn=“danmuBtn” 显示隐藏弹幕的按钮
:enable-danmu=“enableDanmu” 是否显示弹幕按钮
发送弹幕的方法 this.videoCtx.sendDanmu({text:’’,color:’’，time:‘s’}); – 如何获取当前视频的弹幕数量，如何获取实时的弹幕，即对应的时间点有哪些弹幕,以及发送弹幕的时候如何知道视频播放到哪一秒了
其他的一些控制屏幕上按钮的方法，不同加载状态额触发函数等等，看文档 https://uniapp.dcloud.io/component/video

text

内部只允许嵌套text,否则不同平台的渲染会有问题

rich-text

https://github.com/dcloudio/hello-uniapp/blob/master/common/html-parser.js html转为nodes的工具地址
rich-text 组件内屏蔽所有节点的事件。所以如果内容中有链接、图片需要点击，则不能使用rich-text，
全局支持class和style属性，不支持id属性。 — 目前自己测试的，class也没出来

progress 进度条

:percent=“percent”
:show-info=“showInfo”
:stroke-width =“strokeWidth”
:activeColor=“activeColor”
:backgroundColor=“backgroundColor”
:active=“active”
:active-mode=“activeMode”

button 按钮

disabled 是否禁用按钮
loading 是否带加载状态
size=“mini” 是小按钮，其他就是磨人的满行按钮
type=“primary” 是蓝色的按钮 type=“warn” 是红色的按钮其他就是默认的灰色
plain 是空心按钮
其他大多数的事件触发以及属性是只有微信小程序有效的（具体需要的时候查看文档 https://uniapp.dcloud.io/component/button）
open-type="launchApp"时需要调起的APP接入微信OpenSDK详见

checkbox-group 多选框组

value 绑定在checkbox上面
@change 获取此时选中的值的数组，值在e.detail.value下面
checked 是否选中
color 是多选框的选中的颜色
checkbox的默认颜色，在不同平台不一样。微信小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%style=“transform:scale(0.7)”

ql-editor （仅支持App,微信小程序与 H5,且都需要高版本）其他环境可考虑使用web-view 引入简单的简单的markdown富文本编辑器

导出富文本编辑器的html的时候需要引入的样式 https://github.com/dcloudio/uni-app/blob/master/src/core/view/components/editor/editor.css 并维护的结构
https://uniapp.dcloud.io/component/editor?id=%e6%94%af%e6%8c%81%e7%9a%84%e5%86%85%e8%bf%9e%e6%a0%b7%e5%bc%8f 涉及到的一些块级样式与行内样式的说明

input 输入框

adjust-position 键盘弹起时，是否自动上推页面默认是true App-Android（softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序
keyboardheightchange 键盘高度发生变化的时候发生仅仅适用于微信小程序
type=“idcard” 身份证号码的类型 --真机上无区别 – 这里大概需要自己做安全键盘
type =“digit” 带小数点的数字会跳到数字键盘 – 但是只有输入数值是有效的
type =“numnber” – 也只有数值是有效的输入
confirm-type 有效值具体请查看文档 “send”“search”“go” “next”“done”

label

可以绑定的组件 button checkbox radio switch
当label中有多个表单组件的时候，点击时默认选中地第一个
使用for进行标识，for对应的组件的id

picker

注意基于多列picker方式的地区选择不能运行在支付宝小程序上，只有基于picker-view的可以全端运行
基于uni-app封装的可以适用全端的三级地址联动组件
HBuilderX: vue doc使用教程

radio-group 与 radio

与checkbox-group 以及checkbox 的使用以及参数是类似的

navigator

  <!--使用navigator进行回退  open-type ="back"  类似与go(-delta)-->
  <navigator open-type="navigateBack" :delta="2">跳出去</navigator>
  <!--navigate	对应 uni.navigateTo 的功能  其他同理-->

尽量使用api进行跳转，兼容性会更高一点
url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决
使用音频的api的文档

live-player 实时音频播放 (仅支持小程序)

App的实时音视频播放，不是使用 live-player，而是直接使用 video 组件。
H5 下可用 video 播放符合 HTML5 规范的流媒体，rtmp 等非 HTML5 标准的流媒体格式，仅在部分支持 flash 的国内手机浏览器上可播放。在 pc 浏览器上，需要安装 flash 插件才能播放 rtmp 等格式。
百度小程序 iOS 端不支持设置 orientation 属性；
微信小程序已废弃 background-mute 属性，默认为进入后台静音；
live-player 默认宽度 300px、高度 225px；
live-player 是原生组件，层级高于前端组件，请勿在 scroll-view、swiper、picker-view、movable-view 中使用
小程序下覆盖live-player需要使用cover-view。详见live-player 组件相关 JS API：createLivePlayerContext
小程序平台使用live-player有审核限制，请注意参考各家文档

map

uni-app 只支持 gcj02 坐标
GCJ-02偏移算法破解
相关的API uni.createMapContext
H5 端获取定位信息，需要部署在 https 服务上，本地预览（localhost）仍然可以使用 http 协议。
无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
(但是我在h5中引用的时候是一片空白)

canvas

app-vue的canvas虽然是webview自带的canvas，但却比nvue和微信小程序的原生canvas性能更高。注意并非原生=更快。canvas动画的流畅，关键不在于渲染引擎的速度，而在于减少从逻辑层向视图层频繁通信造成的折损。
小程序、app-nvue，因为通信阻塞，难以绘制非常流畅的canvas动画。h5和app-vue不存在此问题。但注意，app-vue下若想流畅的绘制canvas动画，需要使用renderjs技术，把操作canvas的js逻辑放到视图层运行，避免逻辑层和视图层频繁通信。hello uni-app的canvas示例很典型，在相同手机运行该示例，可以看出在h5端和app端非常流畅，而小程序端做不到这么流畅的动画。
相关的api uni.createCanvasContext();

web-view

承载网页的容器（nvue 使用需要手动指定宽高,所以最好手动设置，更好适应）
需要配置白名单（规则参照具体的小程序的配置文档）

API

这两个同时都可以拍照，选择相册，拍摄视频
uni.chooseImage()
拿到的图片列表，有有个问题，当count大于1的时候，【h5中】count限制不了选择的图片数目
uni.chooseVideo

如果是app端，可以使用html5+的 plus

uni-app 中怎么使用生物认证

uni.scanCode 全屏扫码

报错：API scanCode is not yet implemented

	未完待续~

weixin_43910427

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
uni-app (组件以及api) 的速读

本篇博文仅仅是按照自己的阅读习惯进行归类，快速熟悉用法，如果是入门想跟着文档学，最好是直接看官方文档由其他项目转为uni-app 的指南 (其中js方面的api需要做非常多的兼容，不是很划算)uni-app 的组件（即是标签）与小程序的相同，如 view ,text,# image,navigator 等uni-app 的组件规范与vue组件相同uni-app 的属性类型：除基本的几种外，还有EventHandler(@success success 是组件传出来的动作) ,Any (data-
复制链接

扫一扫

专栏目录