https://uniapp.dcloud.net.cn/tutorial/

#————————————————————————————————————————————————————————

未分类

视图层js（自定义的章节用于整理）

在webview渲染时，比如app-vue、微信小程序、H5中，也可以使用wxs监听滚动
- 注释：WXS是一套运行在视图层的脚本语言，提供给开发者5个基础类库，包括console、Math、JSON、Number、Date，以及一些常用的全局变量和全局函数，数量不多。
- 注释：uniapp通过在vue文件中使用script标签引入wxs文件来引入，在template中可以使用wxs文件 export 出的数据和方法
- 注释：<script module="test" lang="wxs">在模板中使用时<view @touchstart="test.touchstart"
所以注意小程序和app的逻辑层都不支持浏览器专用的window、dom等API。app只能在渲染层操作window、dom，即renderjs。
- 注释：RenderJS是一个运行在视图层的JS，只支持app-vue和h5。
- 注释：<script module="myRenderModule" lang="renderjs">模板中可以通过this.$render.myRenderModule.someMethod()来调用
- 注释：能在视图层操作DOM，运行for web的JS库
nvue暂不支持滚动监听，可用bindingx代替
- 注释：bindingx它的核心思想是将交互行为以表达式的方式描述，并提前预置到 Native，从而避免 Native 与 JS 频繁通信。
- 注释：使用时引入这个库，这个库提供了方法让你把交互绑定到元素上。
- 注释：const Binding = uni.requireNativePlugin('bindingx');

#————————————————————————————————————————————————————————

全局文件

pages.json 页面路由

