uni-app 和 Vue

迁移对比

uni-app 与 Vue 相对比。

js

• 一些在 js 中的事件直接作为标签的属性来设置：
  • 按下样式
  • 事件冒泡
  • 手指按住和松开状态时间

html

uni-app 与 html 的标签对应。

• view：div
• text：span
• ul/li：view v-for
• img：image
• a：navigator
• iframe：web-view
• select：picker
• table：uni-table

其他没提到的大致相同。

css

• 一些在 css 需要设置定义的属性可直接通过对应容器和标签属性来开启：scroll-view

组件

视图容器

• view：div
• scroll-view：区域滚动。
• swiper：滑块区域。类似实现轮播图。

表单组件

• button：原生组件就跟用了组件库的效果差不多，还可以设置大小，样式。
• input：输入框，同 html 差不多，但是还可以指定设备弹出键盘。
• switch：开关。

路由（页面跳转）

• navigator：可设置是否可以返回上一个页面（open-type）。

媒体组件

• image：通过 mode 属性来设置图像相对容器的适应（缩放、裁剪等）。

生命周期

页面级别

• onLoad：页面进入后执行（只执行一次）。

  默认参数接收 url 参数，代替 vue-router。

• onShow（keep-alive）：进入页面时触发，离开页面再回来也能触发。

  广告植入（讨厌）。

• onReady（onMounted）（只执行一次）。

• onHide：离开页面时触发。

  清除生命周期钩子等。

• onUnload：需要配置 open-type=reLaunch。

  卸载页面是进行数据缓存的清理。

• onPageScroll：监听页面滚动。

• onPullDownRefresh：监听用户下拉动作。

  下拉刷新。

• onReachBottom：页面滚动到底部的事件（不是 scroll-view 滚到底）。

  用于下拉到下一页数据。

应用级别

• onLaunch：第一次进入应用执行。

  验证本地缓存是否有登录信息。

• onShow：应用级别。（全局）

• onHide：应用级别。（全局）

生命周期顺序

应用 -> 页面

不包含组件：

onLoad -> onShow ->onReady

包含组件：

onLoad -> onShow -> setup -> beforeMount -> onReady -> mounted

onReady 和 mounted 文档是 onReady 在后面，但实际测试确实在前面执行？

uni-app 的生命周期虽然支持与 Vue 混用，但是最好还是只用一个。

尺寸单位

rpx

微信小程序提出的一种用于响应式布局的单位，可以根据屏幕自适应的动态单位。（以 750 像素为基准）

一般来说 UI 稿子等比缩放宽以 750 为基准。

pages.json

该文件可以：

• 定义路由。对于每个路由页面也可也设置单独的窗口页面表现。pages
• 设置默认窗口页面表现（导航栏等）。globalStyle
• 设置自动引入组件规则（默认开启）。easycom
• 设置页面底部切换按钮栏。tabBar
• 模拟直达页面场景（仅限开发，用于测试）。condition

manifest.json

进行一些应用的配置。

• 如果想上传应用，或者进行真机调试，需要定义好 AppId。

  这个 AppId 需要进行小程序注册才可以获得

小结

注意：针对不同的平台可能某些 API 或者事件等不可使用，具体需要查阅官方标准。

• 有些标签的名字有变化：div（view）、span（text）

• 一些在 js 中的事件直接作为标签的属性来设置；

• 一些之前需要引用组件库或者手写的样式，直接被容器集成了；并且可以在容器上直接设置属性来设置，无需使用 js；

• 使用路由跳转时可设置 open-type 模式来控制跳转后上一个页面的行为（是否可以回跳）；

• Vue 的一些语法和事件可以参照官方对照表将其一一对应起来；

• uni-app 有对应的 js/vue 事件，也有自己原生的事件；

• uni-app 中的组件不需要手动导入，只需要放在 components 文件夹下即可；

• uni-app 中的生命周期除了继承 Vue 的组件生命周期，还有应用级别和页面级别的生命周期；

• 可以在 uni.scss 中定义一些全局的 css 变量；也可以指定小程序特有的环境变量（例如 env(safe-area-inset-bottom)）来设置其独有的样式属性。

  如果想定义局部的变量可以在 common 文件夹中定义好后，在 uni.scss 中使用@import导入，重启生效。

• 内置有 API 可以完成交互反馈（uni.showToast 等），类似于全局封装好的组件；

• 发送请求也可以使用 uni.request 完成，自身支持 Promise，不需要额外使用 axios 等网络请求库；

• 可直接配置跨域；

  微信小程序：在本地设置配置不检验 https，上线时在小程序的后台里配置服务器域名即可。

• 官方有扩展组件可直接安装使用（官方组件库）；

  安装好之后会出现在 uni_modules 底下。

• 对于不同端的适配，可以使用#ifdef、#ifndef和#endif来根据设备控制不同的 dom 元素渲染；

  例如对于小程序来说可以配置联系客服，就可以直接到达客服的微信；而对于 pc 端，可以展示电话号码。

• 改变小程序内置图标样式也需添加一个类名，再深度选择即可；

• 针对不同的设备，uni-app 会提供 api 来获取当前设备的信息，我们可以根据里面的设备型号做处理；

  uni.getSystemInfoSync、uni.getSystemInfo。

• 一些样式需要和胶囊按钮对齐，可以用 api 获取胶囊按钮的位置信息，做动态的自适应；

  uni.getMenuButtonBoundingClientRect。一般将其抽离出来在 utils 下的 system.ts 中。

• 路由传参直接拼在 url 上，再在组件内的生命周期的默认参数中获取；

  navigator；load。

• uni-app 中同样也可以将数据放入缓存中；

  uni.setStorage。

• 调用小程序 api 分享时，可以通过 url 传参到达指定的分享页面；

• 对于富文本的渲染，uni-app 有专门的插件，还可以渲染 dom 元素；