Uni-app项目应用总结（一）

news2024/11/27 18:50:35

目录

    • 一.新建uniapp项目
      •  第一步：下载HBuilder
      •  第二步:创建uni-app项目
      •  第三步：运行uni-app
    •  二.uni-app组件使用
    •  三.uni-app路由跳转
      •   1.页面路由配置
        •     (1)在pages.json中配置页面路由
        •     (2)在pages.json中配置底部导航栏
      •   2.路由跳转方法
        •   （1）uni.navigateTo(OBJECT)
        •   （2）uni.redirectTo(OBJECT)
        •   （3）uni.reLaunch(OBJECT)
        •   （4）uni.switchTab(OBJECT)
        •   （5）uni.navigateBack(OBJECT)
        •   （6）uni.preloadPage(OBJECT)
    • 四.网络
      • 1.发送请求
        •     官方文档
        •     方法
        •     参数：
        •     请求方法
        •     data 数据说明
        •     代码示例：
      • 2.文件上传
        •     官方文档
        •     说明
        •     方法：
        •     参数
        •     注意
        •     代码示例

—————————————————————————————————

一.新建uniapp项目

  官方地址： uni-app
  介绍：Uni-app是一款跨平台的开发框架，它可以快速的构建出一个移动应用，并且支持多个平台的发布。

 第一步：下载HBuilder

  官方地址：HBuider
  HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了

 第二步:创建uni-app项目

  在点击工具栏里的文件 -> 新建 -> 项目：
在这里插入图片描述
  选择uni-app类型，输入工程名，选择uni-ui项目模板，点击创建，即可成功创建。选择uni-ui项目是因为uni ui项目模板已内置大量常用组件，日常开发推荐使用该模板。
在这里插入图片描述

 第三步：运行uni-app

  1.浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。
在这里插入图片描述
2.在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
在这里插入图片描述
注意:如果是第一次使用，需要先配置小程序的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具，需要开发者手动启动，然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面，在HBuilderX里面开发，在微信开发者工具里面就可看到实时的效果。
在这里插入图片描述
  运行到小程序，如果出现下面图中的情况
在这里插入图片描述
需要在微信开发者工具中的设置->安全->将服务端口开启
在这里插入图片描述

 二.uni-app组件使用

  官方文档：链接: 组件
  新建项目选择的是uni-ui模板，uni-app的组件不需要引入，可以直接使用，
  举例：uni-card
    属性：
在这里插入图片描述
    事件：
在这里插入图片描述
    插槽：
在这里插入图片描述
    代码：

<template>
	<view>
		<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick" >
			<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
		</uni-card>
	<view>
</template>
<script>
	export default {
			methods: {
				onClick(e){
					console.log(e)
				}
		}
</script>
<style>
</style>

    运行结果：
在这里插入图片描述

 三.uni-app路由跳转

  1.页面路由配置

    官方文档：页面配置

    (1)在pages.json中配置页面路由

        说明：uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象
        属性：
在这里插入图片描述
        注意：
          pages节点的第一项为应用入口页（即首页）
          应用中新增/减少页面，都需要对 pages 数组进行修改
          文件名不需要写后缀，框架会自动寻找路径下的页面资源
        代码示例：

{
"pages": [{
		"path": "pages/xx",  //页面路径
		"style": {
			"navigationBarTitleText": "组件" //页面名称
		}
	}, {
		"path": "pages/xx",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/xx",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
}

    (2)在pages.json中配置底部导航栏

        说明：如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
        属性：
在这里插入图片描述
        其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：
在这里插入图片描述

        注意：
          当设置 position 为 top 时，将不会显示 icon
          tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
          tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
          tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
          顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
        代码示例：

{
"pages": [{
		"path": "pages/xx",  //页面路径
		"style": {
			"navigationBarTitleText": "组件" //页面名称
		}
	}, {
		"path": "pages/xx",
		"style": {
			"navigationBarTitleText": "接口"
		}
	}, {
		"path": "pages/xx",
		"style": {
			"navigationBarTitleText": "view"
		}
	}],
	"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/xx",
		"iconPath": "static/image/icon_component.png", //默认图标
		"selectedIconPath": "static/image/icon_component_HL.png", //被选中时的图标
		"text": "组件"
	}, {
		"pagePath": "pages/xx",
		"iconPath": "static/image/icon_API.png",
		"selectedIconPath": "static/image/icon_API_HL.png",
		"text": "接口"
	}]
}

  2.路由跳转方法

  注意：跳转到 tabBar 页面只能使用 switchTab 跳转
    官方文档：路由跳转

  （1）uni.navigateTo(OBJECT)

    说明：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
    参数：在这里插入图片描述
    代码示例：

//在起始页面跳转到test.vue页面并传递参数
<script>
	exprot default{
		methods:{
			jumpPage(){
				uni.navigateTo({
					url: 'test?id=1&name=uniapp'  //携带id=1和name=uniapp
				});
			}
		}
	}
</script>

//在起始页面跳转到test.vue页面并传递参数
// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

  （2）uni.redirectTo(OBJECT)

    说明：关闭当前页面，跳转到应用内的某个页面。
    参数：
在这里插入图片描述
    代码示例：

//在起始页面跳转到test.vue页面并传递参数
<script>
	exprot default{
		methods:{
			jumpPage(){
				uni.redirectTo({
					url: 'test?id=1'
				});
			}
		}
	}
</script>

//在起始页面跳转到test.vue页面并传递参数
// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
	}
}

  （3）uni.reLaunch(OBJECT)

    说明：关闭所有页面，打开到应用内的某个页面。
    参数：