注释：部分配置支持组件化配置，例如navigation-bar组件可以用来配置原生导航栏
用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
- | globalStyle | Object | 否 | 设置默认页面的窗口表现 |
  - 用于设置应用的状态栏、导航条、标题、窗口背景色等。
    - 注释：状态栏是指最顶部5g信号、网络等图标所在行
    - 注释：导航栏、标题一般统一在一处
  - 导航栏——————————————————————————————————————————————————————————————————————
  - 如果需要js动态修改导航栏，uni有跨端的api可修改标题、背景色、前景色。这部分是app、小程序、h5都支持的（全局文件-pages.json 页面路由章节-导航栏开发指南）
    - uni.setNavigationBarTitle(OBJECT)
  - | navigationBarBackgroundColor | HexColor | #F8F8F8 | 导航栏背景颜色（同状态栏背景色） | APP与H5为#F8F8F8，小程序平台请参考相应小程序文档 |
  - | navigationBarTextStyle | String | black | 导航栏标题颜色及状态栏前景颜色，仅支持 black/white | 支付宝小程序不支持，请使用 my.setNavigationBar |
    - 未读，暂不考虑
    - 注释：前景和背景相对，就是指标题、图标等的颜色。
    - 页面禁用原生导航栏后，想要改变状态栏的前景字体样式，仍可设置页面的 navigationBarTextStyle 属性（只能设置为 black或white）
      - 如果想单独设置状态栏颜色，App端可使用plus.navigator.setStatusBarStyle设置。注意部分低端Android手机（4.4）自身不支持设置状态栏前景色。
        
        未读
  - | navigationBarTitleText | String | | 导航栏标题文字内容 |
  - | navigationStyle | String | default | 导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意 | 微信小程序 7.0+、百度小程序、H5、App（2.0.3+） |
    - 禁用原生导航后
      - 滚动条会通顶（全局文件-pages.json 页面路由章节-导航栏开发指南）
      - 非H5端，手机顶部状态栏区域会被页面内容覆盖。
        当设置 "navigationStyle":"custom" 取消原生导航栏（标题栏）后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。（教程-css语法章节）
      - 设为custom后，在微信小程序里，右上角始终都有一个胶囊按钮。（全局文件-pages.json 页面路由章节-导航栏开发指南）
    - 如果原生导航栏不能满足需求，推荐使用uni ui的自定义导航栏NavBar。这个前端导航栏
      - 注释：具体查看uni-nav-bar这个组件
      - 涉及到导航栏高度的css尽量放置在App.vue里面以提高渲染速度（css渲染顺序：先渲染App.vue里面的css，再渲染页面css）（全局文件-pages.json 页面路由章节-导航栏开发指南）
      - 如果是深色造成闪屏，需要在pages.json的titleNView下配置webview的背景色（全局文件-pages.json 页面路由章节-导航栏开发指南）
        疑问：titleNView.backgroundColor？
      - 有个高频场景是App“首页”的title自定义，如果实现的效果很个性化，那么使用plus.nativeObj.view的方案会过于复杂，由于首页并不存在新页面进入立即渲染的压力，所以App首页如果要大幅定制，推荐使用前端view绘制，而不是使用plus.nativeObj.view（全局文件-pages.json 页面路由章节-导航栏开发指南）
        注释：首页不存在这种压力可能是因为首页加载进行了优化自身加载比页面切换时块，首页在页面跳转时一般会被缓存到后台，当页面切回时不需要重新渲染。
      - 非H5端，前端导航盖不住原生组件。
        如果是小程序下，可以使用cover-view来做导航栏，避免覆盖问题
      - 如果是App下，建议使用titleNView或subNVue，体验更好
        注释：可以在全局通过navigationStyle关闭原生导航栏，然后在app-plus中设置titleNView来显示原生导航栏
    - 前端导航栏搭配原生下拉刷新时，会有问题，包括
      - 原生下拉刷新的起始位置在原生导航栏的下方，如果取消原生导航栏，使用自定义导航栏，原生下拉刷新的位置会在屏幕顶部。如果希望在自定义导航栏下方拉动，只能使用circle方式的下拉刷新，并设置offset参数，将circle圈的起始位置调整到自定义导航栏下方。
        
        注释：circle方式和offset在全局配置文件中可以进行配置。
      - 必须取消页面的bounce效果，否则滚动到顶时再拖屏幕，在iOS上发现title也被拖下来了（全局文件-pages.json 页面路由章节-导航栏开发指南）
        应该是指app，疑问：title被拖动下来是指自定义导航栏？
        
        iOS上，default模式的下拉刷新和bounce回弹是绑定的，如果设置了bounce:none，会导致无法使用default下拉刷新
      - App和H5下，原生下拉刷新提供了circle样式，可以指定offset偏移量（pages.json的app-plus下配置），自定义下拉圈出现的位置。在hello uni-app的扩展组件中有示例。
        如果想在vue页面通过web前端技术实现下拉刷新，插件市场有例子，但前端下拉刷新的性能不如原生，复杂长列表会很卡
      - 微信小程序下iOS需要拉更长才能看到下拉刷新的三个点，而Android是从屏幕顶部下拉，无法从导航栏下方下拉。
        如果一定要从前端导航栏下拉，小程序下只能放弃原生下拉刷新，纯前端模拟，参考mescroll插件，但这样很容易产生性能问题。目前小程序平台自身没有提供更好的方案
        
        未读
  - | transparentTitle | String | none | 导航栏整体（前景、背景）透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 | 支付宝小程序、H5、APP |
  - | titlePenetrate | String | NO | 导航栏点击穿透 | 支付宝小程序、H5 |
    - 注释：当titlePenetrate设置为"YES"时，导航栏的标题区域将具有点击穿透的效果，这意味着点击导航栏标题区域时，点击事件将会穿透到页面下方的元素上，触发相应的点击事件。适用于沉静式
  - | titleImage | String | | 导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址 | 支付宝小程序、H5、APP |
    - 支付宝需要真机调试才能看到效果，支付宝开发者工具内无效果
    - 会覆盖掉pages->style内的设置文字标题
  - 上下拉及背景 globalStyle中——————————————————————————————————————————————————————————————————————
  - | backgroundColor | HexColor | #ffffff | 下拉显示出来的窗口的背景色 | 微信小程序 |
    - 注释：下拉刷新时顶部显示的窗口背景色，应该是指导航栏和内容之间刷新...所在的背景
  - | backgroundColorTop | HexColor | #ffffff | 顶部窗口的背景色（bounce回弹区域） | 仅 iOS 平台 |
    - 注释：在globalStyle和pages中都可以配置
  - | backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色（bounce回弹区域） | 仅 iOS 平台 |
    - 注释：在globalStyle和pages中都可以配置
  - | backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark / light | 微信小程序 |
    - 注释：在pages中也可以配置
  - | enablePullDownRefresh | Boolean | false | 是否开启下拉刷新，详见页面生命周期。 |
    - 注释：应该是用来控制是否触发 onPullDownRefresh，为 true 时才会触发
    - 注释：在globalStyle和pages中都可以配置
    - enablePullDownRefresh 与 pullToRefresh->support 同时设置时，后者优先级较高。
    - 开启原生下拉刷新时，页面里不应该使用全屏高的scroll-view，向下拖动内容时，会优先触发下拉刷新而不是scroll-view滚动
    - 如果想在app端实现更多复杂的下拉刷新，比如美团、京东App那种拉下一个特殊图形，可以使用nvue的<refresh>组件。HBuilderX 2.0.3+起，新建项目选择新闻模板可以体验
  - | onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位只支持px |
  - 其他——————————————————————————————————————————————————————————————————————
  - | pageOrientation | String | portrait | 横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详见响应显示区域变化 | App 2.4.7+、微信小程序、QQ小程序 |
    - 未读
    - 注释：auto 页面会根据屏幕的方向自动调整其显示方向
    - 注释：landscape 屏幕固定为横屏
  - | animationType | String | pop-in | 窗口显示的动画效果，详见：窗口动画 | App |
    - | slide-in-right | slide-out-right | 新窗体从右侧进入 |
    - | slide-in-left | slide-out-left | 新窗体从左侧进入 |
    - | slide-in-top | slide-out-top | 新窗体从顶部进入 |
    - | slide-in-bottom | slide-out-bottom | 新窗体从底部进入 |
    - | pop-in | pop-out | 新窗体从左侧进入，且老窗体被挤压而出 |
    - | fade-in | fade-out | 新窗体从透明到不透明逐渐显示 |
    - | zoom-out | zoom-in | 新窗体从小到大缩放显示 |
    - | zoom-fade-out | zoom-fade-in | 新窗体从小到大逐渐放大并且从透明到不透明逐渐显示 |
    - | none | none | 无动画 |
  - | animationDuration | Number | 300 | 窗口显示动画的持续时间，单位为 ms | App |
  - | usingComponents | Object | | 引用小程序组件，参考小程序组件 |
  - | renderingMode | String | | 同层渲染，webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层 | 微信小程序 |
    - 注释：在传统的混合应用开发中，原生组件通常有自己的渲染层级，这可能导致它们与网页内容在滚动、Z轴堆叠顺序（z-index）、透明度处理、动画效果等方面存在不一致性。同层渲染则解决了这个问题，它使得原生组件（例如视频组件、地图组件等）可以直接嵌入到Web视图（在iOS中可能是WKWebView，在Android中可能是基于embed标签或者其他机制）中，并且能与普通的DOM元素无缝地共同渲染和交互。
    - 注释：设置为 seperated，为分离模式
  - | leftWindow | Boolean | true | 当存在 leftWindow 时，默认是否显示 leftWindow | H5 |
    - 注释：这里只是个开关，leftWindow相关具体配置和globalStyle是同一层级的
  - | topWindow | Boolean | true | 当存在 topWindow 时，默认是否显示 topWindow | H5 |
  - | rightWindow | Boolean | true | 当存在 rightWindow 时，默认是否显示 rightWindow | H5 |
  - | rpxCalcMaxDeviceWidth | Number | 960 | rpx 计算所支持的最大设备宽度，单位 px | App（vue2 且不含 nvue）、H5（2.8.12+） |
    - 注释：屏幕超过这个宽度将会以rpxCalcBaseDeviceWidth设定的宽度计算的像素显示
  - | rpxCalcBaseDeviceWidth | Number | 375 | rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px | App（vue2 且不含 nvue）、H5（2.8.12+）
  - | rpxCalcIncludeWidth | Number | 750 | rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx | App（vue2 且不含 nvue）、H5（2.8.12+） |
    - 注释：1rpx在750宽的屏幕中等于1px
  - | dynamicRpx | Boolean | false | 动态 rpx，屏幕大小变化会重新渲染 rpx | App-nvue（vue3 固定值为 true） 3.2.13+ |
  - | maxWidth | Number | | 单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选) | H5（2.9.9+） |
    - 使用 maxWidth 时，页面内fixed元素需要使用--window-left,--window-right来保证布局位置正确
  - 各个平台——————————————————————————————————————————————————————————————————————
  - | app-plus | Object | | 设置编译到 App 平台的特定样式，配置项参考下方 app-plus | App |
    - 配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持。以下仅列出常用，更多配置项参考 WebviewStyles
    - .nvue 页面仅支持 titleNView、pullToRefresh、scrollIndicator 配置，其它配置项暂不支持
    - | background | HexColor | #FFFFFF | 窗体背景色。无论vue页面还是nvue页面，在App上都有一个父级原生窗体，该窗体的背景色生效时间快于页面里的css生效时间 | App (vue 页面需要将 body 背景色设为透明) |
    - | titleNView | Object | | 导航栏，详见:导航栏 | App、H5 |
      - 对于app侧扩展的设置，比如自己添加的buttons，则需使用plus的js api来动态设置。在App端可以通过得到webview对象，通过setStyle方法重新设置，包括修改webview对象的titleNview属性，以达到修改标题栏按钮文字及样式的功能。具体参考（全局文件-pages.json 页面路由章节-导航栏开发指南）
        
        未读
      - 实际上可用的titleNView设置还有很多，详细的api（全局文件-pages.json 页面路由章节-导航栏开发指南）
        未读
      - titleNView设为false时，原生导航栏不显示
        注释：navigationStyle也可以隐藏原生导航栏
      - 可通过 <navigation-bar> 配置
      - 背景——————————————————————————————————————————————————————————————————————
      - | backgroundColor | String | #F7F7F7 | 背景颜色，支持16进制颜色或RGBA颜色。 | App端仅悬浮导航栏支持RGBA颜色 |
      - | type | String | default | 导航栏样式。"default"-默认样式；"transparent"-滚动透明渐变；"float"-悬浮导航栏。 | App-nvue 2.4.4+ 支持、App-vue、H5 |
        为 transparent 时
        
        导航栏为滚动透明渐变导航栏，默认只有button
        
        注释：在未滚动时，不显示导航栏，只显示按钮
        
        滚动后标题栏底色和title文字会渐变出现，不支持自定义按钮设置color属性
        
        页面刚载入时没有导航标题，页面内容通顶到状态栏里，页面向下滚动后标题栏渐变出现（全局文件-pages.json 页面路由章节-导航栏开发指南）
        
        透明渐变的导航栏的button图标有一个默认的灰色背景圈，防止背景图和按钮前景颜色相同导致按钮无法看清。如果要去掉这个灰色背景图，可以配置button的背景颜色为透明（全局文件-pages.json 页面路由章节-导航栏开发指南）
        
        type 为 float 时，导航栏为悬浮标题栏，此时页面内容上顶到了屏幕顶部，包括状态栏
      - | backgroundImage | String | | 支持以下类型：背景图片路径 - 如"/static/img.png"，仅支持本地文件绝对路径，根据实际标题栏宽高拉伸绘制；渐变色 - 仅支持线性渐变，两种颜色的渐变，如“linear-gradient(to top, #a80077, #66ff00)”，其中第一个参数为渐变方向，可取值： "to right"表示从左向右渐变， “to left"表示从右向左渐变， “to bottom"表示从上到下渐变， “to top"表示从下到上渐变， “to bottom right"表示从左上角到右下角， “to top left"表示从右下角到左上角 | 2.6.3 |
      - | backgroundRepeat | String | | 仅在backgroundImage设置为图片路径时有效。可取值： "repeat" - 背景图片在垂直方向和水平方向平铺； "repeat-x" - 背景图片在水平方向平铺，垂直方向拉伸； “repeat-y” - 背景图片在垂直方向平铺，水平方向拉伸； “no-repeat” - 背景图片在垂直方向和水平方向都拉伸。默认使用 “no-repeat" | 2.6.3 |
      - | blurEffect | String | "none" | 此效果将会高斯模糊显示标题栏后的内容，仅在type为"transparent"或"float"时有效。可取值： "dark" - 暗风格模糊，对应iOS原生UIBlurEffectStyleDark效果； "extralight" - 高亮风格模糊，对应iOS原生UIBlurEffectStyleExtraLight效果； "light" - 亮风格模糊，对应iOS原生UIBlurEffectStyleLight效果； "none" - 无模糊效果。注意：使用模糊效果时应避免设置背景颜色，设置背景颜色可能覆盖模糊效果。 | 2.4.3 |
        仅iOS平台支持，设置毛玻璃效果时建议不要设置背景颜色、背景图，即使设置也需要背景颜色和背景图设置为半透明才能看到毛玻璃效果（全局文件-pages.json 页面路由章节-导航栏开发指南-看示例)
        
        (教程-App使用高斯模糊效果)
        HBuilderX 从 2.4.4 版本开始，uni-app iOS 端 navigationBar 支持高斯模糊效果（毛玻璃效果）
        
        HBuilderX 从 3.4.10 版本开始，uni-app Android 端 navigationBar 支持高斯模糊效果（毛玻璃效果）
        
        backgroundColor需要设置带有透明度颜色才能看到高斯模糊效果。不设置backgroundColor也无法看到高斯模糊效果！
      - | coverage | String | "132px" | 标题栏控件变化作用范围，仅在type值为transparent时有效，页面滚动时标题栏背景透明度将发生变化。当页面滚动到指定偏移量时标题栏背景变为完全不透明。支持百分比、像素值 |
      - 按钮和搜索框——————————————————————————————————————————————————————————————————————
      - （全局文件-pages.json 页面路由章节-导航栏开发指南-看示例)
        "redDotColor": "#FF0000" // 可通过titleNView的redDotColor属性修改 buttons 中红点颜色，格式为"#RRGGBB"，默认值为"#FF0000"
        
        动态显示红点先获取webview对象，调用其showTitleNViewButtonRedDot方法显示红点webview.showTitleNViewButtonRedDot({ index:0 })
        
        动态隐藏红点先获取webview对象，调用其hideTitleNViewButtonRedDot方法隐藏红点
        
        showTitleNViewButtonRedDot和hideTitleNViewButtonRedDot方法中index的值为按钮在buttons数组的索引值，从0开始
        
        动态修改角标先获取webview对象，调用其setTitleNViewButtonBadge方法修改角标 webview.setTitleNViewButtonBadge({ index:0, text:'9' });
        
        setTitleNViewButtonBadge方法中index的值为按钮在buttons数组的索引值，从0开始；text属性值为空时不显示角标
        
        目前没有提供专门的属性来控制按钮的隐藏及显示，但可以通过width属性设置按钮宽度为0来达到隐藏的效果，可调用setTitleNViewButtonStyle方法达到动态操作隐藏/显示按钮
        虽然可以通过更新titleNView的buttons属性值实现动态添加/删除按钮效果，但实际会重新创建所有按钮，因此不推荐这种操作方式，推荐通过width属性控制按钮的隐藏/显示来达到动态添加/删除按钮的效果
        
        webview.setTitleNViewButtonStyle(0, { width:'0px' });
      - | buttons | Array | | 自定义按钮，详见 buttons | 纯nvue即render:native时暂不支持 |
        注释：使用 onNavigationBarButtonTap 监听按钮点击事件
        
        注释：这里有官方文档有问题，纯nvue即render:native应该是manifest.json中的renderer:native
        
        App平台，buttons动态修改，详见
        未读、重复
        
        App平台，buttons角标动态修改，见 hello uni-app 中模板-顶部导航标题栏-导航栏带红点和角标
        
        redDot | Boolean | 原生导航栏自定义按钮带红点（全局文件-pages.json 页面路由章节-导航栏开发指南）
        
        badgeText | String | 原生导航栏自定义按钮带角标（全局文件-pages.json 页面路由章节-导航栏开发指南）
        badgeText优先级高于redDot，即优先显示角标（全局文件-pages.json 页面路由章节-导航栏开发指南-看示例)
        
        | fontSrc | String | | 按钮上文字使用的字体文件路径。不支持网络地址，请统一使用本地地址。 |
        注释：应该类似于static/iconfont.ttf
        
        | text | String | | 按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）。 |
        App下原生导航栏的按钮如果使用字体图标，注意检查字体库的名字（font-family）是否使用了默认的 iconfont，这个名字是保留字，不能作为外部引入的字体库的名字，需要调整为自定义的名称，否则无法显示。
        
        注释：这里应该是不需要注意的，因为在元素上直接引用了字体文件，而不是注册字体名。这个提示应该和后文nvue css中不允许使用iconfont作为字体名的字体库。
        
        | type | String | none | 按钮样式，可取值见：buttons 样式 |
        使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性
        
        | forward | 前进按钮 |
        
        | back | 后退按钮 |
        
        | share | 分享按钮 |
        
        | favorite | 收藏按钮 |
        
        | home | 主页按钮 |
        
        | menu | 菜单按钮 |
        
        | close | 关闭按钮 |
        
        | none | 无样式，需通过 text 属性设置按钮上显示的内容、通过 fontSrc 属性设置使用的字体库。 |
        
        | color | String | 默认与标题文字颜色一致 | 按钮上文字颜色 |
        titleNView 的 type 值为 transparent 时，不支持自定义按钮设置color属性
        
        格式为"#RRGGBB"
        
        | background | String | 默认值为灰色半透明 | 按钮的背景颜色，仅在标题栏type=transparent时生效 |
        
        | colorPressed | String | 默认值为 color 属性值自动调整透明度为 0.3 | 按下状态按钮文字颜色 |
        
        | float | String | right | 按钮在标题栏上的显示位置，可取值"left"、"right" |
        
        | fontWeight | String | normal | 按钮上文字的粗细。可取值"normal"-标准字体、"bold"-加粗字体。 |
        
        | fontSize | String | | 按钮上文字大小 |
        
        | select | Boolean | false | 是否显示选择指示图标（向下箭头），常用于城市选择 |
        颜色与文字颜色一致（全局文件-pages.json 页面路由章节-导航栏开发指南-看示例)
        
        | width | String | 44px | 按钮的宽度，可取值： "*px" - 逻辑像素值，如"10px"表示10逻辑像素值，不支持rpx。按钮的内容居中显示； "auto" - 自定计算宽度，根据内容自动调整按钮宽度 |
      - | searchInput | Object | | 原生导航栏上的搜索框配置，详见：searchInput | 1.6.0 |
        如需动态修改searchInput，或者获取searchInput的placehold，参考uni-app动态修改App端导航栏
        
        未读，有重复的
        
        App平台，设置searchInput的文字动态修改，API见文档
        注意disable状态无法设置文字、placehold暂不支持动态设置
        
        H5平台，如需实现上述动态修改，需在条件编译通过dom操作修改
        
        搜索框的优先级高于标题（即设置了搜索框后将不再显示标题）（全局文件-pages.json 页面路由章节-导航栏开发指南-看示例)
        
        searchInput的点击输入框onNavigationBarSearchInputClicked、文本变化onNavigationBarSearchInputChanged、点击搜索按钮onNavigationBarSearchInputConfirmed等生命周期
        
        | autoFocus | Boolean | false | 是否自动获取焦点 |
        
        | align | String | center | 非输入状态下文本的对齐方式。可取值： "left" - 居左对齐； "right" - 居右对齐； "center" - 居中对齐。 |
        
        | backgroundColor | String | rgba(255,255,255,0.5) | 背景颜色 |
        
        | borderRadius | String | 0px | 输入框的圆角半径，取值格式为"XXpx"，其中XX为像素值（逻辑像素），不支持rpx。 |
        
        | placeholder | String | | 提示文本。 |
        
        | placeholderColor | String | #CCCCCC | 提示文本颜色 |
        
        | disabled | Boolean | false | 是否可输入 |
      - | homeButton | Boolean | false | 标题栏控件是否显示Home按钮 |
      - | autoBackButton | Boolean | true | 标题栏控件是否显示左侧返回按钮 | App 2.6.3+ |
      - | backButton | Object | | 返回按钮的样式，详见：backButton | App 2.6.3 |
        （全局文件-pages.json 页面路由章节-导航栏开发指南-看示例)，和官方文档有出入，怀疑这是错的
        
        "badgeColor":"#FF0000", // 返回按钮角标
        
        "badgeBackground":"#00FF00" // 返回按钮角标
        
        "titleSize": "16px" // 返回按钮标题字大小
        
        HBuilderX 2.6.3+ 支持
        
        | background | String | none | 背景颜色，仅在标题栏type=transparent时生效，当标题栏透明时按钮显示的背景颜色。可取值#RRGGBB和rgba格式颜色字符串，默认值为灰色半透明。
        
        | badgeText | String | | 角标文本，最多显示3个字符，超过则显示为...
        
        | color | String | 窗口标题栏控件的标题文字颜色。 | 图标和标题颜色，可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。 |
        
        | colorPressed | String | | 按下状态按钮文字颜色，可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为color属性值自动调整透明度为0.3。 |
        
        | fontWeight | String | "normal" | 返回图标的粗细，可取值： "normal" - 标准字体； "bold" - 加粗字体。
        
        | fontSize | String | | 返回图标文字大小，可取值：字体高度像素值，数字加"px"格式字符串，如"22px"。窗口标题栏为透明样式（type="transparent"）时，默认值为"22px"；窗口标题栏为默认样式（type="default"）时，默认值为"27px"。 |
        
        | redDot | Boolean | false | 是否显示红点，设置为true则显示红点，false则不显示红点。默认值为false。注意：当设置了角标文本时红点不显示。
        
        | title | String | | 返回按钮上的标题，显示在返回图标（字体图标）后，默认为空字符串。
        
        | titleWeight | String | "normal" | 返回按钮上标题的粗细，可取值： "normal" - 标准字体； "bold" - 加粗字体。
      - 标题和图标——————————————————————————————————————————————————————————————————————
      - | titleColor | String | #000000 | 标题文字颜色 |
      - | titleOverflow | String | ellipsis | 标题文字超出显示区域时处理方式。"clip"-超出显示区域时内容裁剪；"ellipsis"-超出显示区域时尾部显示省略标记（...）。 |
      - | titleText | String | | 标题文字内容 |
      - | titleSize | String | | 标题文字字体大小 |
      - | titleAlign | String | "auto" | 可取值： "center"-居中对齐； "left"-居左对齐； "auto"-根据平台自动选择（Android平台居左对齐，iOS平台居中对齐） | 2.6.3 |
      - | subtitleColor | String | | 副标题文字颜色，颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示标题文字颜色为红色。默认值与主标题文字颜色一致 | 2.6.6 |
      - | subtitleSize | String | "auto" | 副标题文字字体大小，字体大小单位为像素，如"14px"表示字体大小为14像素，auto表示自动计算，约为12像素。 | 2.6.6 |
      - | subtitleOverflow | String | "ellipsis" | 标题文字超出显示区域时处理方式，可取值： "clip" - 超出显示区域时内容裁剪； "ellipsis" - 超出显示区域时尾部显示省略标记（...）。 | 2.6.6 |
      - | subtitleText | String | | 副标题文字内容，设置副标后将显示两行标题，副标显示在主标题（titleText）下方。注意：设置副标题后将居左显示 | 2.6.6 |
      - | titleIcon | String | | 标题图标，图标路径如"./img/t.png"，仅支持本地文件路径，相对路径，相对于当前页面的host位置，固定宽高为逻辑像素值"34px"。要求图片的宽高相同。注意：设置标题图标后标题将居左显示。 | 2.6.6 |
        支持本地图片路径，网络图片路径，base64格式图片（全局文件-pages.json 页面路由章节-导航栏开发指南-看示例)
      - | titleIconRadius | String | 无圆角 | 标题图标圆角，取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示10像素半径圆角。 | 2.6.6 |
      - 其他——————————————————————————————————————————————————————————————————————
      - "padding-right": "6px"（全局文件-pages.json 页面路由章节-导航栏开发指南-看示例)
      - | tags | Array | | 原生 View 增强，详见：5+ View 控件 |
        未读
        
        通过在titleNView里配置tags，可以实现导航栏绘制图片的效果："tags" : [ { "tag" : "img", "src" : "/static/nav.png", "position" : { "left" : "auto", "top" : "auto", "width" : "110px", "height" : "26px" } } ] （全局文件-pages.json 页面路由章节-导航栏开发指南）
        
        通过配置 tags 除了可以绘制图片，还可以绘制更多丰富的内容，如：richtext（富文本）、font（文本）、input（输入框）、rect（矩形区域）（全局文件-pages.json 页面路由章节-导航栏开发指南）
      - | splitLine | Boolean | false | 标题栏的底部分割线(SplitLineStyles)，设置此属性则在标题栏控件的底部显示分割线，可配置颜色值及高度。设置此属性值为undefined或null则隐藏分割线。默认不显示底部分割线 | 2.6.6 |
        | color | String | #CCCCCC | 底部分割线颜色，可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色分割线； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明 |
        
        | height | String | "1px" | 可取值：像素值（逻辑像素），支持小数点，如"1px"表示1像素高；百分比，如"1%"，相对于标题栏控件的高度。 |
    - app-plus中的配置项—————————————————————————————————————————————————————————————
    - | subNVues | Array | | 原生子窗体，详见:原生子窗体 | App 1.9.10+ |
      - 它是一个 nvue 页面，使用 weex 引擎渲染，提供了比 cover-view、plus.nativeObj.view 更强大的原生排版能力，方便自定义原生导航或覆盖原生地图、视频等。
      - subNVues 开发指南
        未读
      - subNVue 也可以在 nvue 页面中使用。但目前在纯nvue下（render为native）还不支持。
        注释：这里有官方文档有问题，纯nvue即render:native应该是manifest.json中的renderer:native
      - | id | String | subNVue 原生子窗体的标识 |
        subNVues 的 id 是全局唯一的，不能重复
        
        可以通过 uni.getSubNVueById('id') 获取 subNVues 的实例
      - | path | String | 配置 nvue 文件路径，nvue 文件需放置到使用 subNvue 的页面文件目录下 |
      - | type | String | 原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏 |
      - | style | Object | subNVue 原生子窗体的样式，配置项参考下方 subNVuesStyle |
        | position | String | absolute | 原生子窗体的排版位置，排版位置决定原生子窗体在父窗口中的定位方式。可取值："static"，原生子窗体在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；"absolute"，原生子窗体在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；"dock"，原生子窗体在页面中停靠，停靠的位置由dock属性值决定。默认值为"absolute"。 |
        
        | dock | String | bottom | 原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效，可取值："top"，原生子窗体停靠则页面顶部；"bottom"，原生子窗体停靠在页面底部；"right"，原生子窗体停靠在页面右侧；"left"，原生子窗体停靠在页面左侧。默认值为"bottom"。 |
        
        | mask | HexColor | rgba(0,0,0,0.5) | 原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效，可取值： rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明； |
        
        | width | String | 100% | 原生子窗体的宽度,支持百分比、像素值，默认为100%。未设置width属性值时，可同时设置left和right属性值改变窗口的默认宽度。
        
        | height | String | 100% | 原生子窗体的高度,支持百分比、像素值，默认为100%。当未设置height属性值时，优先通过top和bottom属性值来计算原生子窗体的高度。
        
        | top | String | 0px | 原生子窗体垂直向下的偏移量，支持百分比、像素值，默认值为0px。未设置top属性值时，优先通过bottom和height属性值来计算原生子窗体的top位置。
        
        | bottom | String | | 原生子窗体垂直向上偏移量,支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。当同时设置了top和height值时，忽略此属性值；当未设置height值时，可通过top和bottom属性值来确定原生子窗体的高度。 |
        
        | left | String | 0px | 原生子窗体水平向左的偏移量，支持百分比、像素值，默认值为0px。未设置left属性值时，优先通过right和width属性值来计算原生子窗体的left位置。
        
        | right | String | | 原生子窗体水平向右的偏移量，支持百分比、像素值，默认无值（根据left和width属性值来自动计算）。当设置了left和width值时，忽略此属性值；当未设置width值时，可通过left和bottom属性值来确定原生子窗体的宽度。 |
        
        | margin | String | | 原生子窗体的边距，用于定位原生子窗体的位置，支持auto，auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。
        
        | zindex | Number | | 原生子窗体的窗口的堆叠顺序值，拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。
        
        | background | String | #FFFFFF | 窗口的背景颜色,Android平台4.0以上系统才支持“transparent”背景透明样式。比如subnvue为圆角时需要设置为transparent才能看到正确的效果
    - app-plus中的配置项—————————————————————————————————————————————————————————————
    - | bounce | String | | 页面回弹效果，设置为 "none" 时关闭效果。 | App-vue（nvue Android无页面级bounce效果，仅list、recycle-list、waterfall等滚动组件有bounce效果） |
      - 注释：recycle-list app端nvue专用组件。是一个新的列表容器，具有回收和复用的能力，可以大幅优化内存占用和渲染性能。
      - 注释：waterfall app端nvue专用组件。提供瀑布流布局的核心组件。视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局还可以不断加载数据块并附加至当前尾部。
      - 注释：list app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件的性能高于使用view或scroll-view的滚动。
      - 注释：小程序在pages.style.disableScroll中配置
    - | popGesture | String | close | 侧滑返回功能，可选值："close"（启用侧滑返回）、"none"（禁用侧滑返回） | App-iOS |
      - 疑问：和disableSwipeBack似乎相同
    - | softinputNavBar | String | auto | iOS软键盘上完成工具栏的显示模式，设置为 "none" 时关闭工具栏。 | App-iOS |
    - | softinputMode | String | adjustPan | 软键盘弹出模式，支持 adjustResize、adjustPan 两种模式 | App |
      - 注释：adjustResize模式：当软键盘弹出时，webview窗体高度会挤压，即页面可能会变形。屏幕高度=webview窗体高度+软键盘高度。
      - 注释：adjustPan模式：软键盘弹出时，webview窗体高度不变，但窗体会上推，以保证输入框不被软键盘盖住。
    - | pullToRefresh | Object | | 下拉刷新 | App |
      - 在 App 平台下可以自定义部分下拉刷新的配置 page->style->app-plus->pullToRefresh
        
        注释：pages.json - app-plus - pullToRefresh 应该也能使用这个配置
      - | support | Boolean | false | 是否开启窗口的下拉刷新功能
        enablePullDownRefresh 与 pullToRefresh->support 同时设置时，后者优先级较高。
        
        开启原生下拉刷新时，页面里不应该使用全屏高的scroll-view，向下拖动内容时，会优先触发下拉刷新而不是scroll-view滚动
        
        如果想在app端实现更多复杂的下拉刷新，比如美团、京东App那种拉下一个特殊图形，可以使用nvue的<refresh>组件。HBuilderX 2.0.3+起，新建项目选择新闻模板可以体验
      - | color | String | #2BD009 | 颜色值格式为"#RRGGBB"，仅"circle"样式下拉刷新支持此属性。
      - | style | String | Android 平台为 circle；iOS 平台为 default。 | 可取值："default"——经典下拉刷新样式（下拉拖动时页面内容跟随）；"circle"——圆圈样式下拉刷新控件样式（下拉拖动时仅刷新控件跟随）。 |
      - | height | String | | 窗口的下拉刷新控件进入刷新状态的拉拽高度。支持百分比，如"10%"；像素值，如"50px"，不支持rpx。
      - | range | String | | 窗口可下拉拖拽的范围。支持百分比，如"10%"；像素值，如"50px"，不支持rpx。
      - | offset | String | 0px | 下拉刷新控件的起始位置。仅对"circle"样式下拉刷新控件有效，用于定义刷新控件下拉时的起始位置。支持百分比，如"10%"；像素值，如"50px"，不支持rpx。如使用了非原生title且需要原生下拉刷新，一般都使用circle方式并将offset调至自定义title的高度 |
      - | contentdown | Object | | 目前支持一个属性：caption——在下拉可刷新状态时下拉刷新控件上显示的标题内容。仅对"default"样式下拉刷新控件有效。
      - | contentover | Object | | 目前支持一个属性：caption——在释放可刷新状态时下拉刷新控件上显示的标题内容。仅对"default"样式下拉刷新控件有效。
      - | contentrefresh | Object | | 目前支持一个属性：caption——在正在刷新状态时下拉刷新控件上显示的标题内容。仅对"default"样式下拉刷新控件有效。
    - | scrollIndicator | String | | 滚动条显示策略，设置为 "none" 时不显示滚动条。 | App |
    - | animationType | String | pop-in | 窗口显示的动画效果，详见：窗口动画。 | App |
    - | animationDuration | Number | 300 | 窗口显示动画的持续时间，单位为 ms。 | App |
  - | h5 | Object | | 设置编译到 H5 平台的特定样式，配置项参考下方 H5 | H5 |
    - 如果 h5 节点没有配置，默认会使用 app-plus 下的配置
    - | titleNView | Object | 导航栏 |
      - | backgroundColor | String | #F7F7F7 | 背景颜色，颜色值格式为"#RRGGBB"。 |
      - | buttons | Array | | 自定义按钮，参考 buttons |
        | type | String | none | 按钮样式，可取值见：buttons 样式 |
        
        注释：官方文档会跳转到app-plus.titleNView.buttons.type，但实际在h5下面有独立的type说明
        
        使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性。
        
        | forward | 前进按钮 |
        
        | back | 后退按钮 |
        
        | share | 分享按钮 |
        
        | favorite | 收藏按钮 |
        
        | home | 主页按钮 |
        
        | menu | 菜单按钮 |
        
        | close | 关闭按钮 |
        
        | none | 无样式，需通过 text 属性设置按钮上显示的内容、通过 fontSrc 属性设置使用的字体库。 |
        
        | color | String | 默认与标题文字颜色一致 | 按钮上文字颜色 |
        
        | background | String | 默认值为灰色半透明 | 按钮的背景颜色，仅在标题栏type=transparent时生效
        
        | badgeText | String | | 按钮上显示的角标文本，最多显示3个字符，超过则显示为...
        
        | colorPressed（暂不支持） | String | 默认值为 color 属性值自动调整透明度为 0.3 | 按下状态按钮文字颜色
        注释：app-plus中的是支持colorPressed，h5不支持？
        
        | float | String | right | 按钮在标题栏上的显示位置，可取值"left"、"right" |
        
        | fontWeight | String | normal | 按钮上文字的粗细。可取值"normal"-标准字体、"bold"-加粗字体。 |
        
        | fontSize | String | | 按钮上文字大小 |
        
        | fontSrc | String | | 按钮上文字使用的字体文件路径。 |
        
        | select | String | false | 是否显示选择指示图标（向下箭头） |
        
        | text | String | | 按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）。
        
        | width | String | 44px | 按钮的宽度，可取值： "*px" - 逻辑像素值，如"10px"表示10逻辑像素值，不支持rpx，按钮的内容居中显示； "auto" - 自定计算宽度，根据内容自动调整按钮宽度 |
      - | titleColor | String | #000000 | 标题文字颜色 |
      - | titleText | String | | 标题文字内容 |
      - | titleSize | String | | 标题文字字体大小 |
      - | type | String | default | 导航栏样式。"default"-默认样式；"transparent"-透明渐变。 |
      - | searchInput | Object | | 导航栏上的搜索框样式，详见：searchInput |
        | autoFocus | Boolean | false | 是否自动获取焦点 |
        
        | align | String | center | 非输入状态下文本的对齐方式。可取值： "left" - 居左对齐； "right" - 居右对齐； "center" - 居中对齐。 |
        
        | backgroundColor | String | rgba(255,255,255,0.5) | 背景颜色 |
        
        | borderRadius | String | 0px | 输入框的圆角半径，取值格式为"XXpx"，其中XX为像素值（逻辑像素），不支持rpx。 |
        
        | placeholder | String | | 提示文本 |
        
        | placeholderColor | String | #CCCCCC | 提示文本颜色 |
        
        | disabled | Boolean | false | 是否可输入 |
    - | pullToRefresh | Object | 下拉刷新 |
      - h5 平台下拉刷新动画，只有 circle 类型。
      - | color | String | #2BD009 | 颜色值格式为"#RRGGBB" |
      - | offset | String | 0px | 下拉刷新控件的起始位置。支持百分比，如"10%"；像素值，如"50px"，不支持rpx。 |
  - | mp-alipay | Object | | 设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY | 支付宝小程序 |
    - 部分配置可能会只在真机运行的时候生效，支付宝未来应该会改善
    - | allowsBounceVertical | String | YES | 是否允许向下拉拽。支持 YES / NO |
      - 疑问？
    - | titleImage | String | | 导航栏图片地址（替换当前文字标题），必须使用https的图片链接地址 |
    - | transparentTitle | String | none | 导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 |
    - | titlePenetrate | String | NO | 导航栏点击穿透 |
    - | showTitleLoading | String | NO | 是否进入时显示导航栏的 loading。支持 YES / NO |
    - | backgroundImageUrl | String | | 下拉露出显示的背景图链接 |
      - 支持网络地址和本地地址，尽量使用绝对地址
    - | backgroundImageColor | HexColor | | 下拉露出显示的背景图底色 |
    - | gestureBack | String | NO | iOS 用，是否支持手势返回。支持 YES / NO |
    - | enableScrollBar | String | YES | Android 用，是否显示 WebView 滚动条。支持 YES / NO |
  - | mp-weixin | Object | | 设置编译到 mp-weixin 平台的特定样式，配置项参考下方 MP-WEIXIN | 微信小程序 |
    - | homeButton | Boolean | false | 在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键 |
    - | backgroundColorTop | HexColor | #ffffff | 顶部窗口的背景色，仅 iOS 支持 |
    - | backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色，仅 iOS 支持 |
    - | restartStrategy | String | homePage | 重新启动策略配置。支持 homePage / homePageAndLatestPage |
      - 注释：homePage 用户关闭小程序并再次打开时，小程序会从首页开始加载，而不是从之前关闭时的页面开始。
      - 注释：homePageAndLatestPage 小程序不仅会重新加载首页，还会尝试恢复用户之前关闭时的页面状态。
    - | initialRenderingCache | String | | 页面初始渲染缓存配置。支持 static / dynamic |
      - 注释：static 当选择 static 策略时，小程序的页面渲染结果会被缓存起来，以便在用户再次访问时可以直接使用缓存的结果，而不需要重新渲染。这可以提高页面加载速度，减少渲染时间。
      - 注释：dynamic 动态页面每次加载都需要重新获取数据和渲染
    - | visualEffectInBackground | String | none | 切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none |
    - | handleWebviewPreload | String | static | 控制预加载下个页面的时机。支持 static / manual / auto |
      - 注释：在安卓上，小程序渲染层所有页面的 WebView 共享同一个线程。很多情况下，小程序的初始数据只包括了页面的大致框架，并不是完整的内容。页面主体部分需要依靠 setData 进行更新。因此，预加载下一个页面可能会阻塞当前页面的渲染，造成 setData 和用户交互出现延迟，影响用户看到页面完整内容的时机
      - 注释：static 在当前页面 onReady 触发 200ms 后触发预加载。
      - 注释：manual 由开发者通过调用 wx.preloadWebview 触发。开发者可以在页面主要内容的 setData 结束后手动触发。
      - 注释：auto 渲染线程空闲时进行预加载。由基础库根据一段时间内 requestAnimationFrame 的触发频率算法判断。
        注释：requestAnimationFrame 重绘
  - | mp-baidu | Object | | 设置编译到 mp-baidu 平台的特定样式，配置项参考下方 MP-BAIDU | 百度小程序 |
    - | textSizeAdjust | String | auto | 小程序页面是否禁止响应字体大小的设。支持 auto 默认响应 / none 不响应 |
  - | mp-toutiao | Object | | 设置编译到 mp-toutiao 平台的特定样式 | 抖音小程序 |
  - | mp-lark | Object | | 设置编译到 mp-lark 平台的特定样式 | 飞书小程序 |
  - | mp-qq | Object | | 设置编译到 mp-qq 平台的特定样式 | QQ小程序 |
  - | mp-kuaishou | Object | | 设置编译到 mp-kuaishou 平台的特定样式 | 快手小程序 |
  - | mp-jd | Object | | 设置编译到 mp-jd 平台的特定样式 | 京东小程序 |
