前端神级框架uni-app详解（二）进阶
2019-06-26 17:42:13 6 举报AI智能生成
前端神级框架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和微信小程序，其它端的解决方案，搜索插件市场
富文本编辑器，目前只支持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整体介绍
Collapse
折叠面板，自以为比较常用
IndexedList
索引列表，用来显示通讯录，好友列表等
Grid
宫格，快速进行宫格布局
第三方组件
推荐ColorUI-uniApp，GraceUI，前一个免费，组件少点，后一个收费，组件完善些，请搜插件市场
第四部分-接口
日志打印
这个和h5的用法是差不多的，这里我要说的是，为了提高效率，HBuildX提供了clogj，clogv等快速代码生成模板，善于利用这些模块可以大大提升开发效率
定时器
用法和原来js的一致
网络请求
这类似于h5中的ajax请求，比较常用，需要注意的是不是所有平台都可以通用，但get和post是肯定通用的
websocket
长连接，我的理解可以用于实时聊天这种，目前没用过，但用到的可能性还是蛮大的
路由跳转
5种跳转，需要注意的是都是应用内跳转，想跳到应用外，用web-view或者js的localtion.href适用于不同场景
数据缓存
同样是比较常用的操作，一般都是用同步操作，如果要用到异步，那注意异步的注意事项了
获取位置
这里需要注意的是h5,获取位置，需要部署到https服务器，本地测试可以不用，然后没GPS的PC设备也获取不到；map组件使用这个时type指定为gcj02
图片操作
这也是很重要的一个模块，我们常常会用到图片操作，这里可以选择你手机电脑里的图片，预览图片，获取图片信息，保存图片，压缩图片等
音频视频直播控件
一般视频用到的可能性比较大
设备信息
获取设备基本信息，很多时候用来获取屏幕的宽高，状态栏，tabbar栏高度信息等
网络状态
虽然不常用，但用到的时候要知道有这个东西，用来获取当前手机使用的是4G，wifi还是什么
扫码
二维码扫描，很常用的，需要注意h5不支持这个
剪贴板
这个的作用就是在本程序复制的内容，在别的程序能够黏贴起效果
硬件和系统相关的一系列接口
罗盘，陀螺仪，拨打电话，屏幕亮度，震动，手机联系人，蓝牙，电量，NFC等
第五部分-界面操作
弹出信息
包括了弹出toast，loading，model，actionsheet
导航条相关设置
刚开始做app时很可能就要用到的操作，导航条背景颜色等设置
TabBar相关设置
可以设置tabBar的条目，样式，是否隐藏，标圆点等等
动画
动画相关api操作，不支持h5
滚动
滚动到指定位置
下拉刷新
比较重要的一个功能，特定情况和scroll会冲突，我建议用自定义的下拉刷新，比较简单的地方可以用自带的下拉刷新
节点信息
这就是个选择器，但和css选择器还是有一定差距，有局限性，可以看看
节点布局交叉状态
用于监控两个布局的相交状态，不支持h5和支付宝
页面通讯
类似于vue的事件传递，但这里是全局App级别的，注意在unload的uni.$off掉监听事件，或用uni.$once只调用一次
文件存储
文件操作相关api这里找，没有那就是没有
canvas绘画
绘图接口
第三方服务
登录，分享，支付，推送，语音第三方服务调用
原生插件调用
调用原生的方式
第六部分-其它
授权
注意只用于小程序，且支付宝不支持，这里提一句，所有不支持的都可以去对应小程序官方文档查看，支持直接使用原生小程序编写，比如支付宝用my.开头，在uni-app里可以直接写支付宝的API接口，这里的授权就可以自己单独写
收货地址
这里会调用你再微信的收获地址页面，需要授权，支付宝不支持
小程序跳转
用于跳转到另一个小程序
账号信息
获取微信小程序平台的账号信息wx.getAccountInfoSync()
生物认证
指纹识别，人脸识别，不同平台支持不一样
数据统计
用于数据上报和数据分析，不同平台接口不同
模板消息
小程序专属，支付宝暂不支持，一般这个模板也可以到对应小程序管理后台去配置
小程序更新
通知更新小程序
第三方平台数据
获取第三方平台的自定义数据字段
0 条评论
下一页
