uni-app（未完）

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

什么是 uni-app

• mpvue 是一个使用 Vue.js 开发小程序的前端框架。
  

快速上手

通过 HBuilderX 可视化界面

• 目前开发App也需要安装微信开发者工具
• 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。
• 支付宝/百度/字节跳动/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开。
• 在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录
• 注释：app需要证书，Android证书的生成是自助和免费的，不需要审批或付费。
• 注释：小程序需要AppID

通过vue-cli命令行

• 创建uni-app
  • 注释：alpha 版是 HBuilderX 的先行版本
  • 注释：-p是指忽略提示符并使用已保存的或远程的预设选项

vue create -p dcloudio/uni-preset-vue my-project

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

• 会提示选择项目模板
  • 选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName
  • 注释：支持其他模板地址
• 运行、发布uni-app，%PLATFORM% 可取值如下：
  • app-plus app平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作）
  • h5
  • mp-alipay 支付宝小程序
  • mp-baidu 百度小程序
  • mp-weixin 微信小程序
  • mp-toutiao 字节跳动小程序
  • mp-qq qq 小程序
  • mp-360 360 小程序
  • mp-kuaishou 快手小程序
  • quickapp-webview 快应用(webview)
  • quickapp-webview-union 快应用联盟
  • quickapp-webview-huawei 快应用华为
  • 可以自定义更多条件编译平台，比如钉钉小程序

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

• 快应用有两种开发方式，uni-app均支持：
  • 类小程序webview渲染方式
  • 原生渲染方式
• 目前使用npm run build:app-plus会在/dist/build/app-plus下生成app打包资源。如需制作wgt包，将app-plus中的文件压缩成zip（注意：不要包含app-plus目录），再重命名为${appid}.wgt， appid为manifest.json文件中的appid。
  • 注释：wgt包，热更新包
• dev 模式编译出的各平台代码存放于根目录下的 /dist/dev/目录，打开各平台开发工具选择对应平台目录即可进行预览（h5 平台不会在此目录，存在于缓存中）；
• build 模式编译出的各平台代码存放于根目录下的 /dist/build/ 目录，发布时选择此目录进行发布；
• 使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别
  • cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行 npm update，或者手动修改 package.json 中的 uni 相关依赖版本后执行 npm install。更新后可能会有新增的依赖并不会自动安装，手动安装缺少的依赖即可。
  • 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
  • cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。
  • cli创建的项目，内置了d.ts。使用HBuilderX创建的项目不带d.ts，HBuilderX内置了uni-app语法提示库。如需把HBuilderX创建的项目在其他编辑器打开并且补充d.tsnpm i @types/uni-app -D

如何学习