- | pages | Object Array | 是 | 设置页面路径及窗口表现 |
  - | path | String | | 配置页面路径 |
  - | needLogin | Boolean | false | 是否需要登录才可访问 |
  - | style | Object | | 配置页面窗口表现，配置项参考下方 pageStyle |
    - 用于设置每个页面的状态栏、导航条、标题、窗口背景色等，页面中配置项会覆盖 globalStyle 中相同的配置项
    - 导航——————————————————————————————————————————————————————————————————————
    - | navigationBarBackgroundColor | HexColor | #F8F8F8 | 导航栏背景颜色（同状态栏背景色） | APP与H5为#F8F8F8，小程序平台请参考相应小程序文档 |
    - | navigationBarTextStyle | String | black | 导航栏标题颜色及状态栏前景颜色，仅支持 black/white |
    - | navigationBarTitleText | String | | 导航栏标题文字内容 |
    - | navigationBarShadow | Object | | 导航栏阴影，配置参考下方导航栏阴影 |
      - 注释：globalStyle中没有这项
      - | colorType | String | 阴影的颜色，支持：grey、blue、green、orange、red、yellow |
      - 微信/百度/头条需要配置: "disableScroll": true
      - 支付宝 "mp-alipay": { "allowsBounceVertical": "NO" }
    - | navigationStyle | String | default | 导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意 | 微信小程序 7.0+、百度小程序、H5、App（2.0.3+） |
    - | titleImage | String | | 导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址 | 支付宝小程序、H5、App |
    - | transparentTitle | String | none | 导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 | 支付宝小程序、H5、APP |
    - | titlePenetrate | String | NO | 导航栏点击穿透 | 支付宝小程序、H5 |
    - 滚动和背景色——————————————————————————————————————————————————————————————————————
    - | disableScroll | Boolean | false | 设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效 | 微信小程序（iOS）、百度小程序（iOS） |
      - 注释：app在app-plus.bounce配置项中配置
    - | backgroundColor | HexColor | #ffffff | 窗口的背景色 | 微信小程序、百度小程序、抖音小程序、飞书小程序、京东小程序 |
    - | backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark/light |
      - 注释：在globalStyle中该配置只支持小程序，但这里却没有限制
    - | enablePullDownRefresh | Boolean | false | 是否开启下拉刷新，详见页面生命周期。 |
      - 注释：在globalStyle和pages中都可以配置
    - | onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期 |
    - | backgroundColorTop | HexColor | #ffffff | 顶部窗口的背景色（bounce回弹区域） | 仅 iOS 平台 |
      - 注释：在globalStyle和pages中都可以配置
    - | backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色（bounce回弹区域） | 仅 iOS 平台 |
      - 注释：在globalStyle和pages中都可以配置
    - 其他——————————————————————————————————————————————————————————————————————
    - | disableSwipeBack | Boolean | false | 是否禁用滑动返回 | App-iOS（3.4.0+） |
      - 注释：滑动返回，向左右滑动触发返回动作
    - | usingComponents | Object | | 引用小程序组件，参考小程序组件 | App、微信小程序、支付宝小程序、百度小程序、京东小程序 |
    - | leftWindow | Boolean | true | 当存在 leftWindow时，当前页面是否显示 leftWindow | H5 |
    - | topWindow | Boolean | true | 当存在 topWindow 时，当前页面是否显示 topWindow | H5 |
    - | rightWindow | Boolean | true | 当存在 rightWindow时，当前页面是否显示 rightWindow | H5 |
    - | maxWidth | Number | | 单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选) | H5（2.9.9+） |
    - 其他平台——————————————————————————————————————————————————————————————————————
    - | app-plus | Object | | 设置编译到 App 平台的特定样式，配置项参考下方 app-plus | App |
    - | h5 | Object | | 设置编译到 H5 平台的特定样式，配置项参考下方 H5 | H5 |
    - | mp-alipay | Object | | 设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY | 支付宝小程序 |
    - | mp-weixin | Object | 设置编译到 mp-weixin 平台的特定样式 | 微信小程序 |
    - | mp-baidu | Object | 设置编译到 mp-baidu 平台的特定样式 | 百度小程序 |
    - | mp-toutiao | Object | 设置编译到 mp-toutiao 平台的特定样式 | 抖音小程序 |
    - | mp-lark | Object | 设置编译到 mp-lark 平台的特定样式 | 飞书小程序 |
    - | mp-qq | Object | 设置编译到 mp-qq 平台的特定样式 | QQ小程序 |
    - | mp-kuaishou | Object | 设置编译到 mp-kuaishou 平台的特定样式 | 快手小程序 |
    - | mp-jd | Object | | 设置编译到 mp-jd 平台的特定样式 | 京东小程序 |
- | easycom | Object | 否 | 组件自动引入规则 | 2.5.5+ |
  - 注释：见后文，不在这里展开
- | tabBar | Object | 否 | 设置底部 tab 的表现 |
  - 在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab
  - | color | HexColor | 是 | tab 上的文字默认颜色 |
  - | selectedColor | HexColor | 是 | tab 上的文字选中时的颜色
  - | backgroundColor | HexColor | 是 | tab 的背景色
  - | borderStyle | String | 否 | tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值 | App 2.3.4+ 、H5 3.0.0+
  - | blurEffect | String | 否 | iOS 高斯模糊效果，可选值 dark/extralight/light/none | App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）
    - (教程-App使用高斯模糊效果)
      - HBuilderX 从 2.4.4 版本开始，uni-app iOS 端 TabBar 支持高斯模糊效果（毛玻璃效果）
      - HBuilderX 从 3.4.10 版本开始，uni-app Android 端 TabBar 支持高斯模糊效果（毛玻璃效果）
      - 实现原理很简单，启用高斯模糊效果后，页面会变高（增加 tabBar 的高度），页面布局会延伸到 tabBar 下面，框架会在 tabBar 上自动添加一个高斯模糊效果的视图，然后透过这个视图看下面的内容就会看到模糊的效果。
      - vue 页面适配
        添加占位视图：由于页面高度变高了，页面会被 tabBar 挡住，所以需要在页面最下面添加一个占位视图，高度设置为 tabBar 的高度，这样页面的元素就不会被 tabBar 挡住了（启用高斯模糊效果，框架会自动处理滚动条底部的偏移不会被tabBar遮挡）；
        
        绝对定位注意事项：同样因为页面高度变化了，绝对定位的视图需要考虑 tabBar 的遮挡问题，例如想要一个 view 固定在页面最底部，需要设置 bottom 值为 tabBar 的高度即可；
      - 因为 nvue 页面为纯原生布局，当启用毛玻璃效果后，原生端框架可以自动调整滚动视图的 contentInset bottom 值，相当于在页面最底部，偏移出 tabbar 的高度，这样页面原有的元素就不会被遮挡，滚动条的位置也会自动处理。注：偏移出的位置显示的是滚动视图的背影颜色；
        滚动视图添加 adjustBottom="true"：只有添加了 adjustBottom="true" 框架才会自动调整滚动视图的 contentInset bottom 值，这里有一点需要注意，如果你的页面整体是滚动的，那么需要你的页面根节点为滚动视图然后添加 adjustBottom="true"，如果页面部分是可以滚动的，那就在页面最下面的滚动视图添加 adjustBottom="true" 属性；<scroll-view class="content" scroll-y="true" adjustBottom="true">
        
        android暂时不支持 adjustBottom
        
        绝对定位注意事项：跟vue页面一样，绝对定位的视图需要考虑 tabBar 的遮挡问题，例如想要一个 view 固定在页面最底部，需要设置 bottom 值为 tabBar 的高度即可；
      - 启用高斯模糊效果后，不建议设置 tabBar 的 backgroundColor，如果非要设置的话需要使用 rgba 设置透明度，否则看不到模糊效果
      - 启用高斯模糊效果后不要动态设置 tabBar 的隐藏，不然会影响页面布局；
      - 首先需要在 manifest.json 的 app-plus节点下添加 safearea 的配置，bottom 的 offset 设置为 none，这样平台会自动处理 iPhoneX 等全面屏机型的高度适配，不然在全面屏机型上可能会出现页面被遮挡的问题
      - "dark" - 暗风格模糊，对应iOS原生UIBlurEffectStyleDark效果；
      - "extralight" - 高亮风格模糊，对应iOS原生UIBlurEffectStyleExtraLight效果；
      - "light" - 亮风格模糊，对应iOS原生UIBlurEffectStyleLight效果；
      - "none" - 无模糊效果。
  - | list | Array | 是 | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab |
    - | pagePath | String | 是 | 页面路径，必须在 pages 中先定义 |
    - | text | String | 是 | tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 |
    - | iconPath | String | 否 | 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标 |
    - | selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效 |
    - | visible | Boolean | 否 | 该项是否显示，默认显示 | App (3.2.10+)、H5 (3.2.10+)
    - | iconfont | Object | 否 | 字体图标，优先级高于 iconPath | App（3.4.4+）、H5 (3.5.3+)
      - | text | String | 字库 Unicode 码 |
      - | selectedText | String | 选中后字库 Unicode 码 |
      - | fontSize | String | 字体图标字号(px) |
      - | color | String | 字体图标颜色 |
      - | selectedColor | String | 字体图标选中颜色 |
  - | midButton | Object | 否 | 中间按钮仅在 list 项为偶数时有效 | App 2.3.4+、H5 3.0.0+
    - midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap
    - | width | String | 否 | 80px | 中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度 |
    - | height | String | 否 | 50px | 中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果 |
    - | text | String | 否 | | 中间按钮的文字 |
    - | iconPath | String | 否 | | 中间按钮的图片路径 |
    - | iconWidth | String | 否 | 24px | 图片宽度（高度等比例缩放） |
    - | backgroundImage | String | 否 | | 中间按钮的背景图片路径 |
    - | iconfont | Object | 否 | | 字体图标，优先级高于 iconPath | App（3.4.4+）
      - 注释：和list.iconfont相同
  - | position | String | 否 | 可选值 bottom、top | top 值仅微信小程序支持
  - | fontSize | String | 否 | 文字默认大小 | App 2.3.4+、H5 3.0.0+
  - | iconWidth | String | 否 | 图标默认宽度（高度等比例缩放） | App 2.3.4+、H5 3.0.0+
  - | spacing | String | 否 | 图标和文字的间距 | App 2.3.4+、H5 3.0.0+
  - | height | String | 否 | tabBar 默认高度 | App 2.3.4+、H5 3.0.0+
  - | iconfontSrc | String | 否 | list设置 iconfont 属性时，需要指定字体文件路径 | App 2.3.4+、H5 3.0.0+
  - | backgroundImage | String | 否 | 设置背景图片,优先级高于 backgroundColor | App
  - | backgroundRepeat | String | 否 | 设置标题栏的背景图平铺方式，可取值："repeat" - 背景图片在垂直方向和水平方向平铺；"repeat-x" - 背景图片在水平方向平铺，垂直方向拉伸；"repeat-y" - 背景图片在垂直方向平铺，水平方向拉伸；"no-repeat" - 背景图片在垂直方向和水平方向都拉伸。默认使用 "no-repeat" | App
  - | redDotColor | String | 否 | tabbar上红点颜色 | App
- | condition | Object | 否 | 启动模式配置 |
  - 启动模式配置，仅开发期间生效，用于模拟直达页面的场景
- | subPackages | Object Array | 否 | 分包加载配置 | H5 不支持 |
- | preloadRule | Object | 否 | 分包预下载规则 | 微信小程序 |
- | workers | String | 否 | Worker 代码放置的目录 | 微信小程序 |
  - 未读
- | leftWindow | Object | 否 | 大屏左侧窗口 | H5 |
  - 需要扩展
- | topWindow | Object | 否 | 大屏顶部窗口 | H5 |
- | rightWindow | Object | 否 | 大屏右侧窗口 | H5 |
- | uniIdRouter | Object | 否 | 自动跳转相关配置，新增于HBuilderX 3.5.0 |
  - 注释：uniCloud的功能，配置登录页和需要检查登录状态的页面，能够实现登录状态的自动检查
  - 未读，不准备开始
