前端神级框架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 条评论
回复 删除
下一页
