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 [email protected]

如果根目录又没有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>
相关推荐
时光追逐者23 分钟前
MongoDB从入门到实战之MongoDB快速入门(附带学习路线图)
数据库·学习·mongodb
一弓虽28 分钟前
SpringBoot 学习
java·spring boot·后端·学习
晓数2 小时前
【硬核干货】JetBrains AI Assistant 干货笔记
人工智能·笔记·jetbrains·ai assistant
我的golang之路果然有问题2 小时前
速成GO访问sql,个人笔记
经验分享·笔记·后端·sql·golang·go·database
genggeng不会代码2 小时前
用于协同显著目标检测的小组协作学习 2021 GCoNet(总结)
学习
lwewan2 小时前
26考研——存储系统(3)
c语言·笔记·考研
搞机小能手2 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类
nongcunqq3 小时前
爬虫练习 js 逆向
笔记·爬虫
汐汐咯3 小时前
终端运行java出现???
笔记
The_cute_cat5 小时前
25.4.22学习总结
学习