- | entryPagePath | String | 否 | 默认启动首页，新增于HBuilderX 3.7.0 | 微信小程序、支付宝小程序 |
给tabbar加个凸起（页面章节获取该对象的方法见：）
- var centerButtonOnTab = new plus.nativeObj.View("",{top:'500px',left:'160px',height:'50px',width:'50px',backgroundColor:'#FF0000'}); plus.webview.currentWebview().append(centerButtonOnTab);
- 注意tabbar的获取，不是走getCurrentPages，而是用plus.webview.currentWebview()
  - 注释：h5+页面中，js和webview运行在统一的窗口中，plus.webview.currentWebview能够直接拿到对于这个窗口的引用
  - 注释：在uniapp中，vue页面，js和视图webview需要通过通信来交换数据，无法通过plus.webview.currentWebview直接获取webview对象，要使用上文中提到的this.$mp.page.$getAppWebview或其比较冗余的写法。
  - 注释：在uniapp中，plus.webview.currentWebview 拿到的是原生视图层
  - 注释：在app中，页面是渲染在一个原生视图层内的webview中的，nvue页面直接渲染在原生视图层。所以添加原生视图层plus.nativeObj.View()需要使用plus.webview.currentWebview().append(
- 如果app端想要高性能的tabbar凸起，建议使用nvue在前端自绘tabbar。
操作titleNView，给titleNView右上角加个红点（页面章节获取该对象的方法见：）
- var nTitle = currentWebview.getTitleNView(); nTitle.drawBitmap("static/reddot.png",{}, {top:'3px',left:'340px',width:'4px',height:'4px'});
- 1.5版的HBuilderX已经支持titleNView的button直接设红点了
- nview的api非常多，具体参考：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
  - 未读
- 5+的plus.nativeObj.view，本质是一种类canvas的画布，可以自由的draw内容上去，更新管理也需要自己维护操作。
- 包括想在原生控件比如视频、地图上加点什么东西，因为HTML的组件是盖不住原生组件的，都可以使用nview来做。
- App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx（教程-css语法章节）
nview是一个基于canvas理念的绘制引擎，在一块画布上自行绘制、覆盖、擦除。（全局文件-pages.json 页面路由章节-导航栏开发指南）
- nview可以画出任何界面、线条、矩形、文字、图片、包括原生的input输入框。
- 其实我们所看到的各种界面对象控件，在计算机底层都是绘图引擎基于draw字、draw图、draw线条来做的。
- nview没有dom概念，不支持内部滚动。
- 其实titleNView，包括原生tabbar、cover-view，他们的底层实现都是基于nview的
- 开发者制作的示例，如何给原生导航栏顶部画一个原生input
nvue 页面关闭原生导航栏（标题栏）时，想要模拟状态栏，可以参考文章（页面章节）
- 仍然强烈建议在 nvue 页面使用原生导航栏。nvue 的渲染速度再快，也没有原生导航栏快
- 原生排版引擎解析json绘制原生导航栏耗时很少，而解析 nvue 的 js 绘制整个页面的耗时要大的多，尤其在新页面进入动画期间，对于复杂页面，没有原生导航栏会在动画期间产生整个屏幕的白屏或闪屏。
easycom
- 安装在项目根目录的components目录下，并符合components/组件名称/组件名称.vue
- 安装在uni_modules下，路径为uni_modules/插件ID/components/组件名称/组件名称.vue
- 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
- easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。因为nvue页面引入的组件也是.vue组件。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
  - nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。
  - 疑问：这应该是easycom的特性
  - 注释：uniapp中vue页面可以引用nvue组件，nvue页面同样也能引用vue组件，他们根据自己的名称采用对应的原生渲染和webview渲染。
- HBuilderX 3.96 版本以下uni-app x项目，当页面文件名与easycom的组件名一样时，会渲染异常，可以通过调整页面文件名规避该Bug
- easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置
  - | autoscan | Boolean | true | 是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件 |
  - | custom | Object | - | 以正则方式自定义组件匹配规则。如果autoscan不能满足需求，可以使用custom自定义匹配规则 |

"easycom": {

  "autoscan": true,

  "custom": {

    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件

    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件

  }

}

manifest.json 应用配置

可以在manifest中切换使用vue2还是vue3（uni-app x中只支持vue3）（教程-页面章节）
在manifest.json中，你可以配置Vue的版本（Vue2/Vue3），以及发行H5平台路由模式（教程-编译器配置章节）
vue3 在 h5 平台发行时，为了优化包体积大小，会默认启动摇树，仅打包明确使用的 api，如果要关闭摇树，可以在 manifest.json 中配置（教程-vue2 升 3 指南章节）

"h5": {

    "optimization": {

        "treeShaking": {

            "enable": false

        }

    }

}

#————————————————————————————————————————————————————————

组件

组件概述

uni-app的easycom机制，将组件引用进一步优化，开发者只管使用，无需考虑导入和注册，更为高效(教程-互相引用章节)

<template>

	<view>

		<!-- 1.使用组件 -->

		<uni-rate text="1"></uni-rate>

	</view>

</template>

<script>

</script>

通过uni-app的easycom：将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。(教程-vue语法-vue2-组件章节)

│─components            	符合vue组件规范的uni-app组件目录

│  └─componentA         	符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件

│  		└─componentA.vue    可复用的componentA组件

│  └─component-a.vue      可复用的component-a组件

view

(教程-App使用高斯模糊效果)
- HBuilderX 从 2.4.8+ 版本开始，iOS 端 nvue view组件支持高斯模糊效果（毛玻璃效果）
- Android平台暂不支持
- 在 view 组件中添加 blurEffect 属性启用高斯模糊效果，取值同 TabBar
  - "dark" - 暗风格模糊，对应iOS原生UIBlurEffectStyleDark效果；
  - "extralight" - 高亮风格模糊，对应iOS原生UIBlurEffectStyleExtraLight效果；
  - "light" - 亮风格模糊，对应iOS原生UIBlurEffectStyleLight效果；
  - "none" - 无模糊效果。
- 启用高斯模糊效果后，不建议设置 background-color，如果非要设置的话需要使用 rgba 设置透明度，否则看不到模糊效果；
- 启用高斯模糊效果后相当于 view 组件对应的视图变成了毛玻璃，透过 view 看下面的内容会有模糊效果， view 上添加的视图不受影响；

cover-view

覆盖在原生组件上的文本视图

navigation-bar

页面导航条配置节点，用于指定导航栏的一些属性。只能是 page-meta 组件内的第一个节点，需要配合它一同使用。

editor

(教程-vue语法-vue2-基础章节 )跨端的富文本处理方案详见：https://ask.dcloud.net.cn/article/35772
- 至于富文本编辑，即在输入框里图文混排内容，解决方案如下：
  - 在h5、app-vue、微信小程序，支持editor组件
  - 在非微信的其他小程序中，其官方没有提供解决方案，目前只能使用web-view组件套一个远程网页来满足这方面的需求。
  - 还有一种方案，不再编辑区直接预览效果，而是采用markdown编辑器方案，输入区输入markdown语法，预览区提供预览。

swiper

一般用于左右滑动或上下滑动，比如banner轮播图。

waterfall

app端nvue专用组件
瀑布流布局的核心组件。随着页面滚动条向下滚动，这种布局还可以不断加载数据块并附加至当前尾部。

picker

vue3 微信小程序真机调试，修改 picker 下面的输入框会影响 picker 内容（教程-vue2 升 3 指南章节）
- 注释：通过在 manifest.json 的 mp-weixin 中配置 minified 为 true 来解决

scroll-view

可滚动视图区域。用于区域滚动。
- 注释：可水平可垂直滚动
在webview渲染的页面中，区域滚动的性能不及页面滚动。
注释：scroll-view 如何通过设置 scroll-top 来滚动回顶部，通过scroll事件事实更新scrollTop，在需要时把它设置为0(教程-vue语法-vue2-API 章节)

<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>

	export default {

		data() {

			return {

				scrollTop: 0,

			}

		},

		methods: {

			scroll: function(e) {

				// 如果使用此方法，请自行增加防抖处理

				this.scrollTop = e.detail.scrollTop

			},

			goTop: function(e) {

				this.scrollTop = 0

			}

		}

	}

recycle-list

app端nvue专用组件
- vue3 nvue 暂不支持 recycle-list 组件（教程-vue2 升 3 指南章节）
- 具有回收和复用的能力，可以大幅优化内存占用和渲染性能。它的性能比list组件更高，但写法受限制。它除了会释放不可见区域的渲染资源，在非渲染的数据结构上也有更多优化。

rich-text

(教程-vue语法-vue2-基础章节 )跨端的富文本处理方案详见：https://ask.dcloud.net.cn/article/35772
- 预览
  - rich-text是uni-app的内置组件，提供了高性能的富文本渲染模式。
    - rich-text的优势是全端支持、高性能。有个缺陷是只能整体设点击事情，无法对富文本中的图片、超链接单独设点击事件。
      - 如果是图片，可以把内容拆成多个rich-text解决。
      - h5和app-nvue无此限制，支持链接等单独点击。
    - rich-text不支持内嵌视频也可以通过拆分多个rich-text，中间插入video来实现。
  - v-html
    - 注释：教程其他地方说：App端和H5端支持 v-html ，微信小程序会被转为 rich-text，其他端不支持
  - 第3方插件

live-pusher

虽然uni-app的nvue页面已经提供了直播组件。但uni-app的vue页面还没有封装（页面章节获取该对象的方法见：）
- 在app里的vue页面使用直播推流var pusher = plus.video.createLivePusher("", { }); currentWebview.append(pusher);
- 注释：currentWebview是通过page.$getAppWebview()获取的页面webview
- 注释：在新版本中vue页面也提供了Livepusher组件，详见

Barcode

显示扫码控件var barcode = plus.barcode.create('barcode', [plus.barcode.QR], { }); currentWebview.append(barcode);（页面章节获取该对象的方法见：）
- 注释：currentWebview是通过page.$getAppWebview()获取的页面webview
- 使用app-nvue的话，有自带的barcode组件
  - 注释：app-nvue平台是指使用nvue页面（native vue的缩写）进行原生渲染的App端。nvue页面是基于weex改进的原生渲染引擎
- 注释：其他场景、其他平台，请使用全屏扫码API：uni.scanCode，已经兼容了 app-vue，不再需要使用上述的 plus.barcode 方法

list

app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件的性能高于使用view或scroll-view的滚动。原因在于list在不可见部分的渲染资源回收有特殊的优化处理。

map

uni-app的原则是vue语法+小程序api。但小程序的api不如plus.map丰富，地图的重度开发者仍然需要plus的map。（页面章节获取该对象的方法见：）
- uni-app中单独优化了这个地图的获取，通过$getAppMap可直接得到map对象
- 注释：$getAppMap是 mapContext 对象的方法，用于获取原生地图对象 plus.maps.Map。
- 注释：uni.createMapContext(mapId,this)用来创建 mapContext 对象，mapContext 对象通过 mapId 跟一个 <map> 组件绑定，通过它可以操作对应的 <map> 组件

refresh

app端nvue专用组件
为容器提供下拉刷新功能

web-view

在vue页面里写web-view组件，这个组件如何用plus api操作（页面章节获取该对象的方法见：）
- 先得到当前页面的webview。
- 然后调用currentWebview.children()方法来获得所有子webview。
- 有了子webview对象后，可以用5+丰富的api来进行前进、后退、拦截资源、禁用schema跳转、注入js等各种操作。
  - 注释：URL Schema（统一资源定位符模式）是一种用于在移动设备App之间传递数据的机制，它是可以被移动设备操作系统（如iOS）理解和识别的URL协议。URL Schema允许应用程序通过链接来打开其他应用程序或执行特定的任务

#————————————————————————————————————————————————————————

API

页面和路由

教程-页面章节
- navigateTo, redirectTo 只能打开非 tabBar 页面。
  - 注释：关闭当前页面，跳转到应用内的某个页面
- switchTab 只能打开 tabBar 页面
- reLaunch 可以打开任意页面。
  - 注释：reLaunch方法是可以打开任意页面的，但是它会关闭所有已经打开的页面
  - 注释：页面之间无法传递参数或事件，交互不方便。
  - 重加载
- 不能在首页 onReady 之前进行页面跳转。

页面通讯

教程-页面章节
- uni.$emit(eventName,OBJECT) 触发全局的自定义事件。
- uni.$on(eventName,callback) 监听全局的自定义事件。
- uni.$once(eventName,callback) 监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
- uni.$off([eventName, callback]) 移除全局自定义事件监听器。
  - 如果没有提供参数，则移除所有的事件监听器；
  - 如果只提供了事件，则移除该事件所有的监听器；

#————————————————————————————————————————————————————————

教程

应用（自定义的章节用于整理）

从 @dcloudio/uni-app 包内导入 uni-app 应用生命周期及页面的生命周期。(教程-vue语法-vue2-组合式 API 章节)
getApp() （页面章节）
- 注释：全局方法
- getApp() 函数用于获取当前应用实例，一般用于获取globalData。也可通过应用实例调用 App.vue 内 methods 中定义的方法。
  - 注释：应用实例可以理解为 App.vue 这个根组件
  - 在 App.vue 中定义的全局 js 变量不会在 nvue 页面生效。globalData和vuex是生效的。（教程-页面章节）
- 不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，可以通过 this.$scope 获取对应的app实例
  - 注释：$scope 并不是 vue 原生提供的属性
  - 注释：定义于 App() 内的函数中实际就是App.vue中的函数
- 当在首页nvue中使用getApp()不一定可以获取真正的App对象。对此提供了const app = getApp({allowDefault: true})用来获取原始的App对象，可以用来在首页对globalData等初始化
  - 注释：uni-app的v3模式对首页nvue进行了加速优化，使得首页nvue的启动速度更快，但也导致了首页nvue的生命周期和App对象的生命周期不一致。首页nvue的启动逻辑会被提前到App启动时执行，而不是等到App对象创建完成后再执行，这样可以减少首页nvue的渲染延迟。
uni-app全局变量的几种实现方式（教程-vue语法-vue2-API 章节）
- 公用模块
  - 这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用
  - 注释：vue页面和nvue页面的js运行不同的全局上下文中，所以导致两边的公共模块中的变量不能共享
- 挂载 Vue.prototype
  - 这种方式只支持vue页面
    - 疑问：为什么只支持vue页面
- Vuex
  - HBuilderX 2.2.5+起，支持vue和nvue之间共享
  - 需要在 main.js 挂载 VuexVue.prototype.$store = store
    - 注释：vuex官方没有这个要求，vuex官方通过把store对象传入 new Vue 的参数中来往所有的组件注入 $store。uniapp中依然需要这个步骤，但还需要上面这个行为
- globalData
  - globalData支持vue和nvue共享数据

// App.vue

<script>

    export default {

        globalData: {

            text: 'text'

        },

        onLaunch: function() {

            console.log('App Launch')

        },

        onShow: function() {

            console.log('App Show')

        },

        onHide: function() {

            console.log('App Hide')

        }

    }

</script>  

// 赋值：getApp().globalData.text = 'test'

// 取值：console.log(getApp().globalData.text) // 'test'

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。（教程-vue语法-vue2-API 章节）

	export default {

	   // 只有 app 才会有 onLaunch 的生命周期

		onLaunch () {

		   // ...

		},

		// 捕获 app error

		onError (err) {

		   console.log(err)

		}

	}

页面

一个页面可以同时存在vue和nvue，在pages.json的路由注册中不包含页面文件名后缀，同一个页面可以对应2个文件名。重名时优先级如下：
- 在非app平台，先使用vue，忽略nvue
- 在app平台，使用nvue，忽略vue
在 uni-app x 中，后缀名是.uvue文件
- 注释：uni-app x是根据ts和vue延申了一套语言uts和uvue，可以用来编译为js或app原生语言，详见
- uni-app x 中没有js引擎和webview，不支持和vue页面并存。
- uni-app x 在app-android上，每个页面都是一个全屏activity，不支持透明。
  - 注释：全屏activity 是指每个页面都是独立窗口，它覆盖在上一个页面上面
pages.json → pages配置项中的第一个页面，作为当前工程的首页（启动页）。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar
- 注释：详见 pages.json 页面路由章节
从 @dcloudio/uni-app 包内导入 uni-app 应用生命周期及页面的生命周期。(教程-vue语法-vue2-组合式 API 章节)
uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别
- onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
  - 注释：只有百度小程序支持，建议用 onLoad 代替
  - 3.1.0+
- onLoad 监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
  - 注释：上个页面通过url传递的参数，uniapp采用的是vue的hash模式
  - 在 app-uvue 中获取当前的activity拿到的是老页面的activity，只能通过页面栈获取activity。
    - 首页会获取应用默认的 activity 实例
    - 如需获取当前页面的 activity 实例，应在 onShow 或 onReady 生命周期中获取
    - 注释：activity是指窗口，uvue每个页面都是独立的窗口
  - 但onLoad里不适合进行大量同步耗时运算，因为此时转场动画还没开始。
  - 尤其uni-app x 在 Android上，onLoad里的代码（除了联网和加载图片）默认是在UI线程运行的，大量同步耗时计算很容易卡住页面动画不启动。除非开发者显式指定在其他线程运行。
  - （vue2 升 3 指南章节）created为组件生命周期，onLoad为页面生命周期。因此created执行先于onLoad更合理。Vue3 在实现时 created 先于 onLoad 执行；Vue2 项目由于历史包袱较重不便修改，仅在使用组合式API时与Vue3对齐。
  - vue3 全平台新增：通过 props 来获取页面 url 参数的使用方式(教程-vue2 升 3 指南)
    - 注释：同时支持 setup 语法和 option 语法
- onShow 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
  - 在tabbar页面（指pages.json里配置的tabbar），不同tab页面互相切换时，会触发各自的onShow和onHide。
- onHide 监听页面隐藏
- onReady 监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
  - 不能在首页 onReady 之前进行页面跳转。
- onUnload 监听页面卸载
  - 注释：tabbar页面（指pages.json里配置的tabbar）是不会触发onUnload的，除非使用wx.reLaunch或者wx.redirectTo跳转到一个非tabbar页面。这是因为tabbar页面是一直存在于页面栈中的，只是在不同tab页面切换时，会触发各自的onShow和onHide
- onResize 监听窗口尺寸变化
  - App、微信小程序、快手小程序
- onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
  - 注释：需要在pages.json中开启enablePullDownRefresh才会触发
- onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
  - 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance
- onPageScroll 监听页面滚动，参数为Object
  - scrollTop Number 页面在垂直方向已滚动的距离（单位px）
  - nvue暂不支持滚动监听，可用bindingx代替
    - 注释：bindingx它的核心思想是将交互行为以表达式的方式描述，并提前预置到 Native，从而避免 Native 与 JS 频繁通信。
    - 注释：使用时引入这个库，这个库提供了方法让你把交互绑定到元素上。
  - onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。（uvue在app端无此限制）
    - 注释：可以理解为渲染层触发这个事件，在逻辑层中运行这个js函数，渲染层通知逻辑层运行是会有损耗的。
  - 在webview渲染时，比如app-vue、微信小程序、H5中，也可以使用wxs监听滚动
    - 注释：WXS是一套运行在视图层的脚本语言，是js的阉割版
    - 注释：uniapp通过在vue文件中使用script标签引入wxs文件来引入，在template中可以使用wxs文件 export 出的数据和方法
  - 如果想实现滚动时标题栏（导航栏）透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent(uni-app x不支持)
  - 如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局（uni-app x可自由在uts中设置固定位置）
    - 以为：uni-app x可自由在uts中设置固定位置?
- onNavigationBarButtonTap 监听原生标题栏（导航栏）按钮点击事件，参数为Object
  - index Number 原生标题栏按钮数组的下标
  - 返回格式为json对象：{"text":"测试","index":0}
  - App、H5
- onNavigationBarSearchInputChanged 监听原生标题栏（导航栏）搜索输入框输入内容变化事件
  - App、H5
  - 1.6.0
  - 在生命周期里通过参数e.text，可获取输入框内容。(全局文件-pages.json 页面路由章节)
- onNavigationBarSearchInputConfirmed 监听原生标题栏（导航栏）搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
  - App、H5
  - 1.6.0
- onNavigationBarSearchInputClicked 监听原生标题栏（导航栏）搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）
  - 注释：searchInput 配置 disabled 为 true 时禁止原生标题栏上的搜索框
  - App、H5
  - 1.6.0
- onBackPress 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，支付宝小程序端不支持返回此字段 from
  - backbutton表示来源是左上角返回按钮或 android 返回键；
    - 支付宝小程序只有真机可以监听到非navigateBack引发的返回事件（使用小程序开发工具时不会触发onBackPress），不可以阻止默认返回行为
  - navigateBack表示来源是 uni.navigateBack；
  - 详细说明及使用：onBackPress 详解
    - 只有在该函数中返回值为 true 时，才表示不执行默认的返回，自行处理此时的业务逻辑。
    - 当不阻止页面返回却直接调用页面路由相关接口（如：uni.switchTab）时，可能会导致页面显示异常，可以通过延迟调用路由相关接口解决。
    - H5 平台，顶部导航栏（标题栏）返回按钮支持 onBackPress()，浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()
      - 注释：导航栏一版包括（导航图标（返回）、标题、操作项（分享等按钮，搜索输入框）、更多菜单）也被称为：标题栏
    - 暂不支持直接在自定义组件中配置该函数，目前只能是在页面中来处理。
  - app、H5、支付宝小程序
- onShareAppMessage 用户点击右上角分享
  - 微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
- onShareTimeline 监听用户点击右上角转发到朋友圈
  - 微信小程序
  - 2.8.1+
- onAddToFavorites 监听用户点击右上角收藏
  - 微信小程序、QQ小程序
  - 2.8.1+
- onTabItemTap 点击 tab 时触发，参数为Object
  - 参数包括
    - index Number 被点击tabItem的序号，从0开始
    - pagePath String 被点击tabItem的页面路径，pages.json 中配置的路径
    - text String 被点击tabItem的按钮文字
  - onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。
    - 如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一个区块盖住原先的tabitem，并拦截点击事件
    - 支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发，因此不能用于实现点击返回顶部这种操作
  - 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
页面加载时序介绍
- uni-app框架，首先根据pages.json的配置，创建页面
  - 所以原生导航栏（标题栏）是最快显示的。页面背景色也应该在这里配置。
- 根据页面template里的组件，创建dom。
  - 要注意一个页面静态dom元素过多，会影响页面加载速度。在uni-app x Android版本上，可能会阻碍页面进入的转场动画。因为此时，页面转场动画还没有启动。
- 触发onLoad
- 转场动画开始
  - 新页面开始进入的转场动画，动画默认耗时300ms，可以在路由API中调节时长。
- 页面onReady
  - 注意：onReady和转场动画开始、结束之间，没有必然的先后顺序，完全取决于dom的数量和复杂度。
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，数组中的元素为页面实例，第一个元素为首页，最后一个元素为当前页面。
- 每个页面实例的方法属性列表：
  - page.$getAppWebview() 获取当前页面的webview对象实例 App才有
    - 注释：当前页面是一个原生渲染的容器，当前页面不是nvue页面的化会在页面中插入一个webview渲染vue页面的内容，page.$getAppWebview()获取的就是这个对象实例
    - 此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
      - 注释：无效是因为，在h5plus中js和渲染都在webview中，plus.webview.currentWebview()可以获取webview，但是在app中，js在独立引擎运行，不能拿到vue页面渲染所在的webview
    - 在 html5Plus 中，plus.webview具有强大的控制能力，可参考：WebviewObject
    - 但uni-app框架有自己的窗口管理机制，请不要自己创建和销毁webview，如有需求覆盖子窗体上去，请使用原生子窗体subNvue
  - page.route 获取当前页面的路由
app自带的web-view组件，是页面中新插入的一个子webview。获取该对象的方法见：
- 取当前显示的 webviewconst currentWebview = this.$mp.page.$getAppWebview()
  - 注释：这里获取的是 app 页面中默认添加的 webview。
  - 注释：教程中没有其他地方关于 this.$mp 对象的说明，反而是 page.$getAppWebview 被专门提及，建议使用这个冗余方法去获取当前页面。详情搜索：getCurrentPages()
在 Vue3 中，this 对象下的 $mp 调整为 $scope(教程-vue2 升 3 指南章节)
路由
- 页面返回时会自动关闭 loading 及 toast, modal 及 actionSheet 不会自动关闭。
  - 注释：actionSheet 是底部向上弹起的弹窗
- 页面关闭时，只是销毁了页面实例，未完成的网络请求、计时器等副作用需开发者自行处理。

js语法

jsx/tsx 语法（教程-jsx/tsx 语法章节）
- 注释：vue3才开始支持
- JSX/TSX 小程序不支持
- 安装插件npm install @vitejs/plugin-vue-jsx --save-dev
- vite.config.js 文件中增加如下配置

import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({

  plugins: [

    vueJsx({

      // options are passed on to @vue/babel-plugin-jsx

    }),

  ],

}

类型定义文件由 @dcloudio/types 模块提供，安装后请注意配置 tsconfig.json 文件中的 compilerOptions > types 部分，如需其他小程序平台类型定义也可以安装，如：miniprogram-api-typings、mini-types。(ts/typescript 专题章节)
commonJS 需改为 ES6 模块规范(教程-vue2 升 3 指南章节)
- 注释：vue3不支持commonJS
非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API（兼容小程序 API），比如：支持高德地图微信小程序 SDK(互相引用-引用js)
uni-app 的 vue2 模式：nvue 文件中不支持编写 ts。vue 文件中可以使用 ts，但 ts 版本根据项目类型有区别。HBuilderX 创建的项目使用 ts 3.7.5，cli 创建的项目使用 ts 4.x(ts/typescript 专题章节)
uni-app 的 vue3 模式：vue 文件及 nvue 文件均支持最新版 ts(ts/typescript 专题章节)
声明 lang="ts" 后，该 vue/nvue 文件 import 进来的所有 vue 组件，均需要使用 ts 编写(ts/typescript 专题章节)
- 疑问：这不是ts的要求
目前不支持在 nvue 页面使用 typescript/ts(页面章节)
script中编写脚本，可以通过lang属性指定脚本语言。页面章节
- 在vue和nvue中，默认是js，可以指定ts。
- 疑问？nvue 到底支不支持 ts
开发者应谨慎编写export default 外面的代码，这里的代码有2个注意事项：页面章节
- 在应用启动时执行。也就是这里的代码执行时机是应用启动、而不是页面加载。如果这里的代码写的太复杂，会影响应用启动速度和内存占用。
- 不跟随页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。
注释：es语法支持情况
- 因为iOS上不允许三方js引擎，所以iOS上不区分App、小程序、H5，各端均仅依赖iOS版本。
  - 注释：可以在caniuse中查到
- 各端Android版本有差异：
  - App端的数据见下表；
    - JS脚本运行在独立Google V8引擎中，版本与Chrome83一致
      - 注释：android 中使用的是 android 自带的 v8 引擎，所以它不一定是Chrome83版本，而是和安卓版本相关。
    - String.normalize 将一个字符串转换成一个统一的 Unicode 标准形式，仅支持 NFD/NFC
      - 注释：和转化为 unicode 字符不是同一个概念，转换为 uniocde 标准形式是对特殊字符进行处理，它提供了NFC、NFD、NFKC 或 NFKD 4种处理方法，比如'é'按NFD处理后会返回基本字符 'e' 和一个表示重音的组合字符
    - Array.values 返回数组的迭代器
    - Proxy Android<5不支持
  - H5端数据见caniuse；
  - 微信小程序详见
  - 阿里小程序详见
  - 百度小程序详见
  - 抖音小程序详见
  - QQ小程序详见
但如果用了微信的wxml自定义组件（wxcomponents目录下），uni-app编译器并不会处理这些文件中的es6代码，需要去微信工具里开启转换。
- 从HBuilderX调起微信工具时，如果发现工程下有wxcomponents目录会自动配置微信工程打开es6转换。

css语法

总结：
- 单位
  - rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue）端和 H5（vue2）端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算
    - 并不是所有地方都支持rpx这个单位的，App 端在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。
    - 注释：可在pages.json中配置响应范围
  - nvue
    - 不支持 rem、vh、vw、百分比
    - dynamicRpx 在 pages.json 中配置，启用后在 app-nvue 页面 rpx 单位会在屏幕大小变化后重新计算
- css 选择器支持有限，类，id，标签名，多个，::after、::before、
  - 微信小程序自定义组件中仅支持 class 选择器
  - page 相当于 body 节点
  - nvue 只能使用 class 选择器
  - vue3 出于性能考虑，style 中暂不支持 div、p 等 HTML 标签选择器，推荐使用 class 选择器（教程-vue2 升 3 指南章节）
  - 尽量不要把样式写在style中，会影响性能
- 内置变量
  - --status-bar-height 系统状态栏高度，h5没有状态栏，app-nvue不支持
    - 目前 nvue 在 App 端，还不支持 --status-bar-height变量，替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度
  - --window-top 内容区域距离顶部的距离，app和小程序内容区域不包括顶部的状态栏和导航栏（标题栏），所以为0，h5页面如有有NavigationBar（原生导航栏）时就是NavigationBar的高度
  - --window-bottom 内容区域距离底部的距离，同上，h5页面是 TabBar 的高度
    - // nvue 不支持css的写法，请使用 js 方法获取 uni.getSystemInfoSync().windowBottom(教程-App使用高斯模糊效果)
- 资源
  - 注释：uni.getSystemInfoSync().windowBottom获取的是tabbar的高度，即使在非h5页面。
  - nvue
    - 不支持 css 中引入字体文件，服务器引入也不行，必须通过命令形式引入远程资源。
    - 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
      - 注释：前文提到在app中iconfont被作为保留字，所以不允许使用。
  - 有些小程序端 css 文件不允许引用本地文件
    - 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
    - 小于 40 kb 的文件可以直接引用，会根据平台而自动转化为base64，大于40kb 的引用远程资源
    - 网络路径必须加协议头 https
  - 都使用@绝对路径来引用资源
    - @开头的绝对路径以及相对路径会经过 base64 转换规则校验
    - 微信小程序不支持相对路径（真机不支持，开发工具支持）
- nvue
  - 注释：nvue中能否使用 App.vue 中定义的全局样式有待验证
  - 注意 nvue 支持的样式是有限的
  - Android 端在一个页面内使用大量圆角边框会造成性能问题
  - nvue 的各组件在安卓端默认是透明的，需要设置background-color
  - 不支持背景图。但可以使用image组件和层级来实现类似 web 中的背景效果。
  - 没有媒体查询。
  - 只有text标签可以设置字体大小，字体颜色
  - nvue 页面的布局排列方向默认为竖排（column），所以 nvue 编译为 H5、小程序时，会自动把页面默认布局设为 flex、方向为垂直。
- app-uvue 页面是原生渲染的，是 web 的css子集
vue3和vite双向加持，uni-app性能再次提升(教程-什么是编译器章节)
- 支持<style scoped>、<style module>、State-Driven Dynamic CSS(v-bind)
  - 注释：scoped 是通过自定义属性实现
  - 注释：module 是由 css-loader 配置了 modules 后支持的，通过生成唯一 class 名实现，它会注入名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。vue3 新增特性
  - 注释：State-Driven Dynamic CSS是一种基于状态驱动的动态CSS技术color: v-bind(color);
    - 实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新

#————————————————————————————————————————

css语法

注释：在视网膜屏，是采用通过设置meta中initial-scale来缩放视口实现兼容的，initial-scale=2时1px等于实际2个像素点。
iOS平台（js语法章节）
- vue页面渲染在系统WKWebview中，受iOS系统版本影响，兼容性与iOS系统的Safari浏览器一致。
安卓平台（js语法章节）
- vue页面渲染在系统Webview中，受Android系统版本影响，在Android低端机上存在css浏览器兼容性问题，太新的css语法在低版本不支持。
互相引用-引入静态资源章节
- 有些小程序端 css 文件不允许引用本地文件
  - @开头的绝对路径以及相对路径会经过 base64 转换规则校验
    - 注释：@是由sass库提供的别名
    - 自HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式
  - 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
  - h5 平台，小于 4kb 会转 base6
  - 其余平台不会转 base64
图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
nvue 页面暂不支持全局样式
- 疑问：下面又说“App.vue 中定义的全局 css，对 nvue 和 vue 页面同时生效。”不知道哪个是对的
nvue（页面章节）
- 不能在 style 中引入字体文件，nvue 中字体图标的使用参考：加载自定义字体。如果是本地字体，可以用plus.io的 API 转换路径。
- App.vue 中定义的全局 css，对 nvue 和 vue 页面同时生效。如果全局 css 中有些 css 在 nvue 下不支持，编译时控制台会报警，建议把这些不支持的 css 包裹在条件编译里
- 原生开发没有页面滚动的概念，页面内容高过屏幕高度并不会自动滚动，只有部分组件可滚动（list、waterfall、scroll-view/scroller），要滚得内容需要套在可滚动组件下。
  - 这不符合前端开发的习惯，所以在 nvue 编译为 uni-app 模式时，给页面外层自动套了一个 scroller，页面内容过高会自动滚动。
  - 组件不会套，页面有recycle-list时也不会套
  - 注释：scroller是什么？
- Android 端在一个页面内使用大量圆角边框会造成性能问题，尤其是多个角的样式还不一样的话更耗费性能。应避免这类使用。
- nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题。
- css 选择器支持的比较少，只能使用 class 选择器
- 不支持背景图。但可以使用image组件和层级来实现类似 web 中的背景效果。因为原生开发本身也没有 web 这种背景图概念
- 布局不能使用百分比、没有媒体查询。
- 只有text标签可以设置字体大小，字体颜色。
- nvue 页面的布局排列方向默认为竖排（column），如需改变布局方向，可以在 manifest.json → app-plus → nvue → flex-direction 节点下修改，仅在 uni-app 模式下生效。
  - 所以 nvue 编译为 H5、小程序时，会自动把页面默认布局设为 flex、方向为垂直。
app-uvue 页面是原生渲染的，是 web 的css子集
uni-app 支持less、sass、scss、stylus等预处理器
uni-app 支持的通用 css 单位包括 px、rpx
- rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue）端和 H5（vue2）端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算
- 注释：rpx 不是 css 原生单位，在 h5 页面会被转换为 rem，然后通过设置根元素字体大小来控制。不具有响应时，每次应用加载时从新计算
- rpx 不支持动态横竖屏切换计算，使用 rpx 建议锁定屏幕方向
vue 页面支持下面这些普通 H5 单位，但在 nvue 里不支持：
- rem 根字体大小可以通过 page-meta 配置抖音小程序和飞书小程序：屏幕宽度/20、百度小程序：16px、支付宝小程序：50px
- vh viewpoint height，视窗高度，1vh 等于视窗高度的 1%
- vw viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%
- nvue 还不支持百分比单位。
nvue 中，另外启用 dynamicRpx 后可以适配屏幕大小动态变化。
- 注释：uniapp在编译nvue文件时有两种模式，uniapp模式和weex模式，weex模式已经被淘汰，本文中的说明都是基于uniapp模式的。
- 注释：weex模式下，px的表示以 750 宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。这和css中不同，会导致一词多义，造成理解障碍。
- 注释：dynamicRpx 在 pages.json 中配置，启用后在 app-nvue 页面 rpx 单位会在屏幕大小变化后重新计算
早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了
请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
目前支持的选择器有：
- .class
- id
- element view 选择所有 view 组件
- element, element
- ::after 仅 vue 页面生效
- ::before 仅 vue 页面生效
- 在 uni-app 中不能使用 * 选择器
- 微信小程序自定义组件中仅支持 class 选择器
- page 相当于 body 节点，使用 scoped 会导致失效
uni-app 提供内置 CSS 变量
- --status-bar-height 系统状态栏高度，h5没有状态栏
  - 目前 nvue 在 App 端，还不支持 --status-bar-height变量，替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度
- --window-top 内容区域距离顶部的距离，app和小程序内容区域不包括顶部的状态栏和导航栏（标题栏），所以为0，h5页面如有有NavigationBar（原生导航栏）时就是NavigationBar的高度
- --window-bottom 内容区域距离底部的距离，同上，h5页面是 TabBar 的高度
  - 由于在 H5 端，不存在原生导航栏（标题栏）和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom，不管在哪个端，都是固定在 tabbar 上方。
uni-app 中以下组件的高度是固定的，不可修改：(app和h5中)
- NavigationBar 导航栏（标题栏） 44px
- TabBar 底部选项卡 50px
- 各小程序平台，包括同小程序平台的 iOS 和 Android 的高度也不一样
  - 疑问：？
本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
- 注释：_{@并不是css的标准语法，是由postcss-import提供的模块加载前缀。好像和 /、}@、@没有什么区别
- 注释：这里的这个推荐可能是历史遗留，可能历史中对@引入的资源不作为模块处理，不会执行base64判定很转换

.test2 {

	background-image: url('~@/static/logo.png');

}

背景图片
- 微信小程序不支持相对路径（真机不支持，开发工具支持）
字体图标
- 网络路径必须加协议头 https
- 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
- 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
- nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。
- 注释：这是一个很老的例子，请参考

var domModule = weex.requireModule('dom');

domModule.addRule('fontFace', {

	fontFamily: 'fontFamilyName',

	src: "url('https://...')",

});

vue2（自定义的章节用于整理）

创建应用实例(教程-vue2 升 3 指南章节)

// 之前 - Vue 2

import Vue from 'vue'

import App from './App'

Vue.config.productionTip = false    // vue3 不再需要。注释：设置为 false 以阻止 vue 在启动时生成生产提示

App.mpType = 'app'    // vue3 不再需要。注释：vue2中是在App.vue这个组件中定义了该属性

const app = new Vue({ // 注释：App export了一个Vue.extend返回的构造函数，可以 new App() 也是相同的，这里的使用和官方是不相同的。

...App

})

app.$mount()

// vue 3

import App from './App'

import { createSSRApp } from 'vue'

// 不能修改导出的 createApp 方法名，不能修改从 Vue 中导入的 createSSRApp。

export function createApp() {

  const app = createSSRApp(App)

  return {

      app

  }

}

资源
- @开头的绝对路径以及相对路径会经过 base64 转换规则校验（互相引用-引入静态资源章节）
  - 注释：template中的@是由webpack提供的别名
  - 注释：vue/cli中template中允许通过~来声明之后的文件名是个模块，不知道uniapp支不支持
  - 支付宝小程序组件内 image 标签不可使用相对路径
- 引入的静态资源在非 h5 平台，均不转为 base64。（互相引用-引入静态资源章节）
  - H5 平台，小于 4kb 的资源会被转换成 base64，其余不转
template
- nvue
  - class 进行绑定时只支持数组语法(页面章节)
  - 页面控制显隐只可以使用v-if不可以使用v-show (页面章节)
  - 文字内容，必须只能在<text>组件下。不能在<div>、<view>的text区域里直接写文字。否则即使渲染了，也无法绑定 js 里的变量。(页面章节)
- v-show 不支持 template 元素(vue语法-vue2-基础)
  - 注释：这是vue官方文档中的规定
- v-slot 只能添加在 <template> 上(vue语法-vue2-组件章节)
  - 注释：vue原生规定
- 小程序不支持列表(教程-vue语法-vue2-组件章节)
  - 不支持 classObject 和 styleObject 语法(vue语法-vue2-基础)
  - 传入一个对象的所有 property (微信小程序暂不支持该用法，即: <blog-post v-bind="post"(错误)>)(教程-vue语法-vue2-组件章节)
  - inline-template 在父模板中定义组件的模板
  - X-Templates 将模板定义在 HTML 文件里的 script 标签里
组件生命周期
- beforeUpdate 仅H5平台支持(来源于页面章节)
- updated 仅H5平台支持(来源于页面章节)
  - 疑问：vue语法-vue2-api中又说这两个生命周期支持
- activated 被 keep-alive 缓存的组件激活时调用，小程序不支持（vue语法-vue2-api 章节）
- deactivated 被 keep-alive 缓存的组件停用时调用，小程序不支持（vue语法-vue2-api 章节）
疑难杂症
- 小程序端数据为差量更新方式，由于小程序不支持删除对象属性，使用的设置值为 null 的方式替代，导致遍历时可能出现不符合预期的情况，需要自行过滤一下值为 null 的数据(vue语法-vue2-基础)
  - 注释：这是个bug，小程序是调用setData来更新视图的，需要获取vue前后状态的差异来作为数据。当旧数据的某项在新数据不存在时会被设置为null，在v-for中通过setData把不存在的项的value设置为null后就导致渲染的结果比新数据多出了些遗留项
@事件（v-on）提供了事件修饰符:(vue语法-vue2-基础)
- .stop: 各平台均支持，使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为
- .prevent: 仅在 H5 平台支持，禁止默认行为
- .capture: 仅在 H5 平台支持，捕获阶段触发
- .self: 仅在 H5 平台支持
- .once: 仅在 H5 平台支持
- .passive: 仅在 H5 平台支持，不需要等待事件结果，直接执行事件的默认行为
- 不能在 JS 中使用event.preventDefault()和event.stopPropagation()方法；
- 按键修饰符：uni-app 运行在手机端，没有键盘事件，所以不支持按键修饰符
- 在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 @事件的 .native 修饰符：(vue语法-vue2-组件章节)
  - 注意：在app、小程序端和h5端表现不一致，h5端获取到的是浏览器原生事件。
  - 疑问：其他平台获取的是什么？
组件
- 异步组件(教程-vue语法-vue2-组件章节)
  - 小程序不支持
- 在 uni-app 中以下这些作为保留关键字，不可作为组件名(教程-vue语法-vue2-组件章节)
  - 注释：多单词的包括loading-indicator、slider-neighbor
Vue属性和方法
- Vue.component 全平台支持(教程-vue语法-vue2-API 章节)
  - nvue 页面暂不支持全局组件。(教程-vue语法-vue2-组件章节)
- Vue.config.devtools 配置是否允许 vue-devtools 检查代码，只在Web环境下支持(教程-vue语法-vue2-API 章节)
- Vue.config.keyCodes 给 v-on 自定义键位别名，只在Web环境下支持(教程-vue语法-vue2-API 章节)
- Vue.config.performance 设置为 true 以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪，只在Web环境下支持(教程-vue语法-vue2-API 章节)
- Vue.config.ignoredElements 指定哪些组件不属于vue组件，强烈不推荐，会覆盖uni-app框架配置的内置组件(教程-vue语法-vue2-API 章节)
- Vue.extend 使用基础 Vue 构造器，创建一个“子类”，小程序不支持，不可作为组件使用(教程-vue语法-vue2-API 章节)
- Vue.nextTick app和小程序不支持(教程-vue语法-vue2-API 章节)
- Vue.directive 小程序不支持(教程-vue语法-vue2-API 章节)
- Vue.filter 小程序不支持(教程-vue语法-vue2-API 章节)
- Vue.mixin nvue 页面暂不支持(教程-vue语法-vue2-API 章节)
- Vue.compile 将一个模板字符串编译成 render 函数。app和小程序不支持(教程-vue语法-vue2-API 章节)
组件选项
- 在百度小程序中使用时，不要在 data 内使用 hidden ，可能会导致渲染错误。(教程-vue语法-vue2-组件章节)
- el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 app和小程序不支持(教程-vue语法-vue2-API 章节)
- template app和小程序不支持(教程-vue语法-vue2-API 章节)
- render app和小程序不支持(教程-vue语法-vue2-API 章节)
- renderError app和小程序不支持(教程-vue语法-vue2-API 章节)
- directives 小程序不支持(教程-vue语法-vue2-API 章节)
- parent 指定已创建的实例之父实例，在两者之间建立父子关系不推荐使用(教程-vue语法-vue2-API 章节)
- delimiters 改变纯文本插入分隔符即{{}}，app和小程序不支持(教程-vue语法-vue2-API 章节)
- functional 使组件无状态 (没有 data) 和无实例 (没有 this 上下文) app和小程序不支持(教程-vue语法-vue2-API 章节)
- model 小程序不支持(教程-vue语法-vue2-API 章节)
- inheritAttrs inheritAttrs属性默认值为true，表示允许组件的根节点继承$attrs包含的属性小程序不支持(教程-vue语法-vue2-API 章节)
- comments 当设为 true 时，将会保留且渲染模板中的 HTML 注释 app和小程序不支持(教程-vue语法-vue2-API 章节)
实例属性和方法
- vm.$el app和小程序不支持(教程-vue语法-vue2-API 章节)
- vm.$parent H5端 view、text 等内置标签是以 Vue 组件方式实现，$parent 会获取这些到内置组件，导致的问题是 this.$parent 与其他平台不一致，解决方式是使用 this.$parent.$parent 获取或自定义组件根节点由 view 改为 div(教程-vue语法-vue2-API 章节)
- vm.$children H5端 view、text 等内置标签是以 Vue 组件方式实现，$children 会获取到这些内置组件，导致的问题是 this.$children 与其他平台不一致，解决方式是使用 this.$children.$children 获取或自定义组件根节点由 view 改为 div(教程-vue语法-vue2-API 章节)
  - 注释：$children返回当前组件的直接子组件，直接子组件是指当前组件直接插槽中接收到的组件和不作为其他组件插槽值的组件。
- vm.$refs 非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）(教程-vue语法-vue2-API 章节)
- vm.$isServer 小程序不支持，app总是返回false(教程-vue语法-vue2-API 章节)
- vm.$attrs 小程序不支持(教程-vue语法-vue2-API 章节)
- vm.$listeners 小程序不支持(教程-vue语法-vue2-API 章节)
- vm.$mount() app和小程序不支持(教程-vue语法-vue2-API 章节)
- vm.$nextTick 全平台支持(教程-vue语法-vue2-API 章节)
模板指令(教程-vue语法-vue2-API 章节)
- 在H5平台使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in 10" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。(教程-vue语法-vue3-基础章节)
  - 在非H5平台循环对象时不支持第三个参数，如 v-for="(value, name, index) in object" 中，index 参数是不支持的。
- v-html App端和H5端支持 v-html ，微信小程序会被转为 rich-text，其他端不支持
- v-pre 跳过这个元素和它的子元素的编译过程小程序不支持
  - 注释：有该属性的标签及其子标签会被直接输出为文本到render中
- v-cloak 这个指令保持在元素上直到关联实例结束编译 app和小程序不支持
  - 注释：在浏览器中编译时可以取html的元素作为模板，当编译结束前会直接展示模板的内容导致用户体验不好，可以使用这个命令在编译前隐藏模板的内容
- v-once 和前端框架中的理解不同，客户端里要实现复用的逻辑，会标记模板节点的状态，添加了 v-once 能保证节点只渲染一次，但是并不一定能优化渲染性能，反而可能会拖慢客户端复用节点时的比对效率。
  - 注释：vue render重新运行时会生成新的vnode，然后进行新旧vnode的对比来生成重建dom的操作方法。
  - 注释：vue默认的是逐个对比dom，生成新旧变动操作。当遇到含有相同key的vnode节点时，会尝试移动旧的dom，并继续对比内部的内容
  - 注释：当遇到v-once时会尝试移动旧的dom，并不再对比内部的内容。
  - 小程序不支持
- v-text 更新元素的 textContent。小程序不支持
特殊属性(教程-vue语法-vue2-API 章节)
- ref 非 H5 平台只能获取 vue 组件实例不能获取到内置组件实例
- is 小程序不支持 app端传入字符串
内置组件(教程-vue语法-vue2-API 章节)
- component 小程序不支持
- transition app和小程序不支持
- transition-group app和小程序不支持
- keep-alive app和小程序不支持
compositionAPI
- defineComponent 从实现上看，defineComponent 只返回传递给它的对象。但是，就类型而言，返回的值有一个合成类型的构造函数，用于手动渲染函数、TSX 和 IDE 工具支持。只h5支持（教程-vue语法-vue3-API 章节)
- 在 main.js/ts 文件内增加安装 @vue/composition-api 插件。如果使用 nvue 页面，也需要在每个 nvue 页面安装，且每个 nvue 页面之间插件状态默认不会共享。(教程-vue语法-vue2-组合式 API 章节)
  - 注释：vue页面间的状态是可以共享的，但是nvue页面之间和nvue和vue页面之间状态都是不共享的。
- 从 @dcloudio/uni-app 包内导入 uni-app 应用生命周期及页面的生命周期。(教程-vue语法-vue2-组合式 API 章节)
目前 uni-app（Vue2）基于 Vue 2.6，组合式 API 由 @vue/composition-api 支持，script setup 由 unplugin-vue2-script-setup 支持(教程-vue语法-vue2-组合式 API 章节)
- 注释：unplugin-vue2-script-setup用于支持<script setup>语法
- unplugin-vue2-script-setup 插件，此插件暂不支持 nvue 页面。

vue3（自定义的章节用于整理）

因运行平台限制，目前在小程序和 App 端不支持插值方式定义国际化,需要使用 Messages Functions 定义国际化信息（教程-vue2 升 3 指南章节)
- 注释：这个vue-i18n 9的新特性

