前端神级框架uni-app详解(二)进阶
2019-06-26 17:42:13 6 举报
AI智能生成
登录查看完整内容
前端神级框架uni-app详解第二部分进阶,把大部分配置、组件和接口都囊括进去了,希望对开发uni-app的人起到一定作用
作者其他创作
大纲/内容
前端神级框架uni-app详解(二)进阶
uni-app框架演示示例
第一部分-配置pages.json
地址
uni-app的重要配置文件pages.json,用于配置设计的风格头部尾部等等
每新增一个页面需要在改配置文件配置路由地址和页面风格
可以直接在这配置tabBar和其风格,实现类似微信底部tab页
注意
状态栏风格在支付宝小程序标题颜色默认为白色,除非背景是纯白色,字体会变黑色,其它颜色不能修改
第二部分-配置manifest.json
概述
应用的配置文件,用于指定应用的名称、图标、权限等
这里我们常常需要填写需要权限的appid等,找到对应的打上勾就行
比如微信小程序获取定位权限,一定记得去该文件微信配置里勾选上位置权限,我的亲身经历是没勾上,正式上传的小程序有时候能获取到位置有时候获取不到,不知道什么鬼
第三部分-组件
组件
常用视图组件
基础容器
view
最最基础的组件,不知道用啥组件就用这个,然后通过css样式实现就好,类似于div,但布局推荐用flex
scroll-view
可滚动视图区域
注意:这里有个问题,如果你整个页面打算做的是长列表,并且要下拉刷新,不建议用这个,会和原生下拉刷新冲突,所以除非不需要下拉刷新,才可以使用这个组件
swiper
一般用于轮播图,还是很常用的
icon
uni-app内置图标,这个容易忽略,总想着找网上的图标取,其实如果适合的话,直接用它的也不错
text
文本内容,虽然view内也可以写内容,但最好规范写法,其本身也带有几个属性,比如是否可选等
表单组件
button
注意:primary类型的按钮在不同平台颜色不同,微信小程序为绿色,5+App、百度小程序、支付宝小程序为蓝色,头条小程序为红色
按钮组件open-type类型为getUserInfo可以获得开放能力,比如在微信小程序可以获得用户基本信息
open-type为feedback类型,可以进行快速的意见反馈,支持5+app和微信小程序,这个模拟器不能运行,需要真机运行
editor
富文本编辑器,目前只支持5+app和微信小程序,其它端的解决方案,搜索插件市场
插件市场
form
表单组件,最常用的组件之一
注意事项
像小程序的消息模板需要一个formId就是从这里取的,需要设置属性report-submit为true
input
表单中最常用组件,没有之一
由于最常用的组件,它的很多属性都是比较常用的,这里就不一一列举了,这个组件整个都要好好看看,placeholder的样式,键盘类型,键盘弹起距离等等,都要这里的属性设置
slider
滑动选择器
滑动选择器,用来设置百分比,音量大小等等的ui组件
其他组件
navigator
实现的功能等同于 uni.navigateTo,uni.redirectTo 等等,但这个直接耦合到UI界面设计上
image
图片显示组件,也是很常用组件,注意lazy-load属性,很可能要用到
map
地图组件,现在的很多app都可能用到,在uni-app不同的平台会打开不同的地图,比如在微信小程序会打开腾旭地图,在支付宝会打开高德地图等等
web-view
web浏览器组件,这个类似于h5的iframe,用来承载外部网页的容器,也是很可能用到的组件
扩展组件
扩展组件是官方除了标准组件之外额外自定义的常用封装组件,类似于常见市场开发的vue组件,使用时也同样需要自己引入
uni-ui整体介绍
扩展组件(uni-ui)
Collapse
折叠面板
折叠面板,自以为比较常用
索引列表,用来显示通讯录,好友列表等
IndexedList
索引列表
宫格,快速进行宫格布局
Grid
宫格
推荐ColorUI-uniApp,GraceUI,前一个免费,组件少点,后一个收费,组件完善些,请搜插件市场
第三方组件
这个和h5的用法是差不多的,这里我要说的是,为了提高效率,HBuildX提供了clogj,clogv等快速代码生成模板,善于利用这些模块可以大大提升开发效率
日志打印
用法和原来js的一致
定时器
这类似于h5中的ajax请求,比较常用,需要注意的是不是所有平台都可以通用,但get和post是肯定通用的
网络请求
uni.request(OBJECT)
长连接,我的理解可以用于实时聊天这种,目前没用过,但用到的可能性还是蛮大的
websocket
uni.connectSocket(OBJECT)
5种跳转,需要注意的是都是应用内跳转,想跳到应用外,用web-view或者js的localtion.href适用于不同场景
路由跳转
uni.navigateTo(OBJECT)
同样是比较常用的操作,一般都是用同步操作,如果要用到异步,那注意异步的注意事项了
数据缓存
获取位置
uni.getLocation(OBJECT)
这也是很重要的一个模块,我们常常会用到图片操作,这里可以选择你手机电脑里的图片,预览图片,获取图片信息,保存图片,压缩图片等
图片操作
uni.chooseImage(OBJECT)
一般视频用到的可能性比较大
音频视频直播控件
录音、音频、视频、直播
获取设备基本信息,很多时候用来获取屏幕的宽高,状态栏,tabbar栏高度信息等
设备信息
uni.getSystemInfo(OBJECT)
虽然不常用,但用到的时候要知道有这个东西,用来获取当前手机使用的是4G,wifi还是什么
网络状态
二维码扫描,很常用的,需要注意h5不支持这个
扫码
uni.scanCode(OBJECT)
这个的作用就是在本程序复制的内容,在别的程序能够黏贴起效果
剪贴板
罗盘,陀螺仪,拨打电话,屏幕亮度,震动,手机联系人,蓝牙,电量,NFC等
硬件和系统相关的一系列接口
第四部分-接口
包括了弹出toast,loading,model,actionsheet
弹出信息
交互反馈
刚开始做app时很可能就要用到的操作,导航条背景颜色等设置
导航条相关设置
uni.setNavigationBarTitle(OBJECT)
可以设置tabBar的条目,样式,是否隐藏,标圆点等等
TabBar相关设置
uni.setTabBarItem(OBJECT)
动画相关api操作,不支持h5
动画
uni.createAnimation(OBJECT)
滚动到指定位置
滚动
比较重要的一个功能,特定情况和scroll会冲突,我建议用自定义的下拉刷新,比较简单的地方可以用自带的下拉刷新
下拉刷新
onPullDownRefresh
这就是个选择器,但和css选择器还是有一定差距,有局限性,可以看看
节点信息
uni.createSelectorQuery()
用于监控两个布局的相交状态,不支持h5和支付宝
节点布局交叉状态
类似于vue的事件传递,但这里是全局App级别的,注意在unload的uni.$off掉监听事件,或用uni.$once只调用一次
页面通讯
文件操作相关api这里找,没有那就是没有
文件存储
uni.saveFile(OBJECT)
绘图接口
canvas绘画
登录,分享,支付,推送,语音第三方服务调用
第三方服务
调用原生的方式
原生插件调用
uni.requireNativePlugin(PluginName)
第五部分-界面操作
注意只用于小程序,且支付宝不支持,这里提一句,所有不支持的都可以去对应小程序官方文档查看,支持直接使用原生小程序编写,比如支付宝用my.开头,在uni-app里可以直接写支付宝的API接口,这里的授权就可以自己单独写
授权
uni.authorize(OBJECT)
这里会调用你再微信的收获地址页面,需要授权,支付宝不支持
收货地址
uni.chooseAddress(OBJECT)
用于跳转到另一个小程序
小程序跳转
uni.navigateToMiniProgram(OBJECT)
获取微信小程序平台的账号信息wx.getAccountInfoSync()
账号信息
wx.getAccountInfoSync()
指纹识别,人脸识别,不同平台支持不一样
生物认证
用于数据上报和数据分析,不同平台接口不同
数据统计
小程序专属,支付宝暂不支持,一般这个模板也可以到对应小程序管理后台去配置
模板消息
通知更新小程序
小程序更新
更新
获取第三方平台的自定义数据字段
第三方平台数据
uni.getExtConfigSync()
第六部分-其它
0 条评论
回复 删除
下一页