UNIAPP 技术分享（3）

一  、应用生命周期

二 、常用页面生命周期

三 、路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。但与 Vue Router 截然不同。 uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

四 、区别于传统 web 开发的注意

1)  JS注意

1. 非H5端，不能使用浏览器自带对象，比如document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。

2. 没有这些浏览器自带对象并不影响业务开发，uni提供的api足够完成业务。

3. uni的api在编译到web平台运行时，其实也会转为浏览器的js api。

4. App端若要使用操作window、document的库，需要通过renderjs来实现

5. uni的api是多端可用的。在条件编译区，每个平台的专有api也可以使用，比如wx.、plus.等api可以分别在微信下和app下使用。

出于降低小程序向uni-app迁移成本的考虑，wx的api在app里也可以直接运行，比如写wx.requst和uni.requst是一样的，但仍然建议仅在微信的条件编译区使用wx的api。

2) Tag注意

1. uni-app的tag同小程序的tag，和HTML的tag不一样，比如div要改成view，span要改成text、a要改成navigator。
2. 出于降低h5应用向uni-app迁移成本的考虑，写成div、span也可以运行在app和小程序上，因为uni-app编译器会把这些HTML标签编译为小程序标签。但仍然建议养成新习惯

3) Css注意

1. 虽然大部分css样式在微信小程序和app中都可以支持，但推荐使用flex布局模型，这种布局更灵活高效且支持更多平台(比如nvue、快应用只支持flex布局)
2. 单位方面，uni-app默认为rpx。这是一种可跨端的通用单位 详见

4) 工程目录注意

1. 每个要显示的页面，都要放到pages目录下，新建一个页面所在的目录，然后放同名目录的vue文件，比如project/pages/lista/lista.vue，并且在pages.json里配置。这与小程序的策略相同。
2. 自定义组件，放到component目录
3. 静态资源如图片，固定放到static目录下。这是webpack、mpvue的规则

5)数据绑定方式的注意

1. uni-app 基于Vue 2.0实现，开发者需注意Vue 1.0 -> 2.0 的使用差异，详见从 Vue 1.x 迁移

6) 每个页面支持使用原生title，首页支持使用原生底部tab，这些是要在pages.json里配置，这些并不是vue页面的一部分。当然vue里的js api也可以动态修改原生title

7) 虽然使用vue，但在app和小程序里，不是spa而是mpa

8) 位置坐标系统一为国测局坐标系gcj02，这种坐标系可以被多端支持。老版5+的百度定位和百度地图使用的是百度私有坐标系bd09ll，这种坐标系需要转换。新版uni-app里的百度地图已经默认改为gcj02。高德地图不受影响，一直是gcj02