uni-app学习笔记(二)

目录

一、路由与页面跳转

1、tabar与普通页面跳转例子

2、navigateTo

3、switchTab

二、vue组件

1、传统vue组件的使用

2、easycom

三、uView组件库

1、安装配置

2、引入配置

3、使用

四、Vuex

1、认识

2、state基本使用

3、mapState使用

五、网络请求

1、封装请求

2、细化每个接口的配置

3、实例调用

六、媒体上传图片

1、uni.chooseImage(OBJECT)

2、代码实例


一、路由与页面跳转

1、tabar与普通页面跳转例子

pages.json配置页面

javascript 复制代码
{
	"pages": [{
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "关于",
				"enablePullDownRefresh": false
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		}, {
			"path": "pages/prompt/prompt",
			"style": {
				"navigationBarTitleText": "提示框",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/swiper/swiper",
			"style": {
				"navigationBarTitleText": "滑块",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/form/form",
			"style": {
				"navigationBarTitleText": "表单",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/router/router",
			"style": {
				"navigationBarTitleText": "路由",
				"enablePullDownRefresh": false
			}

		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "全局",
		"navigationBarBackgroundColor": "#000000",
		"backgroundColor": "#ffffff"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#1296db",
		"borderStyle": "black",
		"backgroundColor": "#000000",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "/static/首页2.png",
			"selectedIconPath": "/static/首页.png",
			"text": "首页"
		}, {
			"pagePath": "pages/about/about",
			"iconPath": "/static/关于2.png",
			"selectedIconPath": "/static/关于.png",
			"text": "关于"
		}, {
			"pagePath": "pages/form/form",
			"iconPath": "/static/表单 (1).png",
			"selectedIconPath": "/static/表单.png",
			"text": "表单"
		}, {
			"pagePath": "pages/router/router",
			"iconPath": "/static/路由器组2.png",
			"selectedIconPath": "/static/路由.png",
			"text": "路由"
		}]
	},
	"uniIdRouter": {}
}

router.vue文件,模拟页面跳转

javascript 复制代码
<template>
	<view>
		<button @click="toIndex">tabar跳转</button>
		<button @click="toSwiper">普通页面跳转</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toIndex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			toSwiper(){
				uni.navigateTo({
					url:"/pages/swiper/swiper"
				})
			}
		}
	}
</script>

2、navigateTo

(1)跳转非tabBar页面的url路径,路径可以带参数

格式:path?key=value&key2=value2

path:要跳转页面的路径

javascript 复制代码
toSwiper(){
	uni.navigateTo({
		url:"/pages/swiper/swiper?name=sxx"
	})
}

(2)获取参数

在跳转到的页面的onLoad函数获取

javascript 复制代码
onLoad(option) {
	console.log(option);
},

3、switchTab

(1)跳转tabBar页面的url路径(需在 pages.json 的 tabBar 字段定义的页面),路径不能带参数

(2)需要的参数可以写到全局变量去获取


二、vue组件

1、传统vue组件的使用

(1)创建components文件夹=》创建.vue组件文件

(2)在需要的页面引入、注册

index.vue

javascript 复制代码
<template>
	<view class="content">
		<header-cpn></header-cpn>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	// 注意路径components前没有/
	// 命名至少两个词组成,以小驼峰的形式
	import headerCpn from 'components/header.vue'
	export default {
		components:{
			headerCpn
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			console.log(getApp().globalData);
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

2、easycom

(1)说明

传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件

easycom将其精简为一步

(2)使用

只要组件安装在项目的 components 目录下,并符合components/组件名称/组件名称.vue

通过插件库引入到components文件下然后直接引入即可

DCloud 插件市场DCloud 插件市场https://ext.dcloud.net.cn/可以看文件的命名和文档来决定引入标签的名字


三、uView组件库

1、安装配置

(1)打开工程终端

javascript 复制代码
npm install uview-ui@1.8.8

如果根目录又没有package.json文件,先执行以下命令

javascript 复制代码
npm init -y

(2)uView依赖SCSS,必须要安装此插件,否则无法正常运行

查看是否安装scss插件:点击工具=》插件安装

①前往插件市场安装

②终端命令安装

javascript 复制代码
// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D

2、引入配置

(1)主JS库:在项目根目录中的main.js中,引入并使用uView的JS库

javascript 复制代码
// main.js
import uView from "uview-ui";
Vue.use(uView);

注意要放在import Vue之后

(2)全局SCSS:引入uView主题文件

javascript 复制代码
/* uni.scss */
@import 'uview-ui/theme.scss';

(3)引入基础样式

App.vue首行的位置引入,注意给style标签加入lang="scss"属性

javascript 复制代码
<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

(4) 配置easycom组件模式

在项目根目录的pages.json中,配置easycom

注意:

①只有一个easycom字段

②配置完要重启HX或重新编译项目

javascript 复制代码
// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

3、使用

(1)按钮

html 复制代码
<template>
	<view>
		头部组件
		<u-button type="primary">主要按钮</u-button>
		<u-button type="success">成功按钮</u-button>
		<u-button type="info">信息按钮</u-button>
		<u-button type="warning">警告按钮</u-button>
		<u-button type="error">危险按钮</u-button>
	</view>
</template>

四、Vuex

1、认识

uni-app 内置了Vuex

(1)使用场景

  • 当一个组件需要多次派发事件时。例如购物车数量加减。
  • 跨组件共享数据、跨页面共享数据。例如订单状态更新。
  • 需要持久化的数据。例如登录后用户的信息。
  • 当您需要开发中大型应用,适合复杂的多模块多页面的数据交互,考虑如何更好地在组件外部管理状态时

(2)规则

  • 应用层级的状态应该集中到单个 store 对象中。

  • 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

  • 异步逻辑都应该封装到 action 里面

2、state基本使用

(1)在项目根目录下,新建 store 目录=》新建 index.js 文件

javascript 复制代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);//vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
	state:{
        msg:'存放的信息'
    },
	mutations:{},
	actions:{},
	getters:{}
})
export default store

