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": ""
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CCC1115

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值