uni-app（未完）

zoukankan html css js c++ java

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 节点，例如：
```

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左滑菜单等跟手操作流畅顺滑
查看全文

相关阅读:
类继承
 抽象基类纯虚函数
 虚函数
 Java网络通信
 Java补补补
 刷LeetCode吧
 贝叶斯网络的
 vscode添加vue模板
 vue--项目实例
 Java01

原文地址：https://www.cnblogs.com/qq3279338858/p/15319220.html

uni-app（未完）

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

什么是 uni-app

快速上手

通过 HBuilderX 可视化界面

通过vue-cli命令行

如何学习

框架简介

目录结构

资源路径说明

模板内引入静态资源

js文件引入

css引入静态资源

注释：图片

路由

运行环境判断

页面样式与布局

尺寸单位

样式导入

选择器

全局样式与局部样式

CSS变量

固定值

背景图片

字体图标

<template/> 和 <block/>

ES6 支持

NPM支持