在这里插入图片描述
    代码示例：

//在起始页面跳转到test.vue页面并传递参数
<script>
	exprot default{
		methods:{
			jumpPage(){
				uni.reLaunch({
					url: 'test?id=1'
				});
			}
		}
	}
</script>

//在起始页面跳转到test.vue页面并传递参数
// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
	}
}

  （4）uni.switchTab(OBJECT)

    说明：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
    参数：
在这里插入图片描述
    代码示例：

//pages.json中设置tabBar的地址
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

export default {
	methods:{
		jumpPage(){
			uni.switchTab({
				url: 'pages/index/index'
			});
		}
	}
}

  （5）uni.navigateBack(OBJECT)

    说明：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
    参数：
在这里插入图片描述
    代码示例：

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
	delta: 2
});

  （6）uni.preloadPage(OBJECT)

    说明：预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。
    参数：
在这里插入图片描述
    代码示例：

uni.preloadPage({url: "/pages/test/test"});

四.网络

1.发送请求

    官方文档

        发送请求

    方法

        uni.request(OBJECT)

    参数：

在这里插入图片描述

    请求方法

在这里插入图片描述

    data 数据说明

        最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：
            1.对于 GET 方法，会将数据转换为 query string。例如 { name: ‘name’, age: 18 } 转换后的结果是 name=name&age=18。
            2.对于 POST 方法且 header[‘content-type’] 为 application/json 的数据，会进行 JSON 序列化。
            3.对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

    代码示例：

//get请求
uni.request({
  url: 'https://api.example.com/users',
  method: 'GET', //可以不写，默认get，get必须大写
  success: function(res) {
    console.log(res.data)
    // 处理返回的数据
  },
  fail: function(err) {
    console.log(err)
    // 处理请求失败的情况
  }
})

//post请求,
const res = await uni.request({
    url: 'https://api.example.com/users',
    method: 'POST',
    header:{
		'content-type':'application/json'  
		//默认的content-type是application/json，如需要其他转换可以在这里设置，例如application/x-www-form-urlencoded
	},
    data: {
	userId: userId,
	sellerPhone: phone,
	messageRecordId:messageRecordId,
	messageContent:this.messageContent,
	messageType:this.messageType
    }
})
}

2.文件上传

    官方文档

        文件上传

    说明

        将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。 如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

    方法：

        uni.uploadFile(OBJECT)

    参数

在这里插入图片描述

    注意

    1.App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
    2.App平台选择和上传非图像、视频文件，参考https://ask.dcloud.net.cn/article/35547
    3.网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
    4.支付宝小程序开发工具上传文件返回的http状态码为字符串形式，支付宝小程序真机返回的状态码为数字形式
    5.如果使用参数files,不要使用filePath 和 name。

    代码示例

uni.chooseImage({
	success: (chooseImageRes) => {
		const tempFilePaths = chooseImageRes.tempFilePaths;
		uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			filePath: tempFilePaths[0],
			name: 'file',
			formData: {
				'user': 'test'
			},
			success: (uploadFileRes) => {
				console.log(uploadFileRes.data);
			}
		});
	}
});

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【输配电路 DZY-104端子排中间继电器 接通、信号转换 JOSEF约瑟】

【输配电路 DZY-104端子排中间继电器 接通、信号转换 JOSEF约瑟】

