uni-app 快速上手指南

• 2019 年 12 月 4 日
• 笔记

离职之后，基本上所有的时间都用在复习备考和玩上面了，之前一直有提及的独立APP开发，一直没有什么动静，最近也确实得收心转向复习和独立APP开发上面来，做一点有实际意义的事情来调节情绪和状态，来面临马上要来的考试和做一些相对长远的规划。在公司基础过一点点 uni-app 不得不说的是，开发效率实际上是非常高的，官方完善速度和社区相对来说也还算不错。考虑到独立APP 的开发效率已经时间等投入，最终还是选择了 uni-app 并优先考虑微信小程序，后期再发布webapp式移动应用。所以准备开一个系列，来说一下非0基础，即有Web开发或者后端开发的开发人员，如何快速上手 uni-app 的开发。

uni-app 开发环境

官方有自己的 HbuilderX 实际上开发效率非常高，并且可以集成很多开发环境和插件来使用，但是由于开发习惯的原因，以及出生（软狗的骄傲），还是使用Visual Studio Code 来作为开发环境，但是由于 uni-app 的编译调试依赖 HbuilderX，因此这里的解决方法是：

打开HbuilderX 新建/管理项目/编译调试开启，然后使用 VS Code 打开对应项目目录，进行项目代码的编写，保存后，HbuilderX 会自动打开相应变更内容，然后同步编译调试到微信开发者工具/模拟器/Web浏览器，从而实现调试。

路由和页面跳转

归根到底，uni-app 的本质是 web 应用，因此，对于 web 应用而言，最重要的就是路由和页面间的跳转。

路由

先说 uni-app 的路由，和 vue 类似， uni-app 的路由文件编写在项目根目录中的 pages.json 文件中，先来看一下改文件的结构：

{      "pages" : [          //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages          {              "path" : "pages/index/index",              "style" : {                  "navigationBarTitleText" : "悦读圈子"              }          },          {              "path" : "pages/HM-search/HM-search",              "style" : {}  		},  		{              "path" : "pages/List/list",              "style" : {}          }      ],      "globalStyle" : {          "navigationBarTextStyle" : "black",          "navigationBarTitleText" : "悦读圈子",          "navigationBarBackgroundColor" : "#009688",          "backgroundColor" : "#009688"      }  }

该文件，两大部分组成，一个是 pages 表示页面列表，如官方注释所示，pages中的第一项表示应用启动页，而globalStyle则是全局样式，这里可以定义小程序/应用的头部栏样式，是否开启下拉刷新等等。

页面跳转

uni-app 的页面跳转，实际上是重写了微信小程序的页面跳转 navigateTo等，同样包含了如下五种方法：

• uni.navigateTo 保留当前页面并跳转，从A页面跳转到B页面，绑定默认的返回
• uni.redirectTo 关闭当前页面并跳转，从A页面跳转到B页面，没有返回绑定，返回A的上级页面
• uni.reLaunch 关闭所有页面，打开到应用内的某个页面。
• uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• uni.navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。