Uniapp入门

KjPrime

已于 2022-09-20 11:20:35 修改

阅读量367

点赞数

分类专栏： web 文章标签：前端 vue.js javascript uni-app

于 2022-09-20 11:19:19 首次发布

本文链接：https://blog.csdn.net/qq_45019494/article/details/126949064

版权

web 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

Uniapp

前提

熟悉HTML、CSS、JavaScript的基本语法
熟悉Vue2的语法和结构

UNIAPP简介

用来做什么的？

使用Vue.js语法(标签靠近小程序的规范)进行移动端开发的一个框架，只需要编写一套代码，就可以发布在不同的平台（iOS、Android、H5以及各种的小程序）。

有什么用，解决了什么问题，为什么要使用他？

解决跨平台的问题
减少开发成本

用什么开发，怎么开发？

HBuilder X
创建项目
- 第一步：新建
- 第二步：创建

项目文件夹分析

- static 静态资源目录
- pages 页面存放文件夹（类似于PC端的view目录）
- uni_modules 页面存放文件夹（类似于PC端的node_modules目录）
- unpackage 打包之后文件存放的文件夹（类似于PC端的dist或者build目录）
- pages.json 该文件对全局进行配置（如路由、底部导航栏、顶部导航等）
- App.vue 页面的入口文件，可以调用应用生命周期函数
- main.js 项目入口文件
- manifest.json 配置打包的文件，如应用名称，图标，权限等
- uni.scss scss的全局变量预置

pages.json

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

pages

path
style

globalStyle

navigationBarBackgroundColor 导航栏背景色
navigationBarTextStyle 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText 导航栏标题文字内容

tabbar

color tab 上的文字默认颜色
selectedColor tab 上的文字选中时的颜色
backgroundColor tab 的背景色
list tab 的列表最少2个、最多5个 tab

例子

{
	"pages": [
		{
			"path": "pages/login/index",
			"style": {
				"navigationBarTitleText": "登录页",
			}
		},
		{
			"path": "pages/mine/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		},
    ],
	"tabBar": {
		"color": "#000000",
		"selectedColor": "#000000",
		"borderStyle": "white",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index",
			"iconPath": "static/images/tabbar/home.png",
			"selectedIconPath": "static/images/tabbar/home_.png",
			"text": "首页"
		},{
			"pagePath": "pages/mine/info/index",
			"iconPath": "static/images/tabbar/mine.png",
			"selectedIconPath": "static/images/tabbar/mine_.png",
			"text": "个人信息"
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "自定义",
		"navigationBarBackgroundColor": "#FFFFFF"
	}
}

manifest.json

在HBuilder X中打开这个文件，可以看懂

App.vue

页面入口文件

main.js

项目入口文件

uni.scss

scss的预置全局变量

UNIAPP的基本使用

SCSS变量预置

/* 例子 */
$redColor: red;  /*全局变量*/
.start{
    .header{
        color: $redColor; /* color: red; */
    }
    &:hover{
        color: red;
    }
}
::v-deep{
    dialog_header__{
        padding: 0;
    }
}

生命周期

应用生命周期

只能在App.vue里监听应用的生命周期
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）

页面生命周期

onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onBackPress 监听页面返回

网络请求

uni.request(OBJECT)
拦截器
- 在uniapp中，拦截器可以拦截很多东西。

页面通讯

uni.$on(‘messageName’, params)
uni.$emit(‘messageName’, function(params))

uni.$emit('update',{msg:'页面更新'})
uni.$on('update',function(data){
	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

数据存储

uni.setStorage(OBJECT)、uni.getStorage(OBJECT)、uni.removeStorage(OBJECT)【异步】
uni.setStorageSync(KEY,DATA)、uni.getStorageSync(KEY)、uni.removeStorageSync(KEY)【同步】

路由跳转

uni.navigateTo(OBJECT)
- 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo(OBJECT)
- 关闭当前页面，跳转到应用内的某个页面。
OBJECT
- 发送参数 url + ?a=afsd&net=123
- 接受参数onLoad(option)

// 例子
uni.navigateTo({
	url: 'test?a=afsd&net=123'
});

export default {
	onLoad: function (option) {
		console.log(option.id);
        console.log(option.net);
	}
}