DZY-104端子排中间继电器品牌:JOSEF约瑟型号:DZY-104名称:端子排式中间继电器触点容量:5A/250V功率消耗:≤1.5W/≤3W/≤7W/≤3VA/≤7VA/≥5W绝缘电阻:≥10MΩ 系列型号&#xff1a; DZY-101端子排中间继电器&#xff1b; DZY-104端子排中间继电器&#xff1b; DZY-105端子排…
阅读更多...
华南农业大学|图像处理与分析技术综合测试|题目解答：求芒果单层坏损率

华南农业大学|图像处理与分析技术综合测试|题目解答：求芒果单层坏损率

设计任务 对于一幅芒果果实内部的 CT 断层图像&#xff0c;试采用图像处理与分析技术&#xff0c;设计适当的算法和程序&#xff0c;首先分割出其中的坏损区域&#xff0c;然后计算其像素面积占整个果肉区域的百分比&#xff08;单层坏损率&#xff09;。请按统一要求写出算法…
阅读更多...
nuc980 uboot 2017.11 移植：env 保存位置选择问题

nuc980 uboot 2017.11 移植：env 保存位置选择问题

开发环境 Win10 64位 ubuntu 20.04 虚拟机 VMware Workstation 16 Pro 开发板&#xff1a;NK-980IOT&#xff08;NUC980DK61Y&#xff09; gcc 交叉编译工具链&#xff1a; ARM 官方 gcc version 11.2.1 20220111 NUC980 uboot 版本 &#xff1a;尝试移植到 u-boot-2017.1…
阅读更多...
科普 “平均工资又涨了”

科普 “平均工资又涨了”

周四晚上做了一个图&#xff0c;发了一则朋友圈&#xff0c;科普了一下为什么平均工资一直在涨&#xff1a; 曲线是 drawio 画的&#xff0c;不是类似 geogebra 画的精确数学函数&#xff0c;误差比较大&#xff0c;但大概就是这个意思。 收入应该是无标度分形的幂律分布&am…
阅读更多...
孙鑫VC++第三章 4.窗口类、窗口类对象与窗口三者之间关系

孙鑫VC++第三章 4.窗口类、窗口类对象与窗口三者之间关系

目录 1. 创建CWnd 2. WinMain 3. 创建CButton 1. 创建CWnd 模拟CWnd类的封装过程。在解决方案ch04下添加一个新的空项目&#xff0c;项目名称为&#xff1a;WinMain&#xff0c;在项目创建完成后&#xff0c;将WinMain项目设为启动项目。 接下来在WinMain项目中添加一个名…
阅读更多...
【C++ 学习 ④】- 类和对象（下）

【C++ 学习 ④】- 类和对象（下）

目录 一、初始化列表 1.1 - 定义 1.2 - 使用初始化列表的原因 1.3 - 成员变量的初始化顺序 二、静态成员 2.1 - 静态成员变量 2.2 - 静态成员函数 三、友元 3.1 - 友元函数 3.2 - 友元类 四、内部类 五、匿名对象 5.1 - 匿名对象的特性 5.2 - 匿名对象的使用场景…
阅读更多...
3.View的绘制流程

3.View的绘制流程

View是在什么时候显示在屏幕上面的?(如:MainActivity的布局文件activity_main.xml) setContentView最终的结果是将解析的xml文件中的View添加到DecorView中. 那么这个DecorView是什么时候添加到Window(PhoneWindow)的呢? DecorView是在ActivityThread.java的handleResumeA…
阅读更多...
2-Zookeeper单机版安装

2-Zookeeper单机版安装

2-Zookeeper单机版安装 本文介绍的是 Linux 系统下 Zookeeper 安装方式 ① 下载 进入官网 https://zookeeper.apache.org/ 点击下载按钮 进入下载页 https://zookeeper.apache.org/releases.html 后选择 最新的稳定版本&#xff0c;如下&#xff1a; 3.7.1 为最新的稳定版本…
阅读更多...
号称分割一切的图片分割模型开源了——Segment Anything Meta SAM

号称分割一切的图片分割模型开源了——Segment Anything Meta SAM

头条号：人工智能研究所 微信号:启示AI科技 微信小程序：AI人工智能工具 以前，要解决任何类型的分割问题，有两类方法。第一种是交互式分割，允许分割任何类别的对象，但需要人通过迭代细化掩码来指导。第二种，自动分割，允许分割提前定义的特定对象类别（例如，猫或椅子），…
阅读更多...
【计算机系统】条件码寄存器

【计算机系统】条件码寄存器

阅读更多...
【计算机系统】指令