const messages = {

  en: {

    greeting: ({ named }) => `hello, ${named('name')}!`

  }

}

uni-app 内置了 Vuex ，在app里的使用，可参考 hello-uniapp store/index.js（教程-vue语法-vue3-API 章节)
- 注释：createSSRApp 以 SSR 激活模式创建一个应用实例。用法与 createApp() 完全相同。
- 注释：vue3和vue2在main.js中实例化vue存在差异，vue2采用官方方法 new 一个vue对象并挂载。vue3要求export 一个createApp方法，代码如下。

	//store.js

	import {createStore} from 'vuex'

	const store = createStore({

		state: {...},

		mutations: {...},

		actions: {...}

	})

	export default store

	//main.js

	import App from './App'

	import {createSSRApp} from 'vue'

	import store from './store'

    // 不能修改导出的 createApp 方法名，不能修改从 Vue 中导入的 createSSRApp。（这句注释来源于 vue2 升 3 指南 章节）

	export function createApp() {

		const app = createSSRApp(App)

		app.use(store)

		return {

			app,

            Vuex, // 如果 nvue 使用 vuex 的各种map工具方法时，必须 return Vuex（这句注释来源于 vue2 升 3 指南 章节）

		}

	}

	//test.vue 使用时：

	import {mapState,mapMutations} from 'vuex'