• 视频：《uni-app官方教程》

  • 产品介绍
    • 组件、api与微信小程序一致（所有端）
      • 备注：api应该只包含了小程序通用api
    • 内嵌mpvue（所有端）
      • 疑问：是代表可以兼容mpvue的开发规范？
    • 支持微信小程序自定义组件和SDK（其他小程序+H5端除外其他都兼容）
      • 疑问：SDK是指微信小程序原生开发的东西在uni-app中使用？
    • HTML5Plus:跨ios和Android的JS增强引擎（只支持APP端）
      • 注释：跨两端的api，只包含常用的
    • nvue:一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力（只支持APP端）
      • 注释：要怎么从代码区分是使用原生渲染还是webview渲染
    • 本地html及dom支持（只支持APP端）
      • 疑问：在新的功能框架图中已经不存在，应该是已经废弃不再支持
    • native.js：用js调用原生api，对于HTML5Plus的补充（分ios和Android端）
    • 原生sdk：用原生写代码，然后在uni-app中引用（分ios和Android端）
    • 微信小程序插件（微信小程序）
    • 微信专有api（微信小程序）
    • 其他小程序专有API
    • H5平台专有API
    • 条件编译，根据不同平台编译
  • 快速上手
    • manifest.json：APP项目、微信小程序的配置中心
    • static：静态文件必须放这
    • pages.json：配置页面的路由关系和导航条选项卡等
      • 其内pages数组内的第一个对象作为页面的启动页
    • 疑问：可以使用compostion-api吗？
    • 推荐flex布局，支持@import语法
    • 1px代表一个物理像素，1upx代表1/750之一屏幕宽度（可能代表2个物理像素）
      • 动态绑定的样式中不支持upx单位
    • uni-app组件快捷键是由u开头的
    • 条件判断中MP-WEIXIN代表所有小程序
    • 扩展了vue的声明周期，补充了应用生命周期和页面生命周期
  • 项目实战
    • uni.navigateTo路由跳转的url是指需要跳转到的文件路径，而不是html中的url
      • 参数传递跟url一样，在url后跟随?和键值对
      • 在onLoad生命周期参数e中获取参数
    • 通过绑定自定义属性data-来传递数据，通过事件的e.currentTarget.dataset来获取
    • rich-text组件代替了v-html指令
      • 疑问：使用到的标签支持html标签吗
    • pages.json中condition用于开发模式下配置打开时显示的页面
      • 微信开发者工具-工具-编译匹配，选择condition配置好的项

