楠槡

uni-app 快速上手指南

2019-09-27

离职之后,基本上所有的时间都用在复习备考和玩上面了,之前一直有提及的独立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 文件中,先来看一下改文件的结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
"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() 获取当前的页面栈,决定需要返回几层。

未完待续……

Tags: uniapp
使用支付宝打赏
使用微信打赏

若你觉得我的文章对您有帮助,点击上方按钮请我喝杯咖啡☕

若文章中存在问题,或您有任何意见和疑问,均可与我联系

扫描二维码,分享此文章 📱