全局 API（教程-vue语法-vue3-API 章节)
- createApp 返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。
- h 返回一个”虚拟节点“，通常缩写为 VNode：一个普通对象，其中包含向 Vue 描述它应在页面上渲染哪种节点的信息，包括所有子节点的描述。只h5支持
- defineAsyncComponent 创建一个只有在需要时才会加载的异步组件。只h5支持
- resolveComponent 按名称手动解析已注册的组件。解析的结果提供给h函数渲染vnode节点。只h5支持
- resolveDynamicComponent 允许使用与 component :is="" 相同的机制来解析一个 component。只h5支持
  - 注释：vue3文档中并没有该方法，不知道是不是被废弃了
- resolveDirective 按名称手动解析已注册的指令。只h5支持
  - 注释：可以使用 withDirectives 将解析的自定义指令应用于 vnodewithDirectives(h('div'), [[pin, 200, 'top', { animate: true }]])
- withDirectives 只h5支持
- createRenderer 创建一个自定义渲染器。通过提供平台特定的节点创建以及更改 API，你可以在非 DOM 环境中也享受到 Vue 核心运行时的特性。只h5支持const { render, createApp } = createRenderer({...})
template
- 根节点为 <template>，这个 <template> 下在App、H5可以有多个根 <view> 组件，在小程序只能有一个根 <view> 组件（教程-vue语法-vue3-组件章节)
实例属性和方法
- vm.$refs 非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text），uni-app x 内置组件绑定 ref 会返回组件根节点的引用。（教程-vue语法-vue3-基础章节)
事件
- 在 vue3 的小程序平台中，监听原生的点击事件可以先使用 tap。在 vue3 中，移除了.native 修饰符，所以编译器无法预知 click 是要触发原生事件，还是组件的自定义事件，故并未转换成小程序的 tap 事件。（教程-vue2 升 3 指南章节）
  - 注释：语法的转换是在编译阶段完成的，没有转换的应该是自定义组件上的 click 事件，内部组件应该还是转换了
- Vue3 项目部分小程序端事件延迟或调用失败，可在执行事件的元素上添加 data-eventsync="true" 属性以解决此问题(教程-vue2 升 3 指南)
- uni-app x 只支持 stop 和 once（教程-vue语法-vue3-基础章节）
- 注意：uni-app x 中函数 event 参数需要显式指定类型（查不到出处，教程-vue语法-vue3-基础章节）

<view @click="(e: any) => foo(e)">event must has type</view>

<view @click="foo($event as MouseEvent)">event must has type</view>

模板指令
- v-once
  - 注意：uni-app x 暂不支持(教程-vue语法-vue2-API 章节）
- v-slot
  - 作用域插槽（小程序不支持在 HBuilderX 3.1.19 以下仅支持解构插槽且不可使用作用域外数据以及使用复杂的表达式）（教程-vue语法-vue3-组件章节）
- v-html
  - 注意：uni-app x 暂不支持（查不到出处，教程-vue语法-vue3-基础章节)
- v-is 在 DOM 内模板使用时，模板受原生 HTML 解析规则的约束。(vue语法-vue3-API 章节) app和小程序不支持
  - 注释：在vue3官方文档中没有这个指令，应该是改回is了
特殊属性
- is 微信小程序不支持（教程-vue语法-vue3-API 章节）
内置组件
- teleport 传送组件，仅h5支持。(vue语法-vue3-API 章节)
- 暂不支持新增的 Teleport,Suspense 组件（教程-vue语法-vue3-基础章节uni-app 项目支持 vue 3.0介绍，及升级指南）
  - 注释：Teleport穿梭框组件
  - 注释：Suspense 等待子孙组件初始化，包括异步setup和异步组件
组件生命周期（vue语法-vue3-API 章节）
- beforeUnmount 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
- unmounted 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
- errorCaptured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
- renderTracked 当组件的某个响应式数据被读取时，这个钩子会被触发。用于性能分析、调试或者高级用途，比如自定义渲染优化。
- renderTriggered 当组件的响应式依赖项变化并触发组件重新渲染时调用。用于性能分析、调试或者高级用途，比如自定义渲染优化。
选项
- 侦听器watch(vue语法-vue2-基础)

<script>

	export default {

		data() {

			return {

				a: 1,

				b: 2,

				c: 3,

				d: 4,

				e: {

					f: {

						g: 5

					}

				}

			}

		},

		watch: {

			a: function(val, oldVal) {

				console.log('new: %s, old: %s', val, oldVal)

			},

			// 方法名

			b: 'someMethod',

			// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深

            // 注释：vue3中监听数组的变更不需要deep参数

            // （章节：vue语法-vue3-基础）uni-app x 暂不支持

			c: {

				handler: function(val, oldVal) { /* ... */ },

				deep: true

			},

			// 该回调将会在侦听开始之后被立即调用

			d: {

				handler: 'someMethod',

				immediate: true

			},

			// 你可以传入回调数组，它们会被逐一调用

			e: [

				'handle1',

				function handle2(val, oldVal) { /* ... */ },

				{

					handler: function handle3(val, oldVal) { /* ... */ },

					/* ... */

				}

			],

			// watch vm.e.f's value: {g: 5}

            // （章节：vue语法-vue3-基础）uni-app x 暂不支持

			'e.f': function(val, oldVal) { /* ... */ }

		}

	}

</script>

条件编译处理多端差异

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
以 #endif 结尾
%PLATFORM%：平台名称
- VUE3 HBuilderX 3.2.0+
  - VUE3 需要在项目的 manifest.json 文件根节点配置 "vueVersion" : "3"
- UNI-APP-X HBuilderX 3.9.0+
- uniVersion // #ifdef uniVersion > 3.9 HBuilderX 3.9.0+
  - 从HBuilderX 3.9起，版本号将由三段式字符串改为小数，即HBuilderX 3.9.1，将改为 3.91。
- APP
- APP-PLUS：uni-app js引擎版编译为App时（疑问）
  - 包含 APP-NVUE 和 APP-VUE
- APP-PLUS-NVUE或APP-NVUE：App nvue 页面
- APP-ANDROID
- APP-IOS
  - 对于APP-ANDROID和APP-IOS两个平台，在uni-app项目中，仅uts文件中支持（通常是uts插件里使用）。在uni-app x项目中，只要是条件编译支持的文件，均可以使用。
  - Android 和 iOS 平台不支持通过条件编译来区分，如果需要区分 Android、iOS 平台，请通过调用 uni.getSystemInfo 来获取平台信息。支持ifios、ifAndroid代码块，可方便编写判断。
  - 注释：uts文件会为ANDROID和IOS分别生成不同的文件，所以支持APP-ANDROID和APP-IOS。
- H5或WEB：推荐使用WEB，WEB HBuilderX 3.6.3+
- MP-WEIXIN
- MP-ALIPAY：支付宝小程序
- MP-BAIDU
- MP-TOUTIAO：抖音小程序
- MP-LARK：飞书小程序
- MP-QQ
- MP-KUAISHOU：快手小程序
- MP-JD
- MP-360
- MP：微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序
- QUICKAPP-WEBVIEW：快应用通用(包含联盟、华为)
- QUICKAPP-WEBVIEW-UNION：快应用联盟
- QUICKAPP-WEBVIEW-HUAWEI：快应用华为
条件编译是利用注释实现的，在不同语法里注释写法不一样，js/uts使用// 注释、css 使用/* 注释 */、vue/nvue/uvue 模板里使用
小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。
在不同平台，引用的静态资源可能也存在差异，通过 static 的条件编译可以解决此问题，static 目录下新建不同平台的专有目录，目录名称均为小写
- app-plus 或 app：app（推荐使用app uni-app 3.9+）
- h5 或 web：H5（推荐使用web uni-app 3.9+）
- mp-weixin
- mp-alipay
- mp-baidu
- mp-qq
- mp-toutiao
- mp-lark
- mp-kuaishou
- mp-jd
如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建platforms目录，然后在下面进一步创建app-plus、mp-weixin等子目录，存放不同平台的文件
- platforms目录下只支持放置页面文件（即页面vue文件），如果需要对其他资源条件编译

环境变量

在 vue.config.js 中可以修改 webpack 配置，包括环境变量

const webpack = require('webpack')

module.exports = {

  chainWebpack: config => {

    config

      .plugin('define')

      .tap(args => {

        args[0]['process.env'].VUE_APP_TEST = '"test"'

        return args

      })

  }

}

在自定义条件编译平台时，可以在 package.json 文件的 env 节点下配置环境变量
- 注释：自定义条件编译平台是指基于原有的 h5、小程序平台进行扩展，例如下例，h5运行在微信环境指定特殊的参数。见后文专题

"uni-app": {

    "scripts": {

        "h5-weixin": {

            "title":"微信服务号",

            "browser":"chrome",

            "env": {

                "UNI_PLATFORM": "h5"

             },

            "define": {

                "H5-WEIXIN": true

            }

        }

    }

}

CLI 创建的项目中可以在根目录中放置 .env 文件来指定环境变量
- 具体参考：Vue2
  - 模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式
    - development 模式用于 vue-cli-service serve
    - test 模式用于 vue-cli-service test:unit
    - production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  - 你可以通过传递 --mode 选项参数为命令行覆写默认的模式vue-cli-service build --mode development
  - 环境变量文件不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"
    - NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。
    - 注释：可以分别设置 NODE_ENV 和 mode，以在同一个运行模式中使用不同的环境变量
  - 可以在你的项目根目录中放置下列文件来指定环境变量：
    - .env # 在所有的环境中被载入
    - .env.local # 在所有的环境中被载入，但会被 git 忽略
    - .env.[mode] # 只在指定的模式中被载入
  - 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中
    - BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
  - 使用 dotenv-expand 来实现变量扩展 (Vue CLI 3.5+ 支持)
    - 注释：支持在环境变量文件中使用引用等计算
  - 所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。<link rel="icon" href="<%= BASE_URL %>favicon.ico">
  - 你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。process.env.VUE_APP_VERSION = require('./package.json').version
- 具体参考：Vue3
  - 在所有情况下都可以使用的内建变量：
    - import.meta.env.MODE: 应用运行的模式
    - import.meta.env.BASE_URL: 部署应用时的基本 URL。他由base 配置项决定
    - import.meta.env.PROD: 应用是否运行在生产环境
    - import.meta.env.DEV: 应用是否运行在开发环境
    - mport.meta.env.SSR: 应用是否运行在 server 上
  - 只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码
    - 如果你想自定义 env 变量的前缀，请参阅 envPrefix
    - 注释：envPrefix在vite配置项中配置
  - Vite 使用 dotenv-expand 来直接拓展变量
    - 如果想要在环境变量中使用 $ 符号，则必须使用 \ 对其进行转义NEW_KEY2=test\$foo
  - 如果你的代码依赖于浏览器环境的类型，比如 DOM 和 WebWorker，你可以在 tsconfig.json 中修改 lib 字段来获取类型支持
    - 注释：lib 主要是为了提供类型声明和编译时的检查，它们并不包含实际的实现代码
  - It's important to note that NODE_ENV (process.env.NODE_ENV) and modes are two different concepts. Here's how different commands affect the NODE_ENV and mode:
    - 注释：命令行中 --model 是用来决定加载的环境文件是哪一个的，NODE_ENV是用来声明当前打包的模式是 production 还是 development。
  - 想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示
    - 可以在 src 目录下创建一个 env.d.ts 文件，接着按下面这样增加 ImportMetaEnv 的定义

/// <reference types="vite/client" />

interface ImportMetaEnv {

  readonly VITE_APP_TITLE: string

  // 更多环境变量...

}

interface ImportMeta {

  readonly env: ImportMetaEnv

}

注释：接上面
- vue3
  - （vue2 升 3 指南章节）Vue3 非H5端，应直接访问 process.env.* 获取环境变量，不支持访问 process
  - 疑问？

// vue3

// 配置环境变量

// 根目录.env文件 必须 VITE_ 开头

VITE_SOME_KEY = 123

// 获取环境变量

process.env.NODE_ENV          // 应用运行的模式

import.meta.env.VITE_SOME_KEY // 123

// 注释：如果你想在 vite.config.js 或其他配置文件中访问这些环境变量，你可以直接使用 process.env

uni-app x不支持自定义环境变量

小程序（自定义的章节用于整理）

均可以通过在 manifest.json 的 mp-weixin 中配置 minified 为 true 来解决（教程-vue2 升 3 指南）
- vue3 微信开发者工具真机调试页面空白
- vue3 微信小程序真机调试，修改 picker 下面的输入框会影响 picker 内容
- 注释：在微信小程序中，如果 minified 设置为 true，开发者工具在预览或上传代码时会使用压缩后的代码

{

  "mp-weixin": {

    "setting": {

      // ...其他配置

      "minified": true

    }

  }

}

App，小程序端源码调试，需要在 vite.config.js 中主动开启 sourcemap（教程-vue2 升 3 指南章节）

import { defineConfig } from "vite";

import uni from "@dcloudio/vite-plugin-uni";

/**

 * @type {import('vite').UserConfig}

 */

export default defineConfig({

  build: {

    sourcemap: true,

  },

  plugins: [uni()],

});

部分小程序平台支持 options 选项（具体选项参考对应小程序平台文档的自定义组件部分），一般情况默认即可，如有特殊需求可在 Vue 组件中增加 options 属性
- multipleSlots 在组件定义时的选项中启动多slot支持，默认为true
- styleIsolation 组件样式隔离方式，默认为隔离，微信小程序才有
  - 组件对应 wxss 文件的样式，只对组件wxml内的节点生效。
  - 注释：App.vue中的全局样式有效，因为。webview 渲染下，在 app.wxss 或页面的 wxss 中使用标签名选择器（或一些其他特殊选择器）来直接指定样式会影响到页面和全部组件。
  - 疑问：微信小程序采用 Skyline 渲染时，全局样式是否还有效？
- virtualHost 将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定，启用后可以通过 mergeVirtualHostAttributes 合并合并组件虚拟节点外层属性。默认为 false，微信小程序、支付宝小程序（默认值为 true）
  - 注释：当自定义节点设置为虚拟时会合并组件上不是prop的参数到组件内的第一个标签上

export default {

  props: ['data'],

  data(){ return { } },

  options: {

    virtualHost: true

  }

}

概念简介

