uni-app随手

1. 渲染方式

如果使用vue页面，则使用webview渲染；如果使用nvue页面(native vue的缩写)，则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面

nvue使用注意事项

nvue的css仅支持flex布局，是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面，只是写法需要适应。
class 进行绑定时只支持数组语法。
不支持媒体查询
不能在 style 中引入字体文件
不能使用百分比布局，如width：100%
不支持在css里写背景图background-image，但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
使用image标签，支持使用base64
nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题
文字内容，必须只能在text组件下，text组件不能换行写内容，否则会出现无法去除的周边空白
只有text标签可以设置字体大小，字体颜色

2. 生命周期

应用生命周期

函数名	说明
函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

页面生命周期

函数名	说明	平台差异说明
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、字节跳动小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序
onAddToFavorites	监听用户点击右上角收藏	微信小程序

3. 开发规范

目录结构

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud） ··
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

Tips：

编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。

static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。

css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

资源引用说明

template内引入静态资源
<image class="logo" src="@/static/logo.png"></image>
js文件引用
import add from '@/common/add.js' 其中@指向src
css引用资源
@import url('@/common/uni.css');
引入字体文件及svg问题
引入字体图标：支持网络/本地/base64字体图标。网络字体图标必须增加协议头https 。本地字体图标小于40kb，框架将自动转换为base64引用。大于40kb时，需开发者自行将其转换为base64或放到网络服务器上引用。 @font-face {font-family: test1-icon;src: url('~@/static/iconfont.ttf');}
引用svg：转换成行间形式如：'data:image/svg+xml;utf8,svg文件内容' ，再通过image组件src引入，或通过background-image方式引入

svg不能通过image标签的src属性直接引用，打包ios后会导致文件丢失

平台判断

编译期判断： |条件编译写法|说明| |---|---| |#ifdef APP-PLUS
需条件编译的代码
#endif|仅出现在App平台下的代码| |#ifndef H5
需条件编译的代码
#endif|除了 H5 平台，其它平台均存在的代码| |#ifdef APP-PLUS
需条件编译的代码
#endif|仅出现在App平台下的代码|

tips:
类型包含 APP-PLUS、H5、MP-WEIXIN、MP-ALIPAY、MP(小程序合集 )
条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 ；

运行期判断：

    switch(uni.getSystemInfoSync().platform){
        case 'android':
           console.log('运行Android上')
           break;
        case 'ios':
           console.log('运行iOS上')
           break;
        default:
           console.log('运行在开发者工具上')
           break;
    }

尺寸单位

vue页面支持px、rpx、rem、vh、vw、百分比写法
nvue页面不支持百分比

开发时只能存在px与rpx；尽量使用rpx； rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

tips: App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx

uni-app学习笔记