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

CCC11152024-06-05 16:40

文章目录

使用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
js 复制代码 
"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

js 复制代码 
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
		    "path": "pages/index/index",
		    "style": {
			        "navigationBarTitleText": "",
			        "enablePullDownRefresh": false, // 禁止下拉刷新
			        "navigationStyle": "custom"
		}
    }
],

各平台自定义样式

app-plus: Object 配置编译到 App 平台时的特定样式

h5 Object 设置编译到 H5 平台的特定样式，配置项参考下方 H5

导航栏-滚动透明渐变搜索框
js 复制代码 
{
    "path": "index",
    "style": {
			"navigationBarTitleText":"呀哈哈商城",
			"app-plus": {
				"titleNView": {
					"type": "transparent",
					"coverage": "50px",
					"backgroundColor": "#b50e03",
					"searchInput": {
						"backgroundColor": "#FFFFFF",
						"borderRadius": "15px",
						"placeholder": "点击搜索",
						"disabled": true,
						"placeholderColor": "#CCCCCC"
					},
					"buttons": [{
							"fontSrc": "/static/iconfont.ttf",
							"text": "\ue8b5",
							"fontSize": "26",
							"color": "#ffffff",
							"float": "left",
							"background": "rgba(0,0,0,0)"
						},
						{
							"fontSrc": "/static/iconfont.ttf",
							"text": "\ue668",
							"fontSize": "26",
							"color": "#ffffff",
							"float": "right",
							"background": "rgba(0,0,0,0)"
						}
					]
				}
			}
    }
}
导航栏-搜索框，自定义按钮
js 复制代码 
{
    "path": "search",
    "style": {
			"app-plus": {
				"titleNView": {
					"autoBackButton": false,
					"padding": "5px",
					"backgroundColor": "#b50e03",
					"buttons": [{
						"text": "取消",
						"color": "#ffffff",
						"fontSize": "16px"
					}],
					"searchInput": {
						"align": "left",
						"backgroundColor": "#FFFFFF",
						"borderRadius": "15px",
						"placeholder": "请输入搜索内容",
						"placeholderColor": "#CCCCCC"
					}
				}
			}
		}
}

创建新的页面

uni-app中的页面，通常会保存在工程根目录下的pages目录下。

每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中配置的页面，uni-app会在编译阶段进行忽略。

通过HBuilderX开发 uni-app 项目时，在 uni-app 项目上右键"新建页面"，HBuilderX会自动在pages.json中完成页面注册，开发更方便

3. 配置tabbar

如果应用是第一个多tab应用，可以同tabBa配置指定tab栏的标签，以及tab切换时显示的对应页

  • 当设置position为top时，将不会显示icon
  • tabBar 中的list是一个数组，只能配置最少2个，最多5个tab。tab按数组的顺序排序
  • tabBar 切换第一次加载时可能渲染不计数，可以在每个tabBar页面的onLoad中先弹出一个等待雪花
  • tabBar 的页面展示过一次后就保留在内存中，再次切换tabBar页面，只会触发每个页面的onShow，不会再触发onLoad
  • 顶部的 tabBar 目前仅微信小程序上支持，需要用到顶部选项卡的话，建议不使用tabBar的定于设置，而是自己做顶部选项卡
属性 类型 必填 默认值 描述 平台差异说明
color HexColor 是 tab上的文字默认颜色
selectedColor HexColor 是 tab上的文字选中时的颜色
backgroundColor HexColor 是 tab的背景色
borderStyle String 否 black tabbar上边框的颜色，仅支持black/white App 2.3.4+ 支持其他颜色值
list Array 是 tab的列表，最少2个，最多5个tab
position String 否 bottom 可选值：bottom,top top仅支持微信小程序

其中list接收一个数组，数组中的每一项都是一个对象，其属性值如下：

属性 类型 必填 说明
pagePath String 是 页面路径，必须在pages中线定义
text String 是 tab上按钮文字，在5+APP和H5平台为非必填
iconPath String 否 图片路径，icon大小限制为40kb,建议尺寸为81px*81px, 当postion为top时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath String 否 选中时的图片路径，icon大小限制为40kb,建议尺寸为81px*81px, 当postion为top时，此参数无效
js 复制代码 
// pages.json
"tabBar": {
	"list": [
		{
        			"pagePath": "pages/index/index",
        			"text": "首页",
        			"iconPath": "static/tabs/home.png",
        			"selectedIconPath": "static/tabs/home-active.png"
		},
		{
        			"pagePath": "pages/message/message",
        			"text": "信息",
        			"iconPath": "static/tabs/message.png",
        			"selectedIconPath": "static/tabs/message-active.png"
		},
		{
        			"pagePath": "pages/contact/contact",
        			"text": "我们",
        			"iconPath": "static/tabs/contact.png",
        			"selectedIconPath": "static/tabs/contact-active.png"
		}
	]
},

4. condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如小程序转发后，用户所打开的页面

属性 类型 是否必填 描述
current Number 是 当前激活的模式，list节点的索引值
list Array 是 启动模式列表

list说明：

属性 类型 是否必填 描述
name String 是 启动模式名称
path String 是 启动页面路径
query String 否 启动参数，可在页面的onLoad函数里获得

注意： 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式: 对应页面名

js 复制代码 
"condition": {
		"current": 0,
		"list": [
			{
            				"name": "详情页",
            				"path": "pages/detail/detail",
            				"query": "id=1"
			}
		]
	},

环境变量配置

新建package.json，

