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

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

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

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

1. 视图容器 （view,scroll-view,swiper）
2. 基础内容 （icon ,text,rich-text,progess）
3. 表单组件 (button,form,input,checkbox,radio,picker,picker-view,slider,switch,label)
4. 导航 （navigator）
5. 媒体组件 （audio,camera,image,video,live-player – 直播播放,live-pusher – 直播推流 实时音视频录制）
6. 地图 (map)
7. 画布 （canvas）
8. web-view (web浏览器组价)
9. 专有组件 如open-data (这是个什么东东)
10. 扩展组件 （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组件上）

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%[email protected]” 视频的地址
• :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="navigateBack" :delta="2">跳出去navigator>
  

• 尽量使用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