uni-app的基础入门介绍-CSDN博客

本文链接：https://blog.csdn.net/CHenLen0_0/article/details/139131708

前言

介绍uni-app

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码,uni-app实现了一套代码，同时运行到多个平台，可发布到iOS、Android、Web、以及各种小程序微信,支付宝,百度,头条,飞书,QQ,快手,钉钉,淘宝、快应用等多个平台。

运行uni-app项目需要安装HBuilderX前端开发工具。运用HBuilderX前端开发工具进行程序的开发和编辑。详细可以前往官网查询

uni-app官网：uni-app官网

入门

1.下载HBuilderX

前往官网下载HBuilderX前端开发工具根据自身的操作系统进行下载对应的版本，进行程序的开发。

HBuilderX前端开发工具官网： HBuilderX-高效极客技巧

2.创建，运行uni-app

下载完成HBuilderX，打开运行该程序。

点击文件 -> 新建 -> 1.项目或者 ctrl + n 快捷键创建uni-app项目

在uni-app创建中，HBuilderX中有多种uni-app模板进行选择，选择自己需要的模板进行创建既可

选择刚刚创建完成的uni-app项目

在pages文件夹——>index文件夹——>index.vue

选择该文件选择运行，选择需要运行到浏览器或其他程序

运行完成就会出现uni-app程序的页面

3.编写uni-app

编写uni-app就要有Vue的代码基础，uni-app里面的代码和Vue的大多相同。详细可以去看官网

1.vue语法

vue相比传统js的开发优势在传统开发中，用原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。

v-text
v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

v-html
v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML

v-bind
v-bind指令用于实现单向动态数据绑定。

v-on
v-on指令用来绑定事件监听器。

v-for
v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

v-model
v-model指令主要用于实现表单元素和数据的双向绑定

v-if和v-else
v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。

v-show
v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。

pages.json页面

pages.json页面该页面可以进行基础页面的设置

注册新的页面

"pages": [ 
		{
			"path": "pages/index/index",//注册页面的相对地址
			"style": {
				"navigationBarTitleText": "uni-app" //该网页的名称
			}
		}
	],

导航栏的详细设置

"globalStyle": {
		"navigationBarTextStyle": "black",//导航栏的颜色
		"navigationBarTitleText": "uni-app",//导航栏的名称
		"navigationBarBackgroundColor": "#F8F8F8",//导航栏的背景颜色
		"backgroundColor": "#F8F8F8"
	},

底部导航栏的设置，例如首页，分类等

"tabBar": {
		"backgroundColor": "#FFFFFF",//tap背景颜色
		"color": "#8a8a8a",//未选中的字体颜色
		"selectedColor": "#c00000",//选中的字体颜色
		"list": [{ //注册的底部注册几个，底部就有几个选项
				"pagePath": "pages/index/index",//注册的页面路径，在这里注册的可以进行互相跳转
				"text": "首页",//图标的文本
				"iconPath": "static/tupian/home.png",//图片样式
				"selectedIconPath": "static/tupian/home-active.png"//选中的图标样式
			},
			{
				"pagePath": "pages/category/category",
				"text": "分类",
				"iconPath": "static/tupian/cate.png",
				"selectedIconPath": "static/tupian/cate-active.png"
			},
			{
				"pagePath": "pages/cart/cart",
				"text": "购物车",
				"iconPath": "static/tupian/cart.png",
				"selectedIconPath": "static/tupian/cart-active.png"
			},
			{
				"pagePath": "pages/user/user",
				"text": "个人中心",
				"iconPath": "static/tupian/my.png",
				"selectedIconPath": "static/tupian/my-active.png"
			}
		]
	},

这样一个uniapp的框架就搭建好了