package.json文件中不允许出现注释，否则扩展配置无效

HBuilderX会根据package.json的扩展配置，在运行、发行菜单下，生成自定义菜单（钉钉小程序），开发者点击对应菜单编译运行即可

js 复制代码 
{
    /**
     * package.json其它原有配置 
     * 拷贝代码后请去掉注释！
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "custom-platform": { //自定义编译平台配置，可通过cli方式调用
                "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                "browser":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": {//环境变量
                    "UNI_PLATFORM": "",  //基准平台
                    "MY_TEST": "", // ... 其他自定义环境变量
                 },
                "define": { //自定义条件编译
                    "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                }
            }
        }    
    }
}

如：

js 复制代码 
{
	"uni-app": {
		"scripts": {
			"mp-h5-dev": { 
				"title":"H5:开发环境", 
				"env": { 
					"UNI_PLATFORM": "h5",
					 "name": "development"
				},
				"define": { 
					"H5": true 
				}
			},
			"mp-h5-prod": {
				"title":"H5:生产环境", 
				"env": { 
					"UNI_PLATFORM": "h5",
					 "name": "production"
				},
				"define": { 
					"H5": true 
				}
			},
			"mp-weixin-dev": {
				"title":"微信小程序:开发环境", 
				"env": { 
					"UNI_PLATFORM": "mp-weixin",
					 "name": "development"
				},
				"define": { 
					"MP-WEIXIN": true 
				}
			},
			"mp-weixin-prod": {
				"title":"微信小程序:生产环境", 
				"env": { 
					"UNI_PLATFORM": "mp-weixin",
					 "name": "production"
				},
				"define": { 
					"MP-WEIXIN": true 
				}
			}
		}
	}
}

pages.json 模块化

随着项目的壮大与页面的增多，控制路由的pages.json已经异常庞大且代码可读性差（想找一个页面需要找到上下文切换，浪费时间并且可能误删不同平台的页面），亟需优化。

所有需要对页面路由进行模块化管理

可以安装pages.json 增强插件：https://ext.dcloud.net.cn/plugin?id=5163

每次使用插--生成页面配置文件，都需要重启项目才能生效

设置全局iconfont图标

  1. 可以在iconfont 阿里图标库中查找对应的图标，然后下载到本地，将压缩包里的文件复制粘贴到 yhh_shop/static/font文件夹中

  2. 可以将iconfont.css中的@font-face替换成Unicode（使用远程的）, 如以下：

  3. 微信小程序不支持引入远程。需进行兼容。

css 复制代码 
/* #ifdef MP-WEIXIN */
@font-face {
  font-family: "iconfont";
  src: url('/static/iconfont.ttf') format('truetype');
}
/* endif */

/* #ifndef MP-WEIXIN */
@import url(https://at.alicdn.com/t/c/font_3919053_x4dalq8wpg.css); //跟上面的基础字体库一样，这个是远程de
/* endif */
  1. 在项目根目录的 App.vue 中，引入上述的 iconfont.css，注意自己存放的路径，且通过 @import 引入的外部样式，需要写在 style 标签有效内容中的最前面
html 复制代码 
<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
	@import "@/static/iconfont.css";
</style>
  1. 可以在uni.css中设置全局字体变量
css 复制代码 
/*变量设置 字体*/
$font-family: 'iconfont';
$color: (#d0021b, #7ed321, #bd10e0, #f5a623, #c9e7f5, #ff7800);

使用

html 复制代码 
<view class="nav-content">
	<view class="nav-item" v-for="(nav) in navList" :key="nav.id" @click="navigate(nav.url)">
		<view class="nav-icon">
			<text class="iconfont icon-all"></text>
		</view>
		<text class="nav-title">{{ nav.title }}</text>
	</view>
</view>

小程序运行含未引入组件报错

微信开发者工具从 1.05.2201210 版本开始，对小程序项目新增了无依赖文件过滤能力。

如果某个 js 文件被静态分析显示是无依赖文件，在实际运行时又被其他 js 文件 require 引用了，则会在工具模拟器中报错这个错误。

解决方式：

关闭过滤无依赖文件：project.config.json 中 settings 选项添加 ignoreDevUnusedFiles: false , ignoreUploadUnusedFiles: false

/Users/clz/学习/前端提升/uni-demo/yhh/unpackage/dist/dev/mp-weixin/project.config.json

ignoreUploadUnusedFiles: false，清除缓存，然后在编译就好了

封装组件

常见的 弹框提示，获取本地存储数据，

请求request api(拦截器)

相关推荐
下雪天的夏风11 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系，如何在TS 中使用 JS 不报错
前端·javascript·typescript
diygwcom23 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan26 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
^^为欢几何^^35 分钟前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang40 分钟前
vue3中开发引导页的方法
开发语言·前端·javascript
艾小逗1 小时前
uniapp快速入门教程，内容来源于官方文档，仅仅记录快速入门需要了解到的知识点
小程序·uni-app·app·es6
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法，亲测有效！！！
前端·javascript·vue.js
潮汐退涨月冷风霜1 小时前
机器学习之非监督学习（四）K-means 聚类算法
学习·算法·机器学习
GoppViper1 小时前
golang学习笔记29——golang 中如何将 GitHub 最新提交的版本设置为 v1.0.0
笔记·git·后端·学习·golang·github·源代码管理
羊小猪~~1 小时前
深度学习基础案例5--VGG16人脸识别(体验学习的痛苦与乐趣)
人工智能·python·深度学习·学习·算法·机器学习·cnn
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习