在app端，还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts
- 注释：uts uniapp 参考 ts 设计的语言，可以编译为 js 和原生 app 语言文件
- 注释：在app端每个页面实际上都是原生渲染，当遇到组件需要使用webview渲染时就插入个webview来渲染这个组件。实际上是一种混合渲染
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近小程序规范，但需将前缀 wx、my 等替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了应用生命周期及页面的生命周期
编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime
开发者按uni-app规范编写代码，由编译器将开发者的代码编译生成每个平台支持的特有代码
- 在web平台，将.vue文件编译为js代码。与普通的vue cli项目类似
- 在微信小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码
- 在app平台，将.vue文件编译为js代码。进一步，如果涉及uts代码：
  - 在Android平台，将.uts文件编译为kotlin代码
  - 在iOS平台，将.uts文件编译为swift代码
  - 注释：编译为app时需要区分是vue文件还是nvue文件，vue文件实际上是编译为视图和js两部分，视图在webview中渲染，js在解析引擎中执行，彼此进行通信；nvue才是编译为基于weex引擎的页面
编译器分vue2版和vue3版
- vue2版：基于webpack实现
- vue3版：基于Vite实现，性能更快
在小程序端，uni-app的runtime，主要是一个小程序版的vue runtime，页面路由、组件、api等方面基本都是转义。
- 注释：转义是指在编译时改变代码
在web端，uni-app的runtime相比普通的vue项目，多了一套ui库、页面路由框架、和uni对象（即常见API封装）
在App端，uni-app的runtime更复杂，可以先简单理解为DCloud也有一套小程序引擎，打包app时将开发者的代码和DCloud的小程序打包成了apk或ipa。当然，事实上DCloud确实有小程序引擎产品，供原生应用实现小程序化
- 注释：apk 是安卓的安装程序，ipa 是苹果的安装程序
- 注释：DCloud的小程序引擎是一个 app 资源包，引入这个资源包后，在 app 内可以直接运行小程序的 wxml 等文件。
- 注释：uniapp 打包成 apk 或 ipa的过程，应该是把用户代码编译成小程序代码然后和小程序引擎整合成安装程序。
uni-app runtime包括3部分：基础框架、组件、API。
- 基础框架：
  - 包括语法、数据驱动、全局文件、应用管理、页面管理、js引擎、渲染和排版引擎等
  - 在web和小程序上，不需要uni-app提供js引擎和排版引擎，直接使用浏览器和小程序的即可。但app上需要uni-app提供
  - App的js引擎：App-Android上，uni-app的js引擎是v8，App-iOS是jscore
  - App的渲染引擎：同时提供了2套渲染引擎，.vue页面文件由webview渲染，原理与小程序相同；.nvue页面文件由原生渲染，原理与react native相同。
- 组件：
  - 在小程序端，uni-app基础组件会直接转义为小程序自己的内置组件。在小程序的runtime中不占体积。
  - 在web和android、iOS端，这几十个组件都在uni-app的runtime中，会占用一定体积，相当于内置了一套ui库。
  - 在App平台，uni-app也支持使用原生编程语言来自行扩展原生组件，比如原生的地图、ar等。
  - uni-app同时支持将微信自定义组件运行到微信小程序、web、app这3个平台。注意微信自定义组件不是vue组件。
    - 注释：在web中 uni-app会使用一个特殊的组件来模拟微信小程序自定义组件的行为，这个组件叫做custom-component。custom-component会在运行时动态地解析微信小程序自定义组件的源码，将wxml转换为html，将wxss转换为css，将json转换为vue的options，将js转换为vue的methods，然后创建一个vue实例来渲染组件。
- API：
  - 同时uni-app不限制各端原生平台的API调用。开发者可以在uni-app框架中无限制的调用该平台所有能使用的API。
  - web和app的runtime体积不小，如果把小程序的所有API等内置进去会让开发者的最终应用体积变大。所以有部分不常用的API被剥离为ext API。虽然仍然是uni.开头，但需要单独下载插件到项目下
  - 小程序平台：uni对象会转为小程序的自有对象，比如在微信小程序平台，编写uni.request等同于wx.request。那么所有wx.的API都可以这样使用。
  - app平台：除了uni.的API，还可以使用plus.的API、Native.js，以及通过uts编写原生插件，或者使用java和objectC编写原生插件。这些原生插件调用os的API并封装给js使用。
    - 注释：HTML5 plus是一种基于HTML5的扩展规范，它可以让web开发者使用JavaScript调用手机的原生能力，实现与原生App同样强大的功能和性能
    - 注释：Native.js是一种将手机操作系统的原生对象转义，映射为JS对象，在JS里编写原生代码的技术。需要运行环境支持
  - 由于历史沿革，DCloud在开发app时有：5+App、wap2app、uni-app等3种模式。这3种方式的runtime在底层能力上是公用的，所有uni-app可以调用5+（也就是plus.xxx）的API。虽然都可以使用5+的系统能力，但uni-app的逻辑层运行在js层，渲染层是webview和原生nvue双选。而5+不区分逻辑层和渲染层，全部运行在webview里，在性能上5+不及uni-app。
插件市场
在小程序和app端，逻辑层和渲染层被分离了。
所以注意小程序和app的逻辑层都不支持浏览器专用的window、dom等API。app只能在渲染层操作window、dom，即renderjs。

工程

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）

│─components            符合vue组件规范的uni-app组件目录

│  └─comp-a.vue         可复用的a组件

├─utssdk                存放uts文件

├─pages                 业务页面文件存放的目录

│  ├─index

│  │  └─index.vue       index页面

│  └─list

│     └─list.vue        list页面

├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此

├─uni_modules           存放 uni_module。uni_module是uni-app的插件模块化规范，它可以让开发者将一组js sdk、组件、页面、uniCloud云函数、公共模块等封装成一个插件，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。

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

├─nativeplugins         App原生语言插件 [详见](https://nativesupport.dcloud.net.cn/NativePlugin/#)。略

├─nativeResources       App端原生资源目录。注释：java运行在虚拟机中，通过解析字节码来操作操作系统。原生资源就是某种格式的字节码，可以是zip格式的。

│  ├─android            Android原生资源目录

|  └─ios                iOS原生资源目录

├─hybrid                App端存放本地html文件的目录，注释：app中允许通过webview组件直接引用 h5 页面

├─wxcomponents          存放小程序组件的目录

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

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

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

├─main.js               Vue初始化入口文件

├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期

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

├─pages.json            配置页面路由、导航条、选项卡等页面类信息

└─uni.scss              这里是uni-app内置的常用样式变量

编译到任意平台时，static 目录下除不满足条件编译的文件，会直接复制到最终的打包目录，不会打包编译。非 static 目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。
- 注释：static 目录允许通过创建特定目录来设置条件编译，例如：位于 mp-weixin 目录下的文件，只有在编译微信小程序时才会被拷贝
互相引用-引用静态资源章节
- 通常项目中规定根目录下的 static 为静态资源文件夹（目前暂不支持修改），资源存放此处后，可在任意文件直接使用相对或者绝对路径引用,具体参考上述模板 css/js/uts 中引入静态资源的说明。
- 而非 static 目录的静态资源，不支持直接引用，需要在 js/uts 中使用 import 来引入，确保路径正确。
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件。

vue语法-vue2-基础

关于ui库的获取，详见多端UI库(互相引用)
- 小程序自定义组件（文件后缀为wxml或其他小程序平台特有后缀名称）
- vue组件性能好于小程序自定义组件。这是因为uni-app在底层对vue数据更新使用了自动差量更新的机制。而小程序自定义组件，默认的setData写法是没有差量数据更新的，需要写代码手动实现差量更新才能达到相同性能。
- HBuilderX支持vue doc，组件作者在vue组件源码里编写vue doc，可以让组件使用者写代码时得到良好的代码提示。
- DCloud官方出了一套扩展组件，即uni-ui
  - 这些扩展组件支持单个组件从插件市场下载，也支持 npm 引入uni ui
  - 非H5端的各个平台，包括App和各种小程序，其逻辑层和视图层是分离的，两层之间通信交互会有折损，导致诸如跟手滑动不流畅。uni ui在底层会利用wxs等技术，把适当的js代码运行在视图层，减少通信折损，保证诸如swiperAction左滑菜单等跟手操作流畅顺滑
  - 很多ui组件是会一直动的，比如轮播图、跑马灯。即便这个窗体被新窗体挡住，它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上，背景操作ui会引发很严重的性能问题，造成前台界面明显卡顿。而uni ui的组件，会自动判断自己的显示状态，在组件不再可见时，不会再做动画消耗硬件资源。
  - uni ui的引用、开发都是纯vue方式。而小程序组件的引用注册、开发都是小程序语法，两种语法混合在一个工程，写的也不舒服，维护也麻烦。
    - 注释：引入小程序组件需要在 pages.json 中为引入页面设置 usingComponents 属性
  - 与uni统计自动整合：比如使用uni ui的导航栏（标题栏）组件，就不需要写统计的自定义事件来触发页面标题上报。uni统计会自动识别导航栏组件的标题。类似的，收藏组件、购物车组件，都可以免打点直接使用。
    - 注释：uni统计即埋点
  - 支持datacom规范，云端一体全部封装掉
    - 注释：datacom 就是把数据遍历组件封装成一个自定义组件供外部使用，还包含了数据规范，能够实现云端一体封装
  - 支持uni_module规范，方便插件的更新
为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中，支持语法和转换效果见下：
- 注释：compiler 硬编码是指获取表达式的结果进行赋值
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
- 注释：在蒙版上绑定这个事件

// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件

	{

		click: 'tap',

		touchstart: 'touchstart',

		touchmove: 'touchmove',

		touchcancel: 'touchcancel', // 触屏行为意外取消

		touchend: 'touchend', // 触屏行为结束

		tap: 'tap',

		longtap: 'longtap', //推荐使用longpress代替，longpress会阻止tap事件触发

		input: 'input',

		change: 'change',

		submit: 'submit',

		blur: 'blur',

		focus: 'focus',

		reset: 'reset',

		confirm: 'confirm', // 用户点击模态对话框的确定按钮时

		columnchange: 'columnchange', // 多列选择器其中一列被选中

		linechange: 'linechange', // 多行输入框中行数出现变化时

		error: 'error', // 脚本错误时

		scrolltoupper: 'scrolltoupper', // scrollView 组件滚动到顶部或最左边时

		scrolltolower: 'scrolltolower',

		scroll: 'scroll'

	}

vue语法-vue2-vuex

注释：vuex在uniapp中的使用没有需要特殊处理的地方
你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 add 的 mutation 时，调用此函数”，要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法。
- 注释：实用 store.commit 的方法调用 mutation 可能是为了在 Vue Devtools 的 TimeLine 选项卡中留下操作记录
store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise
action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters
注释：uniapp中没有关于module的介绍，不知道是否可用。
注释：vuex中如果没有开启namespaced的话，module中的getters、actions、mutations是注册在全局的，但是只能操作当前module中的state
注释：开启namespaced后，getters通过参数3、4来操纵全局的state和getter。action中通过context中的dispatch, commit增加第3个参数和 rootGetters来操作全局的
注释：mutations 和 action 允许接收参数
注释：getters允许返回函数

vue语法-vue2-组合式 API

@vue/composition-api 当前版本并无 expose 方法
- 注释：@vue/composition-api 提供了 setup(p,ctx) 的支持，但还不支持 ctx.expose 方法
- 注释：expose 函数用于显式地定义和暴露组件的公共接口
在 vue.config.js 配置 ScriptSetup 插件，以下为基础配置，其他具体配置请参考 unplugin-vue2-script-setup
- 注释：vue-tsc是对TypeScript自身命令行界面tsc的一个封装，专门用于Vue单文件组件（.vue文件）的TypeScript类型检查。
- 注释：fork-ts-checker是一个webpack插件，它会在打包时fork出一个进程并行进行检查，可以更好的利用多核cpu的能力，过程中几乎不影响webpack主进程，故可以优化速度。
- 注释：下例中 ScriptSetup 配置实现了插件和ts共同使用的情况，需要安装 @vue/cli-plugin-typescript vue-tsc 两个依赖，然后修改 package.json 中的命令

const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default

module.exports = {

  parallel: false,

  configureWebpack: {

    plugins: [

      ScriptSetup({ /* options */ }),

    ],

  },

  chainWebpack (config) {

    // disable type check and let `vue-tsc` handles it 禁用类型检查，让 vue-tsc 处理它，在package.json中"build": "vue-tsc --noEmit && vue-cli-service build"

    config.plugins.delete('fork-ts-checker')

  },

}

即使不与 Script Setup 一同使用但项目为 HBuilderX 创建的工程时，由于 HBuilderX 内置TypesSript插件当前版本较低，也需要禁用默认的类型检查
- 注释：这是在黑 HBuilderX 吗

vue语法-vue3-基础

性能比Vue2快1.2~2倍(diff方法优化、静态提升、时间侦听器缓存、ssr渲染)
- 注释：时间侦听器缓存应该是事件侦听器，这是个文档错误，在Vue3中，当组件重新渲染时，如果事件处理函数没有变化，Vue会复用之前的事件侦听器，而不会重新创建。这样可以避免不必要的内存分配和垃圾回收，提高应用程序的性能。
在HBuilderX中，敲vdata代码块，可以快捷生成data的代码结构。
HBuilderX里敲vmethods代码块，也可以生成相应结构。
uni-app 项目支持 vue 3.0介绍，及升级指南
- vue3 响应式基于 Proxy 实现，不支持iOS9和ie11
注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换。
- 疑问？
tyle 的数组语法可以将多个样式对象应用到同一个元素上
- 注释：vue官方支持
可以用 v-for 来遍历一个对象的 property
- 注释：vue官方支持
- 在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它在不同 JavaScript 引擎下的结果都一致。
结合 <template v-for>
- 在Vue3中，key 则应该被设置在 <template> 标签上
- 注释：在vue2中key不允许绑定在 template 上，因为 vue3 支持 template 拥有多个根节点，把 key 绑定在 template 上代表这些根节点要复用
当在组件上使用 v-for 时，key是必须的。

注释：vue2不是必须的，Vue 3对列表渲染进行了改进，并引入了更高效的更新策略
当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量
- 注释：在vue2中，v-for的优先级高于v-if
事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<button @click="one($event); two($event)">

  Submit

</button>

vue语法-vue3-组件

这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值：
- 注释：这里是像说话在data中是可以访问props接收到的数据的

	<template>

		<view>

			<!-- 我是子组件componentA -->

			<view>{{myTitle}}</view>

		</view>

	</template>

	<script>

		export default {

			props: ['title'],

			data() {

				return {

					myTitle:this.title

				}

			}

		}

	</script>

甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：

	<current-user v-slot="{ user = { firstName: 'Guest' } }">

		{{ user.firstName }}

	</current-user>

vue语法-vue3-API

config 是一个包含了 Vue 应用全局配置的对象。你可以在应用挂载前修改其以下 property
- globalProperties 添加可以在应用程序内的任何组件实例中访问的全局 property（vue3独有）
- isCustomElement 指定一个方法，用来识别在 Vue 之外定义的自定义元素（vue3独有）
  - 注释：vue3官方文档：app.config.compilerOptions.isCustomElement
调用 createApp 返回一个应用实例。该实例提供了一个应用上下文。应用实例挂载的整个组件树共享相同的上下文，该上下文提供了之前在 Vue 2.x 中“全局”的配置。

import { createApp } from 'vue'

const app = createApp({})

选项/Data
- emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，或者对象作为替代，允许配置和事件验证。
实例方法
- $forceUpdate 迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
响应性基础 API
- reactive
  - 注释：当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包。const books = reactive([ref('Vue 3 Guide')])
  - 注释：将一个 ref 赋值给一个 reactive 属性时，该 ref 会被自动解包
- readonly 接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。
  - 注释：只读代理是深层的，它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。
  - 注释：只是返回一个在set方法被调用时抛出错误的 proxy，保留原对象响应性和关联的原始值。即原对象被修改，该只读对象也会被修改，并触发响应。
- isProxy 检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理
- isReactive 检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。
- isReadonly 检查传入的值是否为只读对象。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。
- toRaw 根据一个 Vue 创建的代理返回其原始对象。
- markRaw 将一个对象标记为不可被转为代理。返回该对象本身。
  - 有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。
  - 当呈现带有不可变数据源的大型列表时，跳过代理转换可以提高性能。
- shallowReactive reactive() 的浅层作用形式。
- shallowReadonly readonly() 的浅层作用形式
Refs
- ref
  - 注释：如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。
- unref 如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。
- toRef 可以将值、refs 或 getters 规范化为 refs (3.3+)。也可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
  - 注释：当你想从响应式对象中提取某个属性，但仍希望保持与原始属性的同步时，toRef() 非常有用。
- toRefs 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
  - 注释：获取响应对象的原始对象，创建一个空对象，然后遍历原始对象的顶层key,通过ref()包装对应的value后在赋值给空对象
- isRef 检查某个值是否为 ref
- shallowRef 和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。
  - 注释：常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。
- triggerRef 强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。
  - 注释：const shallow = shallowRef({}); triggerRef(shallow)
- customRef 创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
  - 注释：见 customRef 例子，用来定义传入对象的 get 和 set 方法，及依赖追踪和更新触发

import { customRef } from 'vue'

export function useDebouncedRef(value, delay = 200) {

  let timeout

  return customRef((track, trigger) => {

    return {

      get() {

        // 依赖追踪

        track()

        return value

      },

      set(newValue) {

        clearTimeout(timeout)

        timeout = setTimeout(() => {

          value = newValue

          // 更新追踪

          trigger()

        }, delay)

      }

    }

  })

}

Computed 与 watch
- computed
  - 注释：参数1可以是函数或{get,set}对象，参数2为 DebuggerOptions 对象，包含 onTrack 和 onTrigger 属性
- watchEffect 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
  - 注释：第一个参数支持异步函数，该函数的参数1可以设置其他异步函数直接 reject，结束它们的等待
  - 注释：第二个参数是一个可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖。
    - flush?: 'pre' | 'post' | 'sync' 侦听器将在组件渲染之前执行。默认 pre
      - 注释：默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
      - 设置 flush: 'post' 将会使侦听器延迟到组件渲染之后再执行。后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()
      - 在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器。这可以通过设置 flush: 'sync' 来实现。然而，该设置应谨慎使用，因为如果有多个属性同时更新，这将导致一些性能和数据一致性的问题。
    - onTrack
      - 侦听器的 onTrack 和 onTrigger 选项仅会在开发模式下工作
      - 注释：当响应式属性或 ref 被追踪为依赖时调用
      - 注释：接收到一个参数，onTrigger也一样
    - onTrigger
      - 注释：当 watcher 的回调因依赖改变而触发时调用
- watch 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
  - 第一个参数是侦听器的源。这个来源可以是以下几种：
    - 一个函数，返回一个值。
    - 一个 ref
    - 一个响应式对象。
    - 由以上类型的值组成的数组
  - 第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。
    - 在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象
    - 当直接侦听一个响应式对象时，侦听器会自动启用深层模式：
  - 第3个参数
    - watch() 和 watchEffect() 享有相同的刷新时机和调试选项：
组合式 API
- Inject
  - 注释：第二个参数是可选的，即在没有匹配到 key 时使用的默认值。
  - 注释：第二个参数也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。
  - 注释：在这种情况下，你必须将 true 作为第三个参数传入，表明这个函数将作为工厂函数使用，而非值本身。
- getCurrentInstance
  - 注释：vue3官网没有该api

vue语法-vue3-状态管理Vuex

从 Vue 3.0 开始，getter 的结果不再像计算属性一样会被缓存起来。
- 注释：vue 3.0 的 getter 不像 vue2 的计算属性存在缓存，这个问题在 vue 3.2被修复了

vue语法-vue3-状态管理 Pinia

uni-app 内置了 Pinia 。Vue 2 项目暂不支持
在 main.js 中编写以下代码

import { createSSRApp } from 'vue';

import * as Pinia from 'pinia';

export function createApp() {

	const app = createSSRApp(App);

	app.use(Pinia.createPinia());

	return {

		app,

		Pinia, // 此处必须将 Pinia 返回

	};

}

首先创建一个 Store：

// stores/counter.js

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {

	state: () => {

		return { count: 0 };

	},

	// 也可以这样定义

	// state: () => ({ count: 0 })

	actions: {

		increment() {

			this.count++;

		},

	},

});

