uni-app学习---项目搭建、配置、设置导航栏

使用HBuilderx 可视化创建uni-app

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

HBuilderX：官方IDE下载地址
HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

1. 在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）
2. 选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

运行uni-app

• 浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可体验 uni-app 的 web 版。
• 运行App到手机或模拟器：使用电压足够的usb端口连接手机，设置中开启USB调试，手机上允许电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app。
• 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。

uni-app简介:一套代码、多端运行

uni-app分编译器和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

总：编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。

编译器

• 编译器运行在电脑开发环境。一般是内置在HBuilderX工具中，也可以使用独立的cli版。
• 开发者按uni-app规范编写代码，由编译器将开发者的代码编译生成每个平台支持的特有代码
  • 在web平台，将.vue文件编译为js代码。与普通的vue cli项目类似
  • 在微信小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码
  • 在app平台，将.vue文件编译为js代码。进一步，如果涉及uts代码：
    • 在Android平台，将.uts文件编译为kotlin代码
    • 在iOS平台，将.uts文件编译为swift代码
• 编译器分vue2版和vue3版
  • vue2版：基于wepback实现
  • vue3版：基于Vite实现。性能更快
• 编译器支持条件编译，即可以指定某部分代码只编译到特定的终端平台。从而将公用和个性化融合在一个工程中。

运行时（runtime）

runtime不是运行在电脑开发环境，而是运行在真正的终端上。

uni-app在每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。这是一个比较庞大的工程。

• 在小程序端，uni-app的runtime，主要是一个小程序版的vue runtime，页面路由、组件、api等方面基本都是转义。

• 在web端，uni-app的runtime相比普通的vue项目，多了一套ui库、页面路由框架、和uni对象（即常见API封装）

• 在App端，uni-app的runtime更复杂，可以先简单理解为DCloud也有一套小程序引擎，打包app时将开发者的代码和DCloud的小程序打包成了apk或ipa。当然，事实上DCloud确实有小程序引擎产品，供原生应用实现小程序化

• uni-app runtime包括3部分：基础框架、组件、API。

逻辑层和渲染层分离

在web平台，逻辑层（js）和渲染层（html、css），都运行在统一的webview里。

但在小程序和app端，逻辑层和渲染层被分离了。

分离的核心原因是性能。过去很多开发者吐槽基于webview的app性能不佳，很大原因是js运算和界面渲染抢资源导致的卡顿。

不管小程序还是app，逻辑层都独立为了单独的js引擎，渲染层仍然是webview（app上也支持纯原生渲染）。

所以注意小程序和app的逻辑层都不支持浏览器专用的window、dom等API。app只能在渲染层操作window、dom

WebView：网页视图，可以内嵌在移动端，实现前端的混合式开发，大多数混合式开发框架都是基于WebView模式进行二次开发。
1、显示和渲染Web页面。
2、直接使用html文件（网络上或本地assets中）作布局。
3、可和JavaScript交互调用。

逻辑层和视图层分离，非H5端通信有折损

uni-app 在非H5端运行时，从架构上分为逻辑层和视图层两个部分。逻辑层负责执行业务逻辑，也就是运行js代码，视图层负责页面渲染。

虽然开发者在一个vue页面里写js和css，但其实，编译时就已经将它们拆分了。

逻辑层详解

逻辑层是运行在一个独立的jscore里的，它不依赖于本机的webview，所以一方面它没有浏览器兼容问题，可以在Android4.4上跑es6代码，另一方面，它无法运行window、document、navigator、localstorage等浏览器专用的js API。

jscore就是一个标准js引擎，标准js是可以正常运行的，比如if、for、各种字符串、日期处理等。js和浏览器的区别要注意区分开来。

所谓浏览器的js引擎，
就是jscore或v8的基础上新增了一批浏览器专用API，比如dom；
node.js引擎，则是v8基础上补充一些电脑专用API，比如本地io；
而uni-app的App端和小程序端的js引擎，其实是在jscore上补充了一批手机端常用的JS API，比如扫码。

视图层详解

h5和小程序平台，以及app-vue，视图层是webview。而app-nvue的视图层是基于weex改造的原生渲染视图。

逻辑层和视图层分离的利与弊

利：逻辑层和视图层分离，好处是js运算不卡渲染，最简单直接的感受就是：窗体动画稳。

webview新窗体一边做进入动画，一边自身渲染，很容易卡动画。而uni-app则无需写预载代码，新窗体渲染快且动画稳定。

弊：两层互相通信有损耗的。

总结

uni-app是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、h5以及各种小程序(微信/支付宝/百度/头条/qq/钉钉)等多个平台

即使不跨端，uni-app同时也是更好的小程序开发框架

拥有vue和微信小程序端开发资源，快速上手uni-app

对于开发者来说，学习uni-app可以减少学习成本，因为学习uni-app后，即可开发出ios、Android、h5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，大大减少开发成本。

项目目录

1. pages.json: 用来配置uni-app进行全局配置，决定页面文件的路径、窗口样式
   原生导航栏、底部的原生tabbar等
2. manifest.json:是应用等配置文件，用于制定应用等名称、图标、权限等。
3. App.vue: 根组件，所有页面都是在App.vue下进行切换等，是页面入口文件，可以调用应用等生命周期函数
4. main.js: 项目的入口文件，主要作用是初始化vue实例并使用需要的插件
5. uni.scss: 为了方便整体控应用的风格，比如按钮颜色、边框风格，uni.scss文件里预置里一批scss变量预置
6. unpackage: 打包目录，在这里有各个平台的打包文件
7. pages: 所有页面存放的目录
8. components: 组件存放目录

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app约定了如下开发规范：

1. 页面文件遵循vue单文件(sfc)规范
2. 组件标签靠近小程序规范
3. 接口能力(js api)靠近微信小程序规范，但需将前缀替换为uni
4. 数据绑定及事件处理同vue.js规范，同时补充里app及页面但生命周期
   5.== 为了兼容多端运行，建议使用flex布局进行开发==

pages.json:全局配置和页面配置

1. globalStyle全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色(同状态栏背景色)
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏背景颜色，仅支持black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色,下拉刷新可查看到
backgroundTextStyle	String	dark	下拉loading的样式，仅支持dark/light
enablePullDownRefresh	Bollean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px

"globalStyle": {
   
   
	"navigationBarTextStyle": "white",
	"navigationBarTitleText": "uni-app",
	"navigationBarBackgroundColor": "#8A2BE2",
	"backgroundColor": "#87CEEB",
	"backgroundTextStyle":"dark",
	"enablePullDownRefresh":true,
	"onReachBottomDistance": 50
},

2. 通过pages来配置页面

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置特么窗口表示，pageStyle

• pages节点的第一项为应用入口页（即首页）
• 应用中新增/减少页面，都需要对 pages 数组进行修改
• 文件名不需要写后缀，框架会自动寻找路径下的页面资源

导航栏

自定义导航栏

修改pages.json中navigationStyle改为custom

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
   
   
		    "path": "pages/index/index",
		    "style": {
   
   
			        "navigationBarTitleText": ""