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}//使用

组件的生命周期函数 与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

跳转到详情页跳转到主页

默认情况下不能跳转到tabbar对应的页面，需要通过open-type指定跳转方式

这里说一下 open-type=“redirect” 和 open-type=“navigator”，两者都只能跳转到非tabbar页面，前者的跳转不能返回之前所在页面，后者存在在左上角有关返回按钮，可以返回之前的页面

除了上面的方式还存在编程式跳转 具体说明：navigator

回到首页goHome(){ uni.switchTab({ url: ‘/pages/index/home’ });}

传递参数

跳转到详情页//在详情页获取上一个页面传递的数据onLoad(options) { console.log(options)}

注：如果跳转到tabbar页面，这种方式无法传递参数