UniApp基础：简单入门

备注：好多东西都不需要说，直接看官方文档

基本配置

项目目录

开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，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页面，这种方式无法传递参数