基本页面

基本语言

支持原生渲染的nvue

可以编译为kotlin（Android）和swift（ios）的uts

开发规范


  • SFC：vue单文件组件规范
  • 标签规范：接近小程序规范
  • 接口能力：接近小程序，uni
  • 数据绑定及事件处理：同vue；其他：应用的声明周期、页面的生命周期
  • 如需兼容app-nvue，建议flex


编译器和运行时（runtime）

实现一套代码，多端运行

编译的输出物由各个终端的runtime进行解析。每个平台有自己的runtime

小程序：小程序版vue runtime

web端：比普通vue项目，多了一套ui库、页面路由框架、uni对象

app端：DCloud也有一套小程序引擎，打包app时将代码和DCloud小程序打包成apk或ipa

uni-app runtime

一、基础框架

数据驱动、全局文件、应用管理、页面管理、js引擎、渲染和排版引擎

web和小程序，不需要uni-app提供js引擎和排版引擎；app需要

App的js引擎：andriod是v8；iOS是jscore

App的渲染引擎：.vue由webview渲染，与小程序类似；.nvue由原生渲染

二、组件

只有基础组件

小程序端，基础组件直接转义为小程序内置组件，在小程序的runtime不占体积

web、android、ios，这几十个组件都在uni-app的runtime中，占用一定体积，相当于内置了一套ui库

组件扩展：

官方库uni ui基于这些基础组件封装的

web，可使用其他ui库（如element-ui），由于操作了DOM，无法在app和小程序中使用

App，支持使用原生编程语言来扩展原生组件，地图、ar

支持将微信自定义组件运行到微信小程序、web、app

三、API

内置了大量常见的、跨端的API，如uni.request、uni.getStorage

ext API：不常用API不在runtime，虽然uni开头，需要下载插件

APP：除了uni，还可以使用plus.的API、Native.js，以及通过uts编写原生插件，或java、objectC编写原生插件（调用os的API封装给js使用）

DCloud在开发app时有：5+App、wap2app、uni-app等3种模式，runtime在底层能力上是公用，所有uni-app可调用5+（plus.xxx）的API。uni-app的逻辑层运行在js层，渲染层是webview和原生nvue双选。而5+不区分逻辑层和渲染层，全部运行在webview，在性能上5+不及uni-app


逻辑层和渲染层分离（小程序、App）

基于webview的app性能不佳，因为js和界面渲染抢资源

逻辑层：单独的js引擎


小程序、app逻辑层不支持BOM、DOM

App只能在渲染层操作window、dom，即renderjs

目录结构

uniCloud： 云空间目录

components

utssdk： 存放uts文件

uni_modules 存放[uni_module](/uni_modules)

platforms 存放各平台专用页面的目录

nativeplugins App原生语言插件

nativeResources App端原生资源目录（android、ios）

hybrid App端存放本地html文件的目录

wxcomponents 存放小程序组件的目录

unpackage 非工程代码，一般存放运行或发行的编译结果

AndroidManifest.xml Android原生应用清单文件

Info.plist iOS原生应用配置文件

manifest.json 配置应用名称、appid、logo、版本等打包信息

pages.json 未配置的编译时忽略

App.vue main.js uni.scss

static：会直接复制到最终打包目录，不会打包编译

非static文件，引用时才会打包编译

css、less、scss放在自建的common目录

页面生命周期

onInit 参数为上个页面传递数据，触发早于onLoad（百度小程序）

onLoad 监听页面加载，响应式数据、computed、watch、props、slots已设置完成；参数为上个页面传递

onShow 监听页面显示，页面每次出现在屏幕上都触发

onReady 监听页面初次渲染完成，组件已挂载完成，$el可用，渲染速度够快的话，会在页面进入动画完成前触发

onHide

onUnload

onResize 监听窗口尺寸变化

onPullDownRefresh 监听用户下拉动作

onReachBottom 页面滚动到底部时间

onTabItemTap 点击tab时触发

onShareAppMessage 点击右上角分享

onPageScroll

onNavigationBarButtonTap 原生标题栏按钮点击事件（返回原生标题栏按钮数组的下标）

onBackPress：uni.navigateBack()

onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件

onNavigationBarSearchInputConfirmed点击软键盘“搜索”按钮时触发

onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件（page.json中searchInput配置disabled为true时触发）

onShareTimeline 微信小程序右上角转发到朋友圈

onAddToFavorites 小程序监听右上角收藏

onReachBottom：可在page.json定义底部触发距离onReachBottomDistance，距离底部为该距离时触发onReachBottom