(2)在 main.js 中导入文件

javascript 复制代码
import store from './store'
const app = new Vue({
	store,
  ...App
})

(3)获取数据

javascript 复制代码
<template>
	<view>
		<button @click="toIndex">tabar跳转</button>
		<button @click="toSwiper">普通页面跳转</button>
		<text>{{$store.state.msg}}</text>
	</view>
</template>

3、mapState使用

(1)当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。 为了解决这个问题,可以使用 mapState 辅助函数 帮助我们生成计算属性

javascript 复制代码
<template>
	<view>
		<text>{{$store.state.msg}}</text>
		<text>{{userName}}</text>
	</view>
</template>

<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		computed: mapState({
			// 从state中拿到数据 箭头函数可使代码更简练
			userName: state => state.userName,
		})
	}
</script>

(2)当映射的计算属性名称与 state 的子节点名称相同时,可以给 mapState 传一个字符串数组

javascript 复制代码
<template>
	<view>
		<text>{{$store.state.msg}}</text>
		<text>{{userName}}</text>
		<view>
			{{msg}}{{userName}}
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		computed: mapState(['msg','userName'])
	}
</script>

五、网络请求

这里小编用天行API为实例

天行数据TianAPI - 开发者API数据平台

1、封装请求

创建utils文件夹=》创建request.js文件

javascript 复制代码
const instance = (url,data,header,callback) => {
	const BASE_URL = "https://apis.tianapi.com"
	uni.request({
		url: BASE_URL + url,
		data,
		header,
		success: callback
	});
}
export default instance;

2、细化每个接口的配置

javascript 复制代码
import instance from "../utils/request.js"

// 获取用户信息(GET)
export function getTianGou(data,callback){
	return instance(
		'/tiangou/index',
		data,
		{},
		callback
	)
}

3、实例调用

javascript 复制代码
<script>
	import {
		getTianGou
	} from "../../api/user.js"
	import instance from "../../utils/request.js"
	export default {
		onLoad() {
            // 跳过第2步,直接调用
			instance("/tiangou/index", {
					key: ''//data传参
				}, {}, (res) => {
					console.log(res);
				}),
            // 细化接口配置后的调用
			getTianGou({
					key: ''//data传参
				}, (res) => {
					console.log(res);
				})
		},
	}
</script>

六、媒体上传图片

1、uni.chooseImage(OBJECT)

参数介绍:

①count:最多可以选择的图片张数,默认9

②sizeType:original 原图,compressed 压缩图,默认二者都有

javascript 复制代码
uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

2、代码实例

html 复制代码
<template>
	<view>
		<!-- 媒体图片 -->
		<button type="default" @click="upImage">上传图片</button>
		{{imgArr}}
		<image v-for="item in imgArr" :key="item" :src="item" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr:[]
			}
		},
		methods: {
			// 上传图片事件
			upImage(){
				uni.chooseImage({
					count:6,
					success:res=> {
						console.log(res.tempFilePaths);
						console.log(this.imgArr);
						this.imgArr = res.tempFilePaths
					}
				})
			}
		}
	}
</script>
相关推荐
冰帝海岸5 小时前
01-spring security认证笔记
java·笔记·spring
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index5 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
小二·6 小时前
java基础面试题笔记(基础篇)
java·笔记·python
朝九晚五ฺ7 小时前
【Linux探索学习】第十四弹——进程优先级:深入理解操作系统中的进程优先级
linux·运维·学习
wusong9998 小时前
mongoDB回顾笔记(一)
数据库·笔记·mongodb
猫爪笔记8 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
Resurgence039 小时前
【计组笔记】习题
笔记
pq113_69 小时前
ftdi_sio应用学习笔记 3 - GPIO
笔记·学习·ftdi_sio
澄澈i9 小时前
设计模式学习[8]---原型模式
学习·设计模式·原型模式