目录结构

  1. page   业务页面文件存放的目录
  2. static 存放静态资源
  3. unpackage 存放编译后的文件
  4. App.vue 可以进行全局配置
  5. main.js vue初始化入库文件
  6. manifest.json 配置应用名称、appid、logo、版本等打包信息
  7. pages.json 配置页面路由 导航条 选项卡
  8. uni.scss 基础样式规定

尺寸单位

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

  • px 即屏幕像素
  • rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算

    生命周期

    应用生命周期

onLaunch 当uni-app
初始化完成时触发（全局只触发一次）
onShow 当 uni-app
启动，或从后台进入前台显示
onHide 当 uni-app
从前台进入后台
onError 当 uni-app
报错时触发
onUniNViewMessage 对 nvue
页面发送的数据进行监听

页面生命周期

onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载

组件声明周期

beforeCreate 在实例初始化之后被调用。
created 在实例创建完成后被立即调用。
beforeMount 在挂载开始之前被调用。
mounted 挂载到实例上去之后调用。 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

页面

getApp

  1. getApp() 函数用于获取当前应用实例，一般用于获取globalData
  2. const app = getApp()
  3. console.log(app.globalData)

getCurrentPages

  1. getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
  2. getCurrentPages()[length-1].route    获取当前页面的路由

页面通信

uni.$emit

触发全局的自定事件。附加参数都会传给监听器回调

  1.  uni.$emit('update',{msg:'页面更新'})

uni.$on

监听全局的自定义事件。事件可以由 uni.$emit 触发

  1.  uni.$on('update',function(data){
  2.         console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
  3.     })

uni.$once

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

  1. uni.$once('update',function(data){
  2.         console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
  3.     })

uni.off

移除全局自定义事件监听器。

  1. uni.$off('update',function(data){
  2.         console.log('移除update ，携带参数 msg 为：' + data.msg);
  3.     })


原生子窗体—仅支持APP

在我们的开发中，经常会遇到各种层级覆盖和原生界面自定义的问题：

  • 覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏，比如 popup盖不住tabbar。
  • 弹出层内部元素可滚动,
  • 在地图、视频等组件上的添加复杂覆盖组件：比如直播视频上覆盖滚动的聊天记录。

**subNVue** 页面可以和 vue 页面进行通信，来告知 vue 页面用户执行的操作。或者通过 vue 页面对 subNVue 进行数据和状态的更新。 subNVue 除了与 vue 页面进行通信，还 可以与 nvue 页面进行通信。
如果一些简单的需求，如果 cover-view 已经能搞定，那也没必要使用subNVue

实现

  1. 创建一个xxx.nvue文件
  1. //在pages.json中在要显得页面下配置
  2. {  
  3.     "pages": [{  
  4.         "path": "pages/index/index", //首页  
  5.         "style": {  
  6.             "app-plus": {  
  7.                 "subNVues":[{  
  8.                     "id": "concat", // 唯一标识  
  9.                     "path": "pages/index/subnvue/concat", // 页面路径  
  10.                     /*"type": "popup",  配置这个是弹出层不配置是文字*/  
  11.                     "style": {  
  12.                         "position": "absolute",  
  13.                         "dock": "right",  
  14.                         "width": "100upx",  
  15.                         "height": "150upx",  
  16.                         "background": "transparent"  
  17.                     }  
  18.                 }]  
  19.             }  
  20.         }  
  21.     }]  
  22. }
  1. // 通过 id 获取 nvue 子窗体  
  2. const subNVue = uni.getSubNVueById('map_widget')  
  3. // 打开 nvue 子窗体  
  4. subNVue.show('slide-in-left', 300, function(){  
  5.     // 打开后进行一些操作...  
  6.     //   
  7. });  
  8. // 关闭 nvue 子窗体  
  9. subNVue.hide('fade-out', 300)

跨端兼容

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

ifdef：if defined 仅在某平台存在

ifndef：if not defined 除了某平台均存在

%PLATFORM%：平台名称 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 <!-- 注释 -->；

条件编译写法 说明
#ifdef APP-PLUS
需条件编译的代码
#endif		 仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif		 除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif		 在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

%PLATFORM% 可取值如下：

值 生效条件
VUE3 HBuilderX 3.2.0+ 详情
APP-PLUS App
APP-PLUS-NVUE或APP-NVUE App nvue
H5 H5
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 字节跳动小程序
MP-QQ QQ小程序
MP-KUAISHOU 快手小程序
MP-360 360小程序
MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION 快应用联盟
QUICKAPP-WEBVIEW-HUAWEI 快应用华为

支持的文件

  • .vue
  • .js
  • .css
  • pages.json
  • 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

    基本指令和VUE基本指令相同,组件中传递也相同

组件使用查看官网

API使用查看官网