【计算机系统】指令

leaq指令 一元指令 二元指令 例子 指令addq 指令subq 指令incq 指令subq 移位指令 移位指令用途 特殊运算指令
阅读更多...
LitCTF2023 郑州轻工业大学首届网络安全赛 WP 部分

LitCTF2023 郑州轻工业大学首届网络安全赛 WP 部分

LitCTF2023 郑州轻工业大学首届网络安全赛 WP 部分 前言&#xff1a;Web&#xff1a;我Flag呢&#xff1f;导弹迷踪&#xff1a;Follow me and hack me&#xff1a;PHP是世界上最好的语言&#xff01;&#xff01;作业管理系统&#xff1a;Vim yyds&#xff1a;Ping&#xff1a…
阅读更多...
Java基础-面向对象总结(2)

Java基础-面向对象总结(2)

这篇文章主要讲解 Java中的 变量方法代码块访问修饰限定符Java 是值传递&#xff0c;还是引用传递&#xff1f;类和对象的生命周期..... 希望给您带来帮助 目录 变量 成员变量与局部变量的区别 静态变量和实例变量的区别&#xff1f;静态方法、实例方法呢&#xff1f; 可以…
阅读更多...
数据分析06——Pandas中的数据抽取

数据分析06——Pandas中的数据抽取

1、前言&#xff1a; 在Pandas中进行数据抽取主要有两种方法&#xff0c;一种是loc方法&#xff0c;一种是iloc方法&#xff1b;在获取数据时可以获取的数据有三种形式&#xff0c;一种是Series类型&#xff0c;一种是DataFrame类型&#xff0c;还有一种是直接获取数据值&…
阅读更多...
Nginx make报错处理

Nginx make报错处理

文章目录 make报错&#xff1a;fatal error:sys/sysctl.h:No such file or directory问题处理 make 报错&#xff1a;error: this statement may fall through [-Werrorimplicit-fallthrough]问题处理 make报错&#xff1a;error: struct crypt_data has no member named curre…
阅读更多...
DCGAN--Keras实现

DCGAN--Keras实现

文章目录 一、Keras与tf.keras&#xff1f;二、keras中Model的使用三、使用Keras来实现DCGan1、导入必要的包2.指定模型输入维度&#xff1a;图像尺寸和噪声向量 的长度3、构建生成器4、构造鉴别器5、构建并编译DCGan6、对模型进行训练7、显示生成图像8、运行模型 总结 一、Ker…
阅读更多...
力扣sql中等篇练习(二十)

力扣sql中等篇练习(二十)

力扣sql中等篇练习(二十) 1 寻找面试候选人 1.1 题目内容 1.1.1 基本题目信息1 1.1.2 基本题目信息2 1.1.3 示例输入输出 a 示例输入 b 示例输出 1.2 示例sql语句 # 分为以下两者情况,分别考虑,然后union进行处理(有可能同时满足,需要去进行去重) # ①该用户在 三场及更多…
阅读更多...
软件测试八股文，软件测试常见面试合集【附答案】

软件测试八股文，软件测试常见面试合集【附答案】

PS&#xff1a;加上参考答案有几十万字&#xff0c;答案就没有全部放上来了&#xff0c;高清打印版本超过400多页&#xff0c;评论区留言直接获取 1、你的测试职业发展是什么? 2、你认为测试人员需要具备哪些素质 3、你为什么能够做测试这一行 4、测试的目的是什么? 5、测…
阅读更多...
一图看懂 attrs 模块：一个在类定义时可替换 `__init__`, `__eq__`, `__repr__`等方法的样板，资料整理+笔记（大全）

一图看懂 attrs 模块：一个在类定义时可替换 `__init__`, `__eq__`, `__repr__`等方法的样板，资料整理+笔记（大全）

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 attrs 模块&#xff1a;一个在类定义时可替换 __init__, __eq__, __repr__等方法的样板&#xff0c;资料整理笔记&#xff08;大全&#xff09; &#x1f9ca;摘要&#x1…
阅读更多...
吴恩达|chatgpt 提示词工程师学习笔记。

吴恩达|chatgpt 提示词工程师学习笔记。

目录 一、提示指南 写提示词的2大原则&#xff1a; 模型的限制 二、迭代 三、总结 四、推断 五、转换 六、扩展 七、对话机器人 吴恩达和openai团队共同开发了一款免费的课程&#xff0c;课程是教大家如何更有效地使用prompt来调用chatgpt&#xff0c;整个课程时长1个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023