• 看完这篇白话uni-app(https://ask.dcloud.net.cn/article/35657)

  • 全局样式，在根目录下的app.vue里写入，每个页面都会加载app.vue里的样式。
  • 下为html标签和uni-app内置组件的映射表：
    • div 改成 view
    • span、font 改成 text
    • a 改成 navigator
    • img 改成 image
    • input 仅仅是输入框。
      • 原html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。
      • 在uni-app和小程序规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API：radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。
    • form、button、label、textarea、canvas、video 这些还在。
    • select 改成 picker
    • iframe 改成 web-view
    • ul、li没有了，都用view替代。做列表一般使用uList组件
    • audio 不再推荐使用，改成api方式，背景音频api文档
  • 新增了一批手机端常用的新组件
    • scroll-view 可区域滚动视图容器
    • swiper 可滑动区域视图容器
    • icon 图标
    • rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）注释：渲染 html
    • progress 进度条
    • slider 滑块指示器
    • switch 开关选择器
    • camera 相机
    • live-player 直播
    • map 地图
    • cover-view 可覆盖原生组件的视图容器
      • cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，则需要使用cover-view组件。
  • 浏览器专用的window、document、navigator、location对象，包括cookie等存储，只有在浏览器中才有，app和小程序都不支持。
  • 在uni-app的各个端中，除了h5端，其他端的js都运行在一个独立的v8引擎下，不是在浏览器中，所以浏览器的对象无法使用。
  • web-view组件，里面可以加载标准HTML，这种页面仍然支持浏览器专用对象window、document、navigator、location。
  • 如上述示例代码中的onload()，称为生命周期。在普通vue页面里的生命周期叫页面生命周期。在项目根目录的app.vue文件中的生命周期叫应用生命周期。
  • css选择器有2个变化：*选择器不支持；元素选择器里没有body，改为了page。
  • 单位方面
    • px无法动态适应不同宽度的屏幕
    • rem无法用于nvue/weex。
    • 如果想使用根据屏幕宽度自适应的单位，推荐使用rpx，全端支持。（注释：以改为upx）
  • uni-app推荐使用flex布局，这个布局思路和传统流式布局有点区别。但flex的特色在于，不管是什么技术都支持这种排版，web、小程序/快应用、weex/rn、原生的iOS、Android开发，全都支持flex。
    • uni-app的vue文件里支持所有web排版方式，不管是流式还是flex。但nvue里，只支持flex，因为它在app端是使用原生排版引擎渲染的。
  • 注意css里背景图和字体文件，尽量不要大于40k，因为会影响性能。在小程序端，如果要大于40k，需放到服务器侧远程引用或base64后引入，不能放到本地作为独立文件引用。
  • 每个可显示的页面，都必须在 pages.json 中注册。这里没有vue的路由，都是在pages.json里管理。
  • 而uni-app的首页，是在pages.json里配的，page节点下第一个页面就是首页。一般在/pages/xx的目录下。
  • app和小程序中，为了提升体验，页面提供了原生的导航栏和底部tabbar，注意这些配置是在pages.json中做，而不是在vue页面里创建，但点击事件的监听在显示的vue页面中做。

• 每个端，有每个端的管理规则，这不是uni-app在技术层面上可以抹平的：

  • 比如H5端的浏览器有跨域限制；
  • 比如微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；
  • 比如App端，iOS对隐私控制和虚拟支付控制非常严格；
  • 比如App端，Android、国产rom各种兼容性差异，尤其是因为谷歌服务被墙，导致的push、定位等开发混乱的坑；

框架简介

目录结构

• 一个uni-app工程，默认包含如下目录及文件：
  • uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
  • hybrid App端存放本地html文件的目录（注释：在web-view标签中渲染的内容）
  • platforms 存放各平台专用页面的目录（注释：.vue文件）
  • pages 业务页面文件存放的目录
  • static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
  • uni_modules 存放uni_module规范的插件？
  • wxcomponents 存放小程序组件的目录
    • 疑问：以小程序代码形式储存的小程序组件？所以uni-app只当作静态文件编译，并不进行处理
  • manifest.json 配置应用名称、appid、logo、版本等打包信息
  • pages.json 配置页面路由、导航条、选项卡等页面类信息
• 编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
• HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件。
• 有效目录？
  • app-plus App
  • h5 H5
  • mp-weixin 微信小程序
  • mp-alipay 支付宝小程序
  • mp-baidu 百度小程序
  • mp-qq QQ小程序
  • mp-toutiao 字节小程序
  • mp-kuaishou 快手小程序

资源路径说明

模板内引入静态资源

• 自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
• App平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
• 支付宝小程序组件内 image 标签不可使用相对路径

js文件引入

• js文件不支持使用/开头的方式引入

css引入静态资源

• css文件或style标签内引入css文件时（scss、less文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）
• 自HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式

/* 绝对路径，（注释：css标准语法，应该是被css-loader处理了） */
@import url('/common/uni.css');
@import url('@/common/uni.css'); 
/* 相对路径 */
@import url('../../common/uni.css');

• 有些小程序端css文件不允许引用本地文件

注释：图片

• 不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
• h5平台，小于4kb会转base64，超出4kb时不转。
• 其余平台不会转base64

路由

• uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router。
• uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。
• 框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下
  • 初始化：新页面入栈
  • 打开新页面：新页面入栈(调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"/>)
  • 页面重定向：当前页面出栈，新页面入栈(调用 API uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/>)
  • 页面返回:页面不断出栈，直到目标返回页(调用 API uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键)
  • Tab 切换:页面全部出栈，只留下新的 Tab 页面(调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab)
  • 重加载:页面全部出栈，只留下新的页面(调用 API uni.reLaunch 、使用组件 <navigator open-type="reLaunch"/>)

运行环境判断

• uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。(？和编译环境有关，但是怎么动态切换连接)
• 如果你需要自定义更多环境，比如测试环境：（？执行不同的打包策略）
  • 假设只需要对单一平台配置，可以 package.json 中配置，在HBuilderX的运行和发行菜单里会多一个出来。（注释：在package.json => uni-app 下配置，只是配置参数，具体的逻辑还是要在各个用到这个参数的地方增加）
  • 如果是针对所有平台配置，可以在 vue-config.js 中配置。（注释：对所有平台的编译行为进行修改）
• HBuilderX 中敲入代码块 uEnvDev、uEnvProd 可以快速生成对应 development、production 的运行环境判定代码。
• 平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。
  • 编译期判断 编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。
  • 运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）
  • 如有必要，也可以在条件编译里自己定义一个变量，赋不同值。在后续运行代码中动态判断环境。（注释：全局定义一个变量，然后通过条件编译，在不同环境为这个变量赋不同的值，来区分不同的环境）

// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif

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

页面样式与布局

尺寸单位

• uni-app有vue页面和nvue页面。vue页面是webview渲染的、app端的nvue页面是原生渲染的。
  • 疑问：webview渲染和原生渲染只是区分页面整体的渲染模式，webview渲染的页面依然可以包含原生组件，只是他们会在不同的布局流中？
• 在nvue页面里样式比web会限制更多
• uni-app 支持的通用 css 单位包括 px、rpx
  • rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大（注释：1rpx在375px的屏幕中代表0.5px）
  • 但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算（疑问：1rpx在960px的屏幕上，代表0.5px？）
• vue页面支持下面这些普通H5单位，但在nvue里不支持：
  • rem 根字体大小可以通过 page-meta 配置(注释：page-meta 页面属性配置组件，用于指定页面的一些属性、监听页面事件。)
  • vh viewpoint height，视窗高度，1vh等于视窗高度的1%
  • vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%
• nvue还不支持百分比单位。
• App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx（plus api：H5+定义的API）
• weex 模式目前遵循weex的单位，它的单位比较特殊：
  • px:，以750宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）
    • 疑问：rpx在编译成weex渲染后是否等同于px？
  • wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同
• uni-app 在 App 端、H5 端都支持了 rpx，并且可以配置不同屏幕宽度的计算方式
• rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向

样式导入

• 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

选择器

• 目前支持的选择器有：
  • .class
  • id
  • element（view：选择所有 view 组件）
  • element, element（view, checkbox）
  • ::after（在 view 组件后边插入内容，仅 vue 页面生效）
  • ::before（在 view 组件前边插入内容，仅 vue 页面生效）
• 微信小程序自定义组件中仅支持 class 选择器（？微信小程序外部ui库）
• page 相当于 body 节点，例如：

<!-- 设置页面背景颜色，使用 scoped 会导致失效 -->
page {
  background-color:#ccc;
}

全局样式与局部样式

• 定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
• nvue页面暂不支持全局样式

CSS变量

• 疑问：
  • 状态栏（最底部）
  • NavigationBar 导航栏（次底部）
  • tabbar底部选项卡（导航栏上部？）
• uni-app 提供内置 CSS 变量
  • --status-bar-height 系统状态栏高度（主要是APP小程序使用）
  • --window-top 内容区域距离顶部的距离(主要是H5页面使用)
  • --window-bottom 内容区域距离底部的距离(主要是H5页面使用)
• 当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。
• 由于在H5端，不存在原生导航栏和tabbar，也是前端div模拟。如果设置了一个固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端会与tabbar重叠。此时可使用--window-bottom，不管在哪个端，都是固定在tabbar上方。
• 目前 nvue 在App端，还不支持 --status-bar-height变量，替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度，然后通过style绑定方式给占位view设定高度。

<style>
    .status_bar {
        height: var(--status-bar-height);
         100%;
    }
</style>

固定值

• uni-app 中以下组件的高度是固定的，不可修改：
  • NavigationBar 导航栏 44px
  • TabBar 底部选项卡 HBuilderX 2.3.4之前为56px，2.3.4起和H5调为一致，统一为 50px。但可以自主更改高度）

背景图片

• uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：
  • 支持 base64 格式图片
  • 支持网络路径图片。
  • 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。App端在v3模式以前，也有相同限制。v3编译模式起支持直接使用本地背景图和字体。
  • 使用本地路径背景图片需注意
    • 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
    • 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
    • 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

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

• 微信小程序不支持相对路径（真机不支持，开发工具支持）

字体图标

• 支持 base64 格式字体图标。
• 支持网络路径字体图标。
• 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。
• 网络路径必须加协议头 https。
• 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫iconfont，安装字体文件时可以看到），在nvue内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
• 使用本地路径图标字体需注意：
  • 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
  • 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
  • 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

 @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

• nvue中不可直接使用css的方式引入字体文件，需要使用以下方式在js内引入。nvue内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
  'fontFamily': "fontFamilyName",
  'src': "url('https://...')"
})

