uni-app从入门到实战

Posted 2022-03-19 老张在线敲代码

uni-app是啥？

uni-app是一个使用vue.js来开发所有前端应用的框架，开发者开发一套代码可以发布到os，安卓，h5等各种小程序

uni-app的作用

大大减少了开发者的时间成本，学会一个uni即可开发多个系统的应用，不需要再去学习其他的框架

环境搭建

安装HbuildX

安装完成之后创建项目为uni-app格式

安装微信开发者工具

如果是第一次使用微信小程序打开uni-app则会自动弹出需要配置小程序的安装路径，路径配置完之后打开微信小程序调试安全设置的开启

项目文件介绍

pages.json

用来对uni-app进行全局配置，决定页面文件的路径 ，窗口样式，原生的导航栏，底部的原生tababar等

manifest.json

应用的配置文件·，用于指定应用的名称，图标，权限等

App.vue

是根组件，所有的页面都是在App.vue下进行切换的，是页面的入口文件，可以调用应用的生命周期

main.js

是项目入口文件，主要作用是初始化vue实例并使用需要的插件

uni.scss

文件的用途是为了方便整体控制应用的样式风格，比如按钮颜色，边框风格等，uni.scss中预配置了一些scss变量预设

unpackage

是打包目录，在这块有各平台的打包文件

pages

所有的页面存放目录

static

静态资源目录，例如图片等

components

组件存放目录

开发规范

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

页面文件遵循 Vue 单文件组件 (SFC) 规范(opens new window)

组件标签靠近小程序规范，详见uni-app 组件规范

接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范

数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期

为兼容多端运行，建议使用flex布局进行开发

globalStyle全局外观配置

"navigationBarTextStyle": “black”, 只支持黑/白

"navigationBarTitleText": “uni-appaa”, 导航栏标题

"navigationBarBackgroundColor": “#008000”, 导航栏背景色,使用16进制保证各平台通用

"backgroundColor": “#F8F8F8” 下拉等露出的窗体的背景色

"enablePullDownRefresh":true, 是否开启下拉刷新

"backgroundTextStyle":“light” 下拉刷新的加载动画样式,只支持"dark"/"light"

"onReachBottomDistance":100 上拉加载触发离底部的距离

页面配置

tabbar配置

text组件的使用

<view>
	//文字是否可选
	<text selectable="true">小明最帅</text>
	//空格是否显示
	<text space="emsp">小明   最帅</text>
	//是否能够解码
	<text decode="true">&lt;</text>
</view>

view组件的使用

button组件/image组件/…的使用

uni-app的样式

rpx单位

rpx就是响应式的px,一种根据屏幕自适应的单位，以750的屏宽为基准，屏幕变大，字体也会变大

@import

引入外部样式表

注意事项：

page相当于html中的body节点

html中的id,class等都支持使用

定义在app.vue中的样式是全局样式，会影响到所有页面，在pages中单独创建的css文件是局部文件，局部文件样式会覆盖掉全局文件

uni-app中的数据绑定

跟vue相同

v-bind的使用

查询官方文档

v-for的使用

…v-if等

事件注册及传递事件对象与参数

<view v-on:click="add(20,$event)"></view>

export default
	data()
		return 
	,
	methods:
		add(num,e)
			console.log(num,e)	
		
	

页面与应用的生命周期