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配置页面

{
	"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文件，模拟页面跳转

<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：要跳转页面的路径

toSwiper(){
	uni.navigateTo({
		url:"/pages/swiper/swiper?name=sxx"
	})
}

（2）获取参数

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

onLoad(option) {
	console.log(option);
},

3、switchTab

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

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

二、vue组件

1、传统vue组件的使用

（1）创建components文件夹=》创建.vue组件文件

（2）在需要的页面引入、注册

index.vue

<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 插件市场icon-default.png?t=N7T8https://ext.dcloud.net.cn/可以看文件的命名和文档来决定引入标签的名字

三、uView组件库

1、安装配置

（1）打开工程终端

npm install uview-ui@1.8.8

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

npm init -y

（2）uView依赖SCSS，必须要安装此插件，否则无法正常运行

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

①前往插件市场安装

②终端命令安装

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

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

2、引入配置

（1）主JS库：在项目根目录中的main.js中，引入并使用uView的JS库

// main.js
import uView from "uview-ui";
Vue.use(uView);

注意要放在import Vue之后

（2）全局SCSS：引入uView主题文件

/* uni.scss */
@import 'uview-ui/theme.scss';

（3）引入基础样式

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

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

（4） 配置easycom组件模式

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

注意：

①只有一个easycom字段

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

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

3、使用

（1）按钮

<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 文件

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 中导入文件

import store from './store'
const app = new Vue({
	store,
  ...App
})

（3）获取数据

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

3、mapState使用

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

<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 传一个字符串数组

<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文件

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、细化每个接口的配置

import instance from "../utils/request.js"

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

3、实例调用

<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 压缩图，默认二者都有

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

2、代码实例

<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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/123893.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Maven简介

Maven简介

一、Maven模型 二、模型实现 三、对应代码项目介绍
阅读更多...
JAVA开源项目 于道前端项目 启动步骤参考

JAVA开源项目 于道前端项目 启动步骤参考

1. 安装 启动过程有9个步骤&#xff1a; 1.1 安装 Node JS , V18版本的 &#xff08;安装步骤省略&#xff09; 1.2 安装 npm install -g yarn &#xff0c;node JS里边好像自带npm &#xff0c;通过npm的命令安装 yarn 1.3 切换到项目中去安装&#xff0c;npm install &a…
阅读更多...
Android Glide transform旋转rotate圆图CircleCrop，Kotlin

Android Glide transform旋转rotate圆图CircleCrop，Kotlin

Android Glide transform旋转rotate圆图CircleCrop&#xff0c;Kotlin import android.graphics.Bitmap import android.os.Bundle import android.util.Log import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import com.bumptech.glide.load…
阅读更多...
[第二章—Spring MVC的高级技术] 2.2 置multipart解析器

[第二章—Spring MVC的高级技术] 2.2 置multipart解析器

使用Servlet 3.0解析multipart请求 兼容Servlet 3.0的StandardServletMultipartResolver没有构 造器参数&#xff0c;也没有要设置的属性。 这样&#xff0c;在Spring应用上下文中&#xff0c;将 其声明为bean就会非常简单&#xff0c;如下所示&#xff1a; ● 既然这个Bean方…
阅读更多...
将Modbus转Profinet网关用于自动给料机的案例

将Modbus转Profinet网关用于自动给料机的案例

自动给料机通过使用Modbus转Profinet网关&#xff08;XD-MDPN100&#xff09;连接1200PLC与G120变频器Modbus通信。这种通信方式可以实现设备之间的数据交换和控制命令传输&#xff0c;大大提高了自动给料机的运行效率和精度。使用这个网关&#xff0c;1200PLC可以准确地将控制…
阅读更多...
基于pytorch使用特征图输出进行特征图可视化

基于pytorch使用特征图输出进行特征图可视化

使用特征图输出进行特征图可视化 文章目录 前言效果展示获取某一层特征图输出原图方法一&#xff1a;使用IntermediateLayerGetter类方法二&#xff1a;使用hook机制&#xff08;推荐&#xff09; 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例…
阅读更多...
Linux进程控制(2)

Linux进程控制(2)

Linux进程控制(2) &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容讲解了进程等待收尾内容和进程的程序…
阅读更多...
爱家房产网站源码 爱家房产网商业版 微信互动营销整合+手机触屏版+经纪人分销

爱家房产网站源码 爱家房产网商业版 微信互动营销整合+手机触屏版+经纪人分销

房产网站源码手机访问自动转手机版修改修复如下&#xff1a; 1&#xff0c;修复手机版首页标题头部名称 2&#xff0c;修复手机版首页频道导航按钮 3&#xff0c;新增手机版广告位置显示方式 4&#xff0c;修复手机版首页内容显示样式 5&#xff0c;手机版头部背景颜色ic…
阅读更多...
【Java】在实体类中常用的注解校验

【Java】在实体类中常用的注解校验

1、常用注解&#xff1a; 注解说明Null只能为nullNotNull(message “id不能为空”)必须不为null&#xff0c;可以为空字符串Min(value)必须为一个不小于指定值的数字Max(value)必须为一个不大于指定值的数字NotBlank(message “姓名不能为空”)验证注解的元素值不为空&#…
阅读更多...
【Mysql】模糊查询

【Mysql】模糊查询

目录 表&#xff1a; like用法 1.查询姓孙的王者荣耀英雄 ​编辑 2.查询姓孙&#xff0c;且名后面只有一个字的王者荣耀英雄 3.查询姓孙&#xff0c;且名后面有两个字的王者荣耀英雄 4.查询名字带 亮 的王者荣耀英雄 ​编辑 where...in...用法 1.查询id 为1&#x…
阅读更多...
坐标系转换（仅作记载）

坐标系转换（仅作记载）

一.极坐标转换为普通坐标系 参考&#xff1a;极坐标方程与直角坐标方程的互化 - 知乎 (zhihu.com) 公式&#xff1a;&#xff08;无需考虑象限引起的正负问题&#xff09; 普通坐标系转换为极坐标系 参考&#xff1a; 极坐标怎么与直角坐标系相互转化&#xff1f; - 知乎 (zh…
阅读更多...
Hbuilder运行到浏览器里为啥空白？

Hbuilder运行到浏览器里为啥空白？

CtrlS保存一下再运行。
阅读更多...
自然语言处理中的文本聚类：揭示模式和见解

自然语言处理中的文本聚类：揭示模式和见解

一、介绍 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;文本聚类是一种基本且通用的技术&#xff0c;在信息检索、推荐系统、内容组织和情感分析等各种应用中发挥着关键作用。文本聚类是将相似文档或文本片段分组为簇或类别的过程。这项技术使我们能够发现隐藏的…
阅读更多...
MySQL中表格的自我复制，与复制表格

MySQL中表格的自我复制，与复制表格

先创建一个空表&#xff0c;my_tab01 CREATE TABLE my_tab01(id INT ,name VARCHAR(32),sal DOUBLE,job VARCHAR(32),deptno INT); SELECT * FROM my_tab01;准备一张有数据的表格&#xff1a; 将另一张表格的数据插入到my_tab01的表格中&#xff1a; -- 演示如何自我复制 --…
阅读更多...
Spring Boot 请求/actuator/beans 无法访问 返回404

Spring Boot 请求/actuator/beans 无法访问 返回404

问题复现 在保证项目加入了spring-boot-starter-actuator依赖&#xff0c;并成功启动后。通过浏览器进行访问&#xff0c;返回如下图结果&#xff1a; 问题排查 1. 查看日志 从日志中可以看到基于路径’/actuator’下只暴露了一个端点 2. 访问http://localhost:8080/actua…
阅读更多...
Kafka -- 架构、分区、副本

Kafka -- 架构、分区、副本

1、Kafka的架构&#xff1a; 1、producer&#xff1a;消息的生产者 2、consumer&#xff1a;消息的消费者 3、broker&#xff1a;kafka集群的服务者&#xff0c;一个broker就是一个节点&#xff0c;主要是负责处理消息的读、写的请求和存储消息。在kafka cluster中包含很多的br…
阅读更多...
Android平台上执行C/C++可执行程序，linux系统编程开发，NDK开发前奏。

Android平台上执行C/C++可执行程序，linux系统编程开发，NDK开发前奏。

Android平台上执行C/C可执行程序&#xff0c;linux系统编程开发&#xff0c;NDK开发前奏准备。 1.下载NDK&#xff0c;搭建NDK开发环境 下载地址 https://developer.android.com/ndk/downloads 下载过程中点击下面箭头的地方&#xff0c;点击鼠标右键&#xff0c;复制好下载…
阅读更多...
基于SSM的劳务外包管理系统的设计与实现

基于SSM的劳务外包管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…
阅读更多...
8.spark自适应查询-AQE之自适应调整Shuffle分区数量

8.spark自适应查询-AQE之自适应调整Shuffle分区数量

目录 概述主要功能自适应调整Shuffle分区数量原理默认环境配置修改配置 结束 概述 自适应查询执行&#xff08;AQE&#xff09;是 Spark SQL中的一种优化技术&#xff0c;它利用运行时统计信息来选择最高效的查询执行计划&#xff0c;自Apache Spark 3.2.0以来默认启用该计划。…
阅读更多...
用趋动云GPU部署自己的Stable Diffusion

用趋动云GPU部署自己的Stable Diffusion

注&#xff1a;本文内容来自于对DataWhale的开源学习项目——免费GPU线上跑AI项目实践的学习&#xff0c;参见&#xff1a;Docs&#xff0c;引用了多处DataWhale给出的教程。 1.创建项目 1&#xff09;进入趋动云用户工作台&#xff0c;在当前空间处选择注册时系统自动生成的…
阅读更多...
最新文章

Copyright @ 2022~2023