本篇博文仅仅是按照自己的阅读习惯进行归类,快速熟悉用法,如果是入门想跟着文档学,最好是直接看官方文档
由其他项目转为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
未完待续~