然后在组件中使用它：
- 注释：在Pinia中，counter.$patch是一种用于修改store中状态的方法。它接受一个对象或一个函数作为参数，用于更新store中的状态。
- 注释：当传入一个对象时，该对象的属性将用于更新store中的对应状态。例如，counter.$patch({ count: counter.count + 1 })将会使count的值增加1。
- 注释：当传入一个函数时，该函数的参数为当前的store状态，函数返回一个新的状态对象用于更新store。例如，counter.$patch(state => ({ count: state.count + 1 }))同样会使count的值增加1。
- 注释：pina没有mutations概念，action即可以执行同步操作也可以执行异步操作

<script setup>

import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

counter.count++

// 自动补全！

counter.$patch({ count: counter.count + 1 })

// 或使用 action 代替

counter.increment()

</script>

<template>

  <!-- 直接从 store 中访问 state -->

  <div>Current Count: {{ counter.count }}</div>

</template>

为实现更多高级用法，你甚至可以使用一个函数 (与组件 setup() 类似) 来定义一个 Store

export const useCounterStore = defineStore('counter', () => {

	const count = ref(0);

	function increment() {

		count.value++;

	}

	return { count, increment };

});

如果你还不熟悉 setup() 函数和组合式 API，Pinia 也提供了一组类似 Vuex 的映射 state 的辅助函数

const useCounterStore = defineStore('counter', {

  state: () => ({ count: 0 }),

  getters: {

    double: (state) => state.count * 2,

  },

  actions: {

    increment() {

      this.count++

    },

  },

})

const useUserStore = defineStore('user', {

  // ...

})

// 使用

import { mapState, mapStores, mapActions } from 'pinia'

export default defineComponent({

  computed: {

    // 其他计算属性

    // ...

    // 允许访问 this.counterStore 和 this.userStore

    ...mapStores(useCounterStore, useUserStore)

    // 允许读取 this.count 和 this.double

    ...mapState(useCounterStore, ['count', 'double']),

  },

  methods: {

    // 允许读取 this.increment()

    ...mapActions(useCounterStore, ['increment']),

  },

})

什么是编译器

vue3和vite双向加持，uni-app性能再次提升
- 在小程序平台，新版uni-app也扩展了更多的语法
  - 更完善的模板语法支持（如 class、style 支持函数、变量等，不再局限数组、对象类型）
  - 更完整的 props 支持（如传递函数）
  - 更完善的 slot 支持（如作用域插槽）
- 注释：Vite在开发模式下使用ESBuild进行代码编译，而在生产模式下使用Rollup进行打包和编译

跨域

App、小程序等非H5平台，是不涉及跨域问题的。稍微例外的是iOS的wkWebview，在5+App，或uni-app的web-view组件及renderjs中，由于WKWebview限制也会产生跨域
注释：借助mocker-api和mockjs这两个工具，直接配置devServer的before选项，可以用来向本地服务器注入接口及返回的数据

宽屏适配

pages.json（全局文件-pages.json 页面路由-章节)
- | leftWindow | Object | 否 | 大屏左侧窗口 | H5 |
  - uni-app 2.9+ 新增，同 topWindow
- | topWindow | Object | 否 | 大屏顶部窗口 | H5 |
  - uni-app 2.9+ 新增
  - | path | String | | 配置页面路径 |
  - | style | Object | | 配置页面窗口表现，配置项参考下方 pageStyle |
    - 目前 style 节点仅支持配置 width，height 等 css 样式相关属性
    - 注释：具体内容参考pages.json中pages[n].style中的内容
  - | matchMedia | Object | | 配置显示该窗口的规则，配置项参考下方 matchMedia |
    - | minWidth | Number | 768 | 当设备可见区域宽度 >= minWidth 时，显示该 window |
- | rightWindow | Object | 否 | 大屏右侧窗口 | H5 |
  - uni-app 2.9+ 新增，同 topWindow
如果需求当存在 topwindow 时，自动隐藏页面的 navigationBar，根据需求不同在App.vue中配置如下 css：（全局文件-pages.json 页面路由-章节)
- 注释：pages/component/view/view应该中间页面的路径，头部导航栏位于中间页面中

/* 隐藏路径为 pages/component/view/view 页面的 navigationBar */

.uni-app--showtopwindow [data-page="pages/component/view/view"] uni-page-head {

	display: none;

}

注释：可以在pages.json的pages[n].style中配置每个也是是否显示leftWindow等
页面窗体级适配方案：leftWindow、rightWindow、topWindow
- 以目前手机屏幕为主window，在左右上，可新扩展 leftWindow、rightWindow、topWindow，这些区域可设定在一定屏幕宽度范围自动出现或消失。这些区域各自独立，切换页面支持在各自的window内刷新，而不是整屏刷新。
- 目前的leftWindow、rightWindow、topWindow 只支持web端。计划后续在Pad App上实现该配置。小程序无法支持该配置。
- 如果在 PC 上不想显示 tabbar 页面可以参考 hello-uniapp，在 app 的首页加载时跳转一个非tabbar 页, hello-uniapp 的隐藏 tabbar 不是媒体查询实现的，当前页不是 tabbar 页面（是pages/component/view/view页），所以没有显示tabbar。
- 如果是想在有 leftwindow 等窗体的时候，隐藏 tabar 页面的 tabbar，可以在 App.vue中配置如下 css（好处是可以和leftwindow等窗体联动）.uni-app--showleftwindow + .uni-tabbar-bottom { display: none; }
  - 注释：底部导航栏和应用是兄弟关系

{

  "globalStyle": {

  },

  "topWindow": {

    "path": "responsive/top-window.vue", // 指定 topWindow 页面文件

    "style": {

      "height": "44px"

    }

  },

  "leftWindow": {

    "path": "responsive/left-window.vue", // 指定 leftWindow 页面文件

    "style": {

      "width": 300

    }

  },

  "rightWindow": {

    "path": "responsive/right-window.vue", // 指定 rightWindow 页面文件

    "style": {

      "width": "calc(100vw - 400px)" // 页面宽度

    },

    "matchMedia": {

      "minWidth": 768 //生效条件，当窗口宽度大于768px时显示

    }

  }

}

注释：接上面
- responsive/right-window.vue 只需要引入之前的详情页面组件（详情页面/pages/detail/detail可自动转化为pages-detail-detail组件使用）

<!--responsive/right-window.vue-->

<template>

  <view>

    <!-- 这里将 /pages/detail/detail.nvue 页面作为一个组件使用 -->

    <!-- 路径 “/pages/detail/detail” 转为 “pages-detail-detail” 组件 -->

    <pages-detail-detail ref="detailPage"></pages-detail-detail>

  </view>

</template>

<script>

  export default {

    created(e) {

      //监听自定义事件，该事件由详情页列表的点击触发

      uni.$on('updateDetail', (e) => {

        // 执行 detailPage组件，即：/pages/detail/detail.nvue 页面的load方法

        this.$refs.detailPage.load(e.detail);

      })

    },

    onLoad() {},

    methods: {}

  }

</script>

// pages/news/news-page.nvue

goDetail(detail) {

	if (this._isWidescreen) { //若为宽屏，则触发右侧详情页的自定义事件，通知右侧窗体刷新新闻详情

		uni.$emit('updateDetail', {

			detail: encodeURIComponent(JSON.stringify(detail))

		})

	} else { // 若为窄屏，则打开新窗体，在新窗体打开详情页面

		uni.navigateTo({

			url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))

		});

	}

},

组件级适配方案：match-media组件
- 在match-media组件中放置内容，并为组件指定一组 media query 媒体查询规则，如屏幕宽度。运行时，如屏幕宽度满足查询条件，这个组件就会被展示，反之则隐藏。
响应式布局组件：uni-row
- 注释：详情看组件 uni-row
内容缩放拉伸的处理
- 在uni-app 2.9+起，新增了 rpx 按750px做基准屏宽的生效范围控制，并且将 rpx 的默认最大适配宽度设为了 960 px
- 按如下配置，在超过960宽的屏幕上，会按375px作为基准宽度，这是最大程度上保持界面不失真的策略。
- rpxCalcIncludeWidth，设置某个特定数值不受rpxCalcMaxDeviceWidth约束。如上述例子中的"rpxCalcIncludeWidth": 750，代表着如果写了 750rpx，始终将按屏幕宽度百分百占满来计算。

{

  "globalStyle": {

    "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960

    "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375

    "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750

  },

}

使用三方已经写好的单位转换库

// postcss.config.js

const path = require('path')

module.exports = {

  parser: 'postcss-comment', // 注释：postcss-comment是一个PostCSS插件，主要用于在CSS中添加注释。parser用于定义postcss的解析器

  plugins: {

    'postcss-import': {

      resolve(id, basedir, importOptions) {

        if (id.startsWith('~@/')) {

          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))

        } else if (id.startsWith('@/')) {

          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))

        } else if (id.startsWith('/') && !id.startsWith('//')) {

          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))

        }

        return id

      }

    },

    'autoprefixer': {

      overrideBrowserslist: ["Android >= 4", "ios >= 8"],

      remove: process.env.UNI_PLATFORM !== 'h5'

    },

    // 借助postcss-px-to-viewport插件，实现rpx转px，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md

    // 以下配置，可以将rpx转换为1/2的px，如20rpx=10px，如果要调整比例，可以调整 viewportWidth 来实现

    'postcss-px-to-viewport': {

      unitToConvert: 'rpx',

      viewportWidth: 200,

      unitPrecision: 5,

      propList: ['*'],

      viewportUnit: 'px',

      fontViewportUnit: 'px',

      selectorBlackList: [],

      minPixelValue: 1,

      mediaQuery: false,

      replace: true,

      exclude: undefined,

      include: undefined,

      landscape: false

    },

    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}

  }

}

有了宽屏适配，uni-app的应用就可以方便的通过electron打包为电脑客户端应用

SSR 服务端渲染(略）

前端网页托管(略）

nvue原生渲染-综述

虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果你不开发 App，那么不需要使用 nvue。
Android 端良好支持边框阴影
iOS 端支持高斯模糊
webview 的页面级长列表滚动是没有性能问题的
页面中某个区域做长列表滚动，则需要使用 nvue 的list、recycle-list、waterfall等组件。这些组件的性能要高于 vue 页面里的区域滚动组件scroll-view
- 注释：性能排行recycle-list > list
- 注释：waterfall用于滚动加载
引擎内置的下拉刷新样式只有雪花和 circle 圈 2 种样式。如果你需要自己做复杂的下拉刷新，推荐使用 nvue 的 refresh 组件
左右拖动的长列表。推荐使用 nvue，比如新建 uni-app 项目时的新闻示例模板
- 注释：左右拖动查看已经加载的数据，还可下拉刷新的列表。
- 未读
实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果，效果可参考 hello uni-app 模板里的swiper-list。
- 注释：tabs左右滚动，吸顶显示，下方列表上下滚动
- 未读
如需要将软键盘右下角按钮文字改为“发送”，则需要使用 nvue。比如聊天场景，除了软键盘右下角的按钮文字处理外，还涉及聊天记录区域长列表滚动，适合 nvue 来做。
解决前端控件无法覆盖原生控件的层级问题。当你使用map、video、live-pusher等原生组件时，会发现前端写的view等组件无法覆盖原生组件，层级问题处理比较麻烦，此时使用 nvue 更好。或者在 vue 页面上也可以覆盖一个 subnvue（一种非全屏的 nvue 页面覆盖在 webview 上），以解决 App 上的原生控件层级问题。
- 注释：一个页面是允许同时存在原生渲染和webview渲染的。
- 注释：vue页面允许引入nvue组件，这个组件会使用原生渲染。在nvue页面允许引入vue组件，这个组件采用webview渲染？
如深度使用map组件，建议使用 nvue。除了层级问题，App 端 nvue 文件的 map 功能更完善，和小程序拉齐度更高，多端一致性更好。
如深度使用video，建议使用 nvue。比如如下 2 个场景：video 内嵌到 swiper 中，以实现抖音式视频滑动切换
nvue 的视频全屏后，通过cover-view实现内容覆盖，比如增加文字标题、分享按钮。
直播推流：nvue 下有live-pusher组件，和小程序对齐，功能更完善，也没有层级问题
对 App 启动速度要求极致化。App 端如果首页使用 nvue 且在 manifest 里配置 fast 模式，那么 App 的启动速度可以控制在 1 秒左右。而使用 vue 页面的话，App 的启动速度一般是 3 秒起，取决于你的代码性能和体积。
canvas。nvue 的 canvas 性能不高，尤其是 Android App 平台，所以这个组件干脆没有内置，而是需要单独引入。操作 canvas 动画，最高性能的方式是使用 vue 页面的 renderjs 技术，在 hello uni-app 里的 canvas 示例就是如此。
动态横竖屏。nvue 页面的 css 不支持媒体查询，所以横竖屏动态切换、动态适配屏幕是很困难的。
- 注释：dynamicRpx 在 pages.json 中配置，启用后在 app-nvue 页面 rpx 单位会在屏幕大小变化后重新计算
- 注释：pages.josn中的pageOrientation用于配置横竖屏时的响应方式。
整理到这里
在 manifest.json 源码视图的"app-plus"下配置"renderer":"native"，即代表 App 端启用纯原生渲染模式。
- 启用纯原生渲染模式，可以减少 App 端的包体积、减少使用时的内存占用。因为 webview 渲染模式的相关模块将被移除。
app自带的web-view组件，是页面中新插入的一个子webview。获取该对象的方法见：（页面章节）
- uni-app可以调用plus的api操作扩展能力，这块很简单，在app的条件编译里直接写就好了，也不需要plus ready。
vue3 支持的范围是：Android > 4.4（具体因系统 webview 版本而异，原生安卓系统升级过系统 webview 一般 5.0 即可，国产安卓系统未使用 x5 内核时一般需 7.0 以上）, ios >= 10(教程-vue2 升 3 指南章节)
- Android < 4.4，配置 X5 内核支持，首次需要联网下载，可以配置下载 X5 内核成功后启动应用。详情见全局文件章节
- 注释：X5 内核是腾讯开发的 webview 内核

组件与WXS

uni-app v3.0.0-alpha-3090220231010001的更多相关文章

Android 百度地图 SDK v3.0.0 （三）添加覆盖物Marker与InfoWindow的使用
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37737213 上篇博客已经实现了地图的定位以及结合了方向传感器用户路痴定位方向, ...
Android 百度地图 SDK v3.0.0 （一）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37729091 最近公司要把百度地图集成的项目中,于是我就研究了一天百度地图的SD ...
Android 百度地图 SDK v3.0.0 （三）加入覆盖Marker与InfoWindow使用
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/37737213 上篇博客已经实现了地图的定位以及结合了方向传感器用户路痴定位方向, ...
kubeSphere v3.3.0+kubernetes v1.22.10 集群部署
概述 KubeSphere 是 GitHub 上的一个开源项目,是成千上万名社区用户的聚集地.很多用户都在使用 KubeSphere 运行工作负载.对于在 Linux 上的安装,KubeSphere ...
FineUI（专业版）v3.2.0 发布（ASP.NET UI控件库）！
+2016-08-20 v3.2.0 +表格增强. +表格列RenderField增加属性ClientHtmlEncode,用于在客户端进行HTML编码. -增加示例:单元格编辑->杂项-> ...
FineUI（专业版）v3.0.0 发布，手机、平板和桌面全支持！
FineUI(专业版)v3.0.0 已经正式发布,全面支持手机.平板和桌面! 自 2008 年 4 月发布第一个版本,我们持续更新了 126 个版本,拥有 16000 多位注册用户,130 ...
STM32启动文件详细解析（V3.5.0）以:startup_stm32f10x_hd.s为例
我用的是IAR,这个貌似是MDK的,不过很有用,大家可以看一下 ;* 文件名 : startup_stm32f10x_hd.s ;* 库版本 : V3.5.0 ;* 说明: 此文件为STM32F10x ...
The specified framework 'Microsoft.NETCore.App', version '1.0.1' was not found 解决办法
环境:Centos 7 已经下载安装.NET Core 1.1 Microsoft .NET Core Shared Framework Host Version : Build : 928f77c4 ...
30天，APP创业从0到1【7.26苏州站】
活动概况时间:2015年7月26日13:30-16:30 地点:创客巢(苏州吴中区玉山路646号金枫广告产业园B栋4楼) 主办:APICloud.融云.鱼多多网址:www.apicloud.com ...
30天，APP创业从0到1【7.25上海站】
活动概况时间:2015年7月25日13:30-16:30 地点:太库•上海孵化器(张江金科路2889号长泰广场c座12楼) 主办:APICloud.诸葛.圣诺资讯联合主办:微链.太库•上海孵化器 ...

随机推荐

C语言数据类型转换（自动类型转换+强制类型转换）
自动类型转换 1) 将一种类型的数据赋值给另外一种类型的变量时就会发生自动类型转换,例如: float f = 100; int n = f; f 是 float 类型的数据,需要先转换为 int 类 ...
Django 通过自定义context_processors实现自定义tag
通过自定义context_processors实现自定义tag by:授客 QQ:1033553122 测试环境 Win7 Django 1.11 实践步骤1 应用根目录下,新建自定义context ...
C# 12 新增功能实操！
前言今天咱们一起来探索并实践 C# 12 引入的全新功能! C#/.NET该如何自学入门? 注意:使用这些功能需要使用最新的 Visual Studio 2022 版本或安装 .NET 8 SDK ...
使用with 还是 join
用分解关联查询的方式查询具有以下优势:多次单表查询,让缓存的效率更高:许多应用程序可以方便地缓存单表查询对应的结果对象.对 MYSQL 的查询缓存来说,如果关联中的某个表发生了变化,那么就无法使用查询 ...
docker 容器迁移到其他机器
docker 容器迁移到其他机器思路为:容器转为镜像,再保存为镜像文件,迁移到其他机器后导入为镜像 1.commit:将容器转镜像 # docker commit {container_id} {镜像 ...
java srpint boot 2.2.1 第二部份，乐观锁机制，构造复杂查询条件，分页查询相关内容，删除与软删除
第二部份,引起锁机制的原理和解决方案: 测试环境搭建第一步先建一个数据库表用于模拟商品购买. CREATE TABLE product ( id INT AUTO_INCREMENT PRIMARY ...
嵌入式开发SQLite 快速掌握
SQLite是什么 SQLite又称(RDBMS)它是本地数据库,可以用在手机,嵌入式设备的精简数据库和大名的mysql 一样的数据库存,只是可以理解为它是精简版,事务处理.表连接.索引.触发器等都 ...
linux的一些常用端口
hdfs:9870 yarn:8088 sparkMaster的端口是:8080 worker的端口是:8081 历史服务器的默认端口是: 18080
题解 CF741E Arpa’s abnormal DNA and Mehrdad’s deep interest
CF741E Arpa's abnormal DNA and Mehrdad's deep interest 记 $R_{i}$ 表示把 $T$ 插入在 $S$ 的第 $i$ 位后组成 ...
《最新出炉》系列初窥篇-Python+Playwright自动化测试-58 - 文件下载
1.简介前边几篇文章讲解完如何上传文件,既然有上传,那么就可能会有下载文件.因此宏哥就接着讲解和分享一下:自动化测试下载文件.可能有的小伙伴或者童鞋们会觉得这不是很简单吗,还用你介绍和讲解啊,不说就 ...

uni-app v3.0.0-alpha-3090220231010001

https://uniapp.dcloud.net.cn/tutorial/

未分类

视图层js（自定义的章节用于整理）

全局文件

pages.json 页面路由

manifest.json 应用配置

组件

组件概述

view

cover-view

navigation-bar

editor

swiper

waterfall

picker

scroll-view

recycle-list

rich-text

live-pusher

Barcode

list

map

refresh

web-view

API

页面和路由

页面通讯

教程

应用（自定义的章节用于整理）

页面

js语法

css语法

css语法

vue2（自定义的章节用于整理）

vue3（自定义的章节用于整理）

条件编译处理多端差异

环境变量

小程序（自定义的章节用于整理）

概念简介

工程

vue语法-vue2-基础

vue语法-vue2-vuex

vue语法-vue2-组合式 API

vue语法-vue3-基础

vue语法-vue3-组件

vue语法-vue3-API

vue语法-vue3-状态管理Vuex

vue语法-vue3-状态管理 Pinia

什么是编译器

跨域

宽屏适配

SSR 服务端渲染(略）

前端网页托管(略）

nvue原生渲染-综述

组件与WXS

uni-app v3.0.0-alpha-3090220231010001的更多相关文章

随机推荐

热门专题