<template/> 和 <block/>

• uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行 列表渲染 和 条件渲染。
• 它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
• <block/> 在不同的平台表现存在一定差异，推荐统一使用 <template/>。
• 注释：block标签来源于小程序，uni-app自身应该是在编译上支持，并没有在文档中声明有这个组件

ES6 支持

• 因为iOS上不允许三方js引擎，所以iOS上不区分App、小程序、H5，各端均仅依赖iOS版本。
• 各端Android版本有差异
  • App端：https://uniapp.dcloud.net.cn/frame?id=es6-支持
    • App端Android支持不依赖Android版本号，即便是Android4.4也是上表数据。因为uni-app的js代码运行在自带的独立jscore中，没有js的浏览器兼容性问题。
    • uni-app的vue页面在Android低端机上只有css浏览器兼容性问题，因为vue页面仍然渲染在webview中，受Android版本影响，太新的css语法在低版本不支持。
  • 微信小程序：https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/js-support.html#客户端 ES6 API 支持情况
  • 阿里小程序：https://opendocs.alipay.com/mini/framework/implementation-detail
  • 百度小程序：https://smartprogram.baidu.com/docs/develop/framework/operating-environment/
  • 字节跳动小程序：https://microapp.bytedance.com/docs/zh-CN/mini-app/introduction/plug-in/register-auth/registration
  • QQ小程序：https://q.qq.com/wiki/develop/miniprogram/frame/useful/useful_env.html#es6支持情况