如使用scroll-view导致页面没有滚动，触底事件不会触发


onPageScroll

scrollTop：垂直方向已滚动距离

渲染层触发，js在逻辑层执行，通信有损耗，不要写复杂js


App、H5实现滚动时标题栏透明渐变：pages.json中配置titleNView的types为transparent

滚动吸顶有插件


App、微信小程序、H5，可以使用wxs监听滚动

app-nvue，可以使用bindings监听滚动


onBackPress：不可使用async，会导致无法阻止默认返回


onTabItemTap：切换、滚动或刷新当前页面

如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可使用plus.nativeObj.view放在一个区块盖住原来的tabitem

页面调用接口

getApp() 获取当前应用实例

可以通过this.$scope获取对应app实例


getCurrentPages() 获取当前页面栈的实例，数组，第一个元素为首页，最后一个元素为当前页面


page.$getAppWebview() 获取当前页面的webview对象实例；如需要可使用原生子窗体subNvue覆盖

page.route 获取当前页面的路由

const app = getApp()

app.globalData


navigateTo，redirectTo只能打开非tabBar页面

switchTab 只能打开tabBar页面

reLaunch 可以打开任意页面

只要定义是tabBar的页面，底部都有tabBar


export default { data() { return { title: 'Hello' } }, onLoad() { // #ifdef APP-PLUS const currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效 currentWebview.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}}); //动态重设bounce效果 // #endif }}


var pages = getCurrentPages();var page = pages[pages.length - 1];// #ifdef APP-PLUSvar currentWebview = page.$getAppWebview();console.log(currentWebview.id);//获得当前webview的idconsole.log(currentWebview.isVisible());//查询当前webview是否可见);

页面通讯

uni.$emit(evnetName, {触发事件携带参数})

uni.$on(enventName, callback)

uni.$once(eventName, callback) 触发一次后移除

uni.$off([enventName, callback])

都是App全局级别，跨任意组件、页面、nvue、vue

注意移除，如onUnload

路由

uni.navigateTo 新页面入栈

uni.redirectTo 当前页面出栈，新页面入栈

uni.navigateBack 页面不断出栈，直到目标返回页

uni.switchTab 页面全部出栈，只留下新的Tab

uni.reLaunch 页面全部出栈，只留下新的页面

列表渲染

条件渲染

template、block：包装元素，不做热河渲染


<template v-if="test"> <view>test 为 true 时显示</view></template><template v-else> <view>test 为 false 时显示</view></template><block v-for="(item,index) in list" :key="index"> <view>{{item}} - {{index}}</view></block>

nvue开发与vue开发常见区别


  1. nvue只可以使用v-if，不可使用v-show
  2. nvue只能使用flex布局
  3. nvue布局默认竖排（column），如需改变方向，manifest.json =》app-plus =》nvue =》flex-direction下修改
  4. nvue页面编译为H5、小程序时，css默认flex，方向垂直
  5. 文字内容，必须在，不能在，否则无法绑定js里的变量
  6. 只有text标签可以设置字体大小、颜色
  7. 不能使用百分比，没有媒体查询
  8. 建议锁定nvue页面方向
  9. 支持的css有限
  10. 不支持背景图
  11. css选择器只支持clas选择器
  12. nvue各组件在安卓端默认是透明的，如果不设置backgroud-color，会导致出现重影
  13. class绑定时只支持数组语法
  14. Android端在一个页面大量使用圆角会造成性能问题
  15. nvue没有bounce回弹效果，只有几个列表组件有bounce效果，包括list、recycle-list、waterfall
  16. 没有页面滚动概念，只要部分组件可滚动（list、waterfall、scroll-view/scroller）,所以在nvue编译为uni-app模式时，给页面外层自动套scroller，页面过高自动滚动
  17. App.vue定义js全局变量不会在nvue生效
  18. App.vue定义的全局css，对nvue、vue同时生效，不支持会报警，建议包裹在条件编译
  19. 不能在style中引入字体文件。如果是本地字体，可以用plus.io的API转了途径
  20. 不支持ts
  21. nvue页面不建议关闭原生导航栏时


easycom

只管使用组件，无需导入和注册

只需安装在uni_modules的components目录下，components/组件名称/组件名称.vue 或 uni_modules/插件ID/components/组件名称/组件名称.vue

打包后自动剔除未使用组件

pages.json的easycom设置，如关闭自动扫描，或自定义扫描组件的策略

js语法

标准ECMAScript+扩展了uni，其他平台的扩展：小程序扩展了wx、my、swan；浏览器扩展了window、document、naivgator

css语法

px

rpx

uts

不支持ts中的联合类型

Kotlin 特有的数字类型


  • Byte, UByte
  • Short, UShort
  • Int, UInt
  • Long, ULong
  • Float
  • Double


Swift 特有的数字类型


  • Int, UInt, Int8, UInt8, Int16, UInt16, Int32, UInt32, Int64, UInt64
  • Float, Float16, Float32, Float64
  • Double


全程uni type script，是一门跨平台、高性能、强类型语言

web，被编译成js

Android，编译为Kotlin

iOS，编译为Swift

采用了与ts基本一致的语法规范，支持绝大多数ES6



编译器

cli方法

HBuilderX创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器

cli创建的项目，想在HBuilderX中使用，把工程拖入HBuilderX，走的是项目下的编译器

如果把src拖入HBuilderX，则走的是HBuilderX安装目录下得plugin的编译器

条件编译

#ifdef APP-Plus || MP-WEIXIN #endif

#ifndef H5 #endif


js：//

css：/**/

vue/nvue：


APP-PLUS：APP-NVUE（APP-PLUS-NVUE）、APP-VUE


static：根据目录条件编译

环境变量

一、vue.config.js

修改webpack配置

二、package.json

package.json文件的env节点下配置

三、.env

cli创建的项目可在根目录放置.env

编译器配置

manifest.json：配置vue版本。发行H5平台的路由

vue.config.js： webpack配置

vite.config.js：修改vite配置

package.json

.env

uni_modules

uni-app的插件模块化规范，通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装

安装最新版本，不嵌套

使用HBuilderX3.1.0直接导入，右键发布、安装、升级


区别于node_modules:

1、node_modules不满足云端一体的需求。uniCloud云函数、公共模块、schema和前端js_sdk、组件、页面、项目，无法在node_modules有效融合

2、付费插件，DCloud有版权保护

3、HBuilderX提供版本对比

4、uni_modules支持放置node_modules

App专题

nvue介绍

App端内置了一个基于weex改进的原生渲染引擎

提供丰富的插件生态、云打包

修复的bug：


  • Android良好的支持边框阴影
  • iOS支持高斯模糊
  • 可实现区域滚动长列表+左右拖动列表+吸顶
  • 优化圆角边框性能
  • 扩展了更多css


1、nvue长滚动没有性能问题，需要使用list、recycle-list、waterfall组件，性能优于vue的scroll-view

2、复杂高性能的自定义下拉刷新refresh

3、左右拖动的长列表

4、swiper-list

5、软键盘右下角按钮文字为“发送”

6、解决前端控件无法覆盖原生控件的层级问题，subnvue

7、深度map组件

8、深度使用video：video内嵌到swiper中；全屏后，通过cover-view实现内容覆盖，比如增加文字标题、分享按钮

9、直播推流：nvue下有live-pusher

10、App启动速度，manifest配置fast模式，可以控制1秒内


不及vue

1、canvas

2、动态横竖屏

weex编译模式

uni-app编译模式

{

"app-plus": {

"renderer": "native" //App端纯原生渲染，vue文件被忽略

"nvueCompiler": "weex"/"uni-app"编译模式，HBuilderX2.4之前默认weex，之后为uni-app模式

}

}


weex编译模式：

不支持onNavigationBarButtonTap，原生监听uni.onNavigationBarButtonTap

不支持onShow，可监听addEventListener('show')达到相同效果

不支持vuex

页面跳转遵循uni-app模式

原生开发没有页面滚动概念，只有放在list、waterfall、scroll-view/scroller才可以滚动，uni-app会给nvue页面外层嵌套一个scroller

-页面有recycle-list，不会给页面嵌套scroller

-不希望嵌套scoller，可在pages.json中关闭

{

"page": "",

"style": {

"disableScroll": true

}

}

weex编译模式 uni-app编译模式

仅app 所有端

weex组件，如div uni-app组件如view

只支持weex生命周期 支持所有uni-app生命周期

weex API、uni API、Plus API weex API、uni API、Plus API

750px，wx是固定像素单位 750rpx是屏幕宽度，px是固定像素单位

全局样式手动引入 可在app.vue中定义

必须给页面套组件 默认支持页面滚动

nvue页面

vue和nvue都需要在pages.json中注册，同名的话，App端nvue优先，非app端vue优先


render-whole


视图层将组件及其子组件的信息结构一次性与原生层通讯，通过整个节点的重绘提升了排版渲染性能

为false时，视图层将以子节点一个接一个和原生层通讯，渲染时间更久

默认启用render-whole为true的组件列表：

text

cell

header

cell-slot

recycle-list