备注:好多东西都不需要说,直接看官方文档
基本配置
项目目录
开发规范
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
- 页面文件遵循 Vue 单文件组件 (SFC) 规范
- 组件标签靠近小程序规范,详见uni-app 组件规范
- 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
-为兼容多端运行,建议使用flex布局进行开发
目录结构
以上详细说明
全局外观配置
全局外观配置在pages.json里的globalStyle中进行配置,可以选择的配置项
配置项查看
页面的创建
- 在pages目录下创建新的vue文件
- 在pages.json文件中配置新创建文件的路径
- 配置一些样式
样式配置说明
tabBar
具体使用
condition(启动模式)
启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面
具体使用说明
组件使用
组件的基本使用
text(文本组件)
用于包裹文本内容。
view
视图容器。它类似于传统html中的div,用于包裹各种元素内容。
button组件
uni-app中的样式
在css的基础上多了一些内容
- rpx,即响应式px,根据屏幕宽度自适应的动态单位,以750px宽的屏幕为基准
- 使用@import语句导入外联样式表,@import后跟需要导入的样式的相对路径,用;表示语句结束
- 支持基本常用的选择器class、id、element等
- 在uni-app中不能使用*选择器
- page相当于body节点
- 定义在APP.vue中的样式为全局样式,作用于每一个页面。在pages目录下的vue文件定义的样式为局部样式,只作用于局部,并且会覆盖APP.vue中相同的选择器
- uni-app支持使用字体图标,使用方式与普通文本项目相同
-
字体文件小于 40kb,
uni-app
会自动将其转化为 base64 格式; -
字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;
-
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。否则会找不到文件
//引入全局的公共样式 @import url("./static/fonts/iconfont.css"); //进入对应的样式中修改引用方式 //原来 src: url('iconfont.eot?t=1564622062967'); /* IE9 */ //修改后 src: url('~@/static/fonts/iconfont.eot?t=1564622062967'); /* IE9 */
-
语法
uniapp中的语法与vue相同
uniapp生命周期
生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。
生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数
注:这里不要使用vue的生命周期函数
生命周期函数详细使用
uni-app支持如下应用生命周期函数
函数名 | 说明 |
---|---|
onLaunch | 当uni-app 初始化完成时触发(全局只触发一次) |
onShow | 当 uni-app 启动,或从后台进入前台显示 |
onHide | 当 uni-app 从前台进入后台 |
onError | 当 uni-app 报错时触发 |
注:应用生命周期函数定义在App.vue中
uni-app 支持如下页面生命周期函数:
函数名 | 说明 | 平台差异说明 | 最低版本 |
---|---|---|---|
onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参) 参考示例 | ||
onShow | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 | ||
onReady | 监听页面初次渲染完成。 | ||
onHide | 监听页面隐藏 | ||
onUnload | 监听页面卸载 |
以上是最主要的,还要其它页面生命周期函数
组件
创建组件
在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可
不要把组件的信息注册到page.json中,否则无法在微信小程序里打开
//导入
import test from '../../components/test.vue'
//注册
components:{
test:test
}
//使用
<test></test>
组件的生命周期函数
与vue相同
组件间的传参
与vue相同,简单教程
注:beforeUpdate和undated只能用于h5,小程序不支持
其它
onPullDownRefresh(下拉刷新)
1、 在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
- 需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh。
- 当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
2、 uni.startPullDownRefresh(OBJECT)
开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
例如为按钮绑定单击事件,单击触发该函数
onReachBottom
页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据
网络请求
具体说明
数据缓存
详细说明
常用方法:
- uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。 - uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。 - uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。
上传图片并实现预览
具体使用
跨端兼容
uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足。但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
详细说明
解决:使用条件编译,说明里有
导航跳转 navigator
<navigator url="details">跳转到详情页</navigator>
<navigator url="home" open-type="switchTab">跳转到主页</navigator>
默认情况下不能跳转到tabbar对应的页面,需要通过open-type指定跳转方式
这里说一下 open-type=“redirect” 和 open-type=“navigator”,两者都只能跳转到非tabbar页面,前者的跳转不能返回之前所在页面,后者存在在左上角有关返回按钮,可以返回之前的页面
除了上面的方式还存在编程式跳转
具体说明:navigator
<button @click="goHome">回到首页</button>
goHome(){
uni.switchTab({
url: '/pages/index/home'
});
}
传递参数
<navigator url="details?id=123">跳转到详情页</navigator>
//在详情页获取上一个页面传递的数据
onLoad(options) {
console.log(options)
}
注:如果跳转到tabbar页面,这种方式无法传递参数
更多推荐
UniApp基础:简单入门
发布评论