• 如果用了微信的wxml自定义组件（wxcomponents目录下），uni-app编译器并不会处理这些文件中的es6代码，需要去微信工具里开启转换。从HBuilderX调起微信工具时，如果发现工程下有wxcomponents目录会自动配置微信工程打开es6转换。

NPM支持

• 非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API（兼容小程序 API），比如：支持高德地图微信小程序 SDK。类似jQuery 等库只能用于H5端。
• 支持安装 mpvue 组件，但npm方式不支持小程序自定义组件（如 wxml格式的vant-weapp）
  • 疑问：wxml组件是怎么引入的？
  • 注释：mpvue是使用vue.js开发小程序的前端框架，通过nodejs把符合规范的h5代码编译成小程序代码，更改了Vue.js 的 runtime 和 compiler 实现，是vue能够在小程序上运行。应该也是要求使用小程序的标签。
• 多端UI库：https://ask.dcloud.net.cn/article/35489
  • vue组件性能好于小程序自定义组件。这是因为uni-app在底层对vue数据更新使用了自动差量更新的机制。而小程序自定义组件，默认的setDate写法是没有差量数据更新的，需要写代码手动实现差量更新才能达到相同性能。
  • vue doc：HBuilderX支持vue doc，组件作者在vue组件源码里编写vue doc，可以让组件使用者写代码时得到良好的代码提示。
  • easycom：uni-app支持easycom，可以大幅简化组件的使用
  • nvue支持：如果开发App，可能会涉及到nvue原生渲染页面，这种渲染方式支持的css有限，此时就要甄别组件是否兼容nvue。
  • uni ui有如下优势
    • 优化逻辑层和视图层的通信折损：非H5端的各个平台，包括App和各种小程序，其逻辑层和视图层是分离的，两层之间通信交互会有折损，导致诸如跟手滑动不流畅。uni ui在底层会利用wxs等技术，把适当的js代码运行在视图层，减少通信折损，保证诸如swiperAction左滑菜单等跟手操作流畅顺滑