文章目录
使用HBuilderx 可视化创建uni-app
可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。
开始之前,开发者需先下载安装如下工具:
HBuilderX:官方IDE下载地址
HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。
- 在点击工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N)
- 选择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、以及各种小程序的应用,不需要再去学习开发其他应用的框架,大大减少开发成本。
项目目录
- pages.json: 用来配置uni-app进行全局配置,决定页面文件的路径、窗口样式
原生导航栏、底部的原生tabbar等 - manifest.json:是应用等配置文件,用于制定应用等名称、图标、权限等。
- App.vue: 根组件,所有页面都是在App.vue下进行切换等,是页面入口文件,可以调用应用等生命周期函数
- main.js: 项目的入口文件,主要作用是初始化vue实例并使用需要的插件
- uni.scss: 为了方便整体控应用的风格,比如按钮颜色、边框风格,uni.scss文件里预置里一批scss变量预置
- unpackage: 打包目录,在这里有各个平台的打包文件
- pages: 所有页面存放的目录
- components: 组件存放目录
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app约定了如下开发规范:
- 页面文件遵循vue单文件(sfc)规范
- 组件标签靠近小程序规范
- 接口能力(js api)靠近微信小程序规范,但需将前缀替换为uni
- 数据绑定及事件处理同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": ""