uni-app

了解uni-app

使用vue.js开发所有前端应用的框架，开发者编写一套代码。可发布到多个平台。

了解结构

配置项

pages.json 文件
用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

manifest.json 文件
是应用的配置文件，用于指定应用的名称、图标、权限等。

uni.scss文件的用途
是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。

js文件引入
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from ‘@/common/add.js’
// 相对路径
import add from ‘…/…/common/add.js’

css引入静态资源
/* 绝对路径 /
@import url(’/common/uni.css’);
@import url(’@/common/uni.css’);
/ 相对路径 */
@import url(’…/…/common/uni.css’);

基础组件

uni-app的组件与HTML不同，而是与小程序相同，更适合手机端使用。
根节点为 ，这个 下只能且必须有一个根组件。这是vue单文件组件规范。

应用生命周期

（应用生命周期仅可在App.vue中监听，在其它页面监听无效。）
onLaunch:uni-app初始化完成时触发（全局只触发一次）
onShow:uni-app启动，或者从后台进入前台显示
onHide:前台进入后台
onError：uni-app报错

页面生命周期

onLoad:监听页面加载，一个页面只会调用一次。
参数可以获取wx.navigateTo和wx.redirectTo及中的 query。
监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）

onShow
监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

onReady
监听页面初次渲染完成。
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

onPullDownRefresh
监听用户下拉动作，一般用于下拉刷新

onReachBottom
页面上拉触底事件的处理函数

onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。

路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由

路由跳转
使用navigator组件跳转、调用API跳转

页面尺寸

uni-app 支持的通用 css 单位包括 px、rpx

px 即屏幕像素
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

vue的支持

可以获取dom元素通过
document.querySelector(‘body’).addEventListener(‘touchmove’, function(e) {｝）
进行监听事件onLoad

获取dom元素 uni.createSelectorQuery().select(’.grace-blue’)