uni-app学习笔记

目录

一、前期准备

1、项目认识

2、pages.json基本配置

3、创建页面

二、tabBar

1、获取图标

2、代码配置

三、基础认识

1、页面生命周期

2、App.vue应用生命周期

四、基础组件

1、scroll-view可滚动视图区域

2、提示框

3、swiper滑块视图容器

4、form表单组件

一、前期准备

1、项目认识

（1）新建项目

（2）启动项目

①运行到浏览器上

②运行到微信开发者工具

如果出现以下弹框，选择已安装好的微信开发者工具路径，确定即可

如果出现“工具的服务端口已关闭”，是因为微信开发者工具设置问题

解决如下：

随便打开微信开发者工具的一个工程=》点击设置=》通用设置=》安全=》打开服务端口

（3）中文解释

2、pages.json基本配置

（1）globalStyle全局配置

{"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "全局","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},
}

（2）局部页面的配置

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}}],
}

3、创建页面

（1）右键pages文件夹=》点击新建页面

（2）新页面配置

①如果没有自动生成需要手动添加配置

②注意：与微信小程序一样，配置时，哪个页面放在前面，就先显示哪个页面

{"pages": [{"path" : "pages/about/about","style" :                                                                                    {"navigationBarTitleText": "关于","enablePullDownRefresh": false}},{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "全局","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

二、tabBar

1、获取图标

（1）小伙伴可以在iconfont选择需要的图标

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具icon-default.png?t=N7T8https://www.iconfont.cn/（2）将下载好的图标放到static文件夹中

2、代码配置

{"pages": [{"path" : "pages/about/about","style" :                                                                                    {"navigationBarTitleText": "关于","enablePullDownRefresh": false}},{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}}],"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": "关于"}]},"uniIdRouter": {}
}

三、基础认识

1、页面生命周期

（1）onLoad 监听页面加载【类似于 vue2 生命周期中的 create】

此时响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object

2、App.vue应用生命周期

（1）globalData 全局变量，此处定义的变量，可以在任何页面获取

①App.vue

<script>export default {globalData: {text: 'text'},onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script>

②index.vue

<script>export default {data() {return {}},onLoad() {console.log(getApp().globalData);},}
</script>

四、基础组件

1、scroll-view可滚动视图区域

<template><view><view class="uni-padding-wrap uni-common-mt"><view class="uni-title uni-common-mt">Vertical Scroll<text>\n纵向滚动</text></view><view><!-- scroll-y="true"允许纵向滚动 --><scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"@scrolltolower="lower" @scroll="scroll"><view id="demo1" class="scroll-view-item uni-bg-red">A</view><view id="demo2" class="scroll-view-item uni-bg-green">B</view><view id="demo3" class="scroll-view-item uni-bg-blue">C</view></scroll-view></view><view @tap="goTop" class="uni-link uni-center uni-common-mt">点击这里返回顶部</view></view></view>
</template><script>export default {data() {return {// 设置竖向滚动条位置scrollTop: 0,old: {scrollTop: 0}}},onLoad() {console.log(getApp().globalData);},methods: {// 滚动到顶部/左边会触发upper: function(e) {console.log(e)},// 滚动到底部/右边会触发lower: function(e) {console.log(e)},// 滚动时触发scroll: function(e) {console.log(e)this.old.scrollTop = e.detail.scrollTop},// 返回顶部goTop: function(e) {// 解决view层不同步的问题this.scrollTop = this.old.scrollTopthis.$nextTick(function() {this.scrollTop = 0});// 弹窗uni.showToast({icon: "none",title: "纵向滚动 scrollTop 值已被修改为 0"})}}}
</script><style>
.scroll-Y {height: 300rpx;}.scroll-view_H {white-space: nowrap;width: 100%;}.scroll-view-item {height: 300rpx;line-height: 300rpx;text-align: center;font-size: 36rpx;}.scroll-view-item_H {display: inline-block;width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;font-size: 36rpx;}.uni-bg-red{background-color: red;}.uni-bg-green{background-color: green;}.uni-bg-blue{background-color: blue;}
</style>

2、提示框

（1）showToast显示消息提示框

（2）showLoading显示 loading 加载中

<template><view><button @click="showToast" class="btn">点击显示消息提示框</button><button @click="showLoading" class="btn">点击显示Loading提示框</button></view>
</template><script>export default {data() {return {}},methods: {// 显示消息提示框showToast: function(e) {uni.showToast({icon: "none",title: "显示消息内容"})},// 显示Loading提示框showLoading: function(e) {uni.showLoading({title: "加载中"})// 2秒后提示隐藏setTimeout(function () {uni.hideLoading();}, 2000);},}}
</script><style>
.btn{width: 80%;margin:20rpx auto;
}
</style>

3、swiper滑块视图容器

<template><view><view class="uni-margin-wrap"><swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval":duration="duration"><swiper-item v-for="(item,index) in imgArr"><view class="swiper-item" :class="item.background">{{item.title}}</view></swiper-item></swiper></view><view class="swiper-list"><view class="uni-list-cell uni-list-cell-pd"><view class="uni-list-cell-db">指示点</view><switch :checked="indicatorDots" @change="changeIndicatorDots" /></view><view class="uni-list-cell uni-list-cell-pd"><view class="uni-list-cell-db">自动播放</view><switch :checked="autoplay" @change="changeAutoplay" /></view></view><view class="uni-padding-wrap"><view class="uni-common-mt"><text>幻灯片切换时长(ms)</text><text class="info">{{duration}}</text></view><slider @change="durationChange" :value="duration" min="500" max="2000" /><view class="uni-common-mt"><text>自动播放间隔时长(ms)</text><text class="info">{{interval}}</text></view><slider @change="intervalChange" :value="interval" min="2000" max="10000" /></view></view>
</template><script>
export default {data() {return {// 是否显示面板指示点indicatorDots: true,// 是否自动切换autoplay: true,interval: 2000,duration: 500,imgArr:[{title:"A",background:"uni-bg-red"},{title:"B",background:"uni-bg-green"},{title:"C",background:"uni-bg-blue"}]}},methods: {changeIndicatorDots(e) {this.indicatorDots = !this.indicatorDots},changeAutoplay(e) {this.autoplay = !this.autoplay},intervalChange(e) {this.interval = e.target.value},durationChange(e) {this.duration = e.target.value}}
}
</script><style>.uni-margin-wrap {width: 690rpx;width: 100%;}.swiper {height: 300rpx;}.swiper-item {display: block;height: 300rpx;line-height: 300rpx;text-align: center;}.swiper-list {margin-top: 40rpx;margin-bottom: 0;}.uni-common-mt {margin-top: 60rpx;position: relative;}.info {position: absolute;right: 20rpx;}.uni-padding-wrap {width: 550rpx;padding: 0 100rpx;}
</style>

 

注意：如果滑块没有背景色，是因为小编把背景色的css配置在了App.vue的全局样式

4、form表单组件

（1）说明

<form @submit="formSubmit" @reset="formReset"></form>

① @submit：携带 form 中的数据，触发 submit 事件

② @reset：表单重置，触发 reset 事件

（2）代码实例

<template><view><view><form @submit="formSubmit" @reset="formReset"><view class="uni-form-item uni-column"><view class="title">switch</view><view><switch name="switch" /></view></view><view class="uni-form-item uni-column"><view class="title">性别</view><radio-group name="radio"><label><radio value="0" /><text>男</text></label><label><radio value="1" /><text>女</text></label></radio-group></view><view class="uni-form-item uni-column"><view class="title">爱好</view><checkbox-group name="checkbox"><label><checkbox value="sing" /><text>唱歌</text></label><label><checkbox value="dance" /><text>跳舞</text></label><label><checkbox value="other" /><text>其它</text></label></checkbox-group></view><view class="uni-form-item uni-column"><view class="title">slider</view><slider value="50" name="slider" show-value></slider></view><view class="uni-form-item uni-column"><view class="title">input</view><input class="uni-input" name="input" placeholder="这是一个输入框" /></view><view class="uni-btn-v"><button form-type="submit">Submit</button><button type="default" form-type="reset">Reset</button></view></form></view></view>
</template><script>export default {data() {return {}},methods: {formSubmit: function(e) {console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))var formdata = e.detail.valueuni.showModal({content: '表单数据内容：' + JSON.stringify(formdata),showCancel: false});},formReset: function(e) {console.log('清空数据')}}}
</script><style>.uni-form-item .title {padding: 20rpx 0;}
</style>

 form 中的组件需要加上 name 来作为 key，使得 submit 事件会将组件中的 value 值进行提交

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

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

相关文章

【漏洞复现】Apache_HTTP_2.4.49_路径穿越漏洞(CVE-2021-41773)

【漏洞复现】Apache_HTTP_2.4.49_路径穿越漏洞(CVE-2021-41773)

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞验证方式一 curl方式二 bp抓包 说明内容漏洞编号CVE-2021-41773漏洞名称Apache HTTP 路径穿越漏洞漏…
阅读更多...
新手入门Python一定要看的八个超实用建议！

新手入门Python一定要看的八个超实用建议！

文章目录 前言一、项目文件事先做好归档二、永远不要手动修改源数据并且做好备份三、做好路径的正确配置四、代码必要的地方做好备注与说明五、加速你的Python循环代码六、可视化你的循环代码进度七、使用高效的异常捕获工具八、要多考虑代码健壮性关于Python技术储备一、Pytho…
阅读更多...
[PyTorch][chapter 61][强化学习-免模型学习1]

[PyTorch][chapter 61][强化学习-免模型学习1]

前言&#xff1a; 在现实的学习任务中&#xff0c;环境 其中的转移概率P,奖赏函数R 是未知的&#xff0c;或者状态X也是未知的 称为免模型学习&#xff08;model-free learning&#xff09; 目录&#xff1a; 1: 蒙特卡洛强化学习 2&#xff1a;同策略-蒙特卡洛强化学习 3&am…
阅读更多...
手写数字识别--神经网络实验

手写数字识别--神经网络实验

实验源码自取&#xff1a; 我自己搞的代码&#xff0c;预测精度才94% 神经网络实验报告源码.zip - 蓝奏云 老师给的实验源码答案和资料&#xff0c;预测精度高达99% 深度学习实验报告.zip - 蓝奏云 上深度学习的课程&#xff0c;老师布置了一个经典的实验报告&#xff0c;我做…
阅读更多...
libpcap之数据分流

libpcap之数据分流

当前系统都是多核系统&#xff0c;为了充分利用多核优势&#xff0c;数据包可以在底层就进行分流&#xff0c;可以通过多线程/多进程对同一个接口的数据进行并行的处理。 一、实验 一个server/client程序一个简单的抓包程序&#xff0c;抓取server/client之间的通信数据 1.1 …
阅读更多...
【蓝桥杯 第十四届省赛Java B组】真题训练（A - C）正在更新

【蓝桥杯 第十四届省赛Java B组】真题训练（A - C）正在更新

目录 A、阶乘求和 - BigInteger B、幸运数字 - 字符串 进制转换 暴力大法 C、数组分割 - A、阶乘求和 - BigInteger 思路&#xff1a; 当时比赛时&#xff0c;拿计算器算的&#xff0c;然后辛辛苦苦也没对 看到这个数肯定很大&#xff0c;而且只求后9位&#xff0c;阶乘越…
阅读更多...
【计算机网络】应用层

【计算机网络】应用层

应用层协议原理 客户-服务器体系结构&#xff1a; 特点&#xff1a;客户之间不能直接通信&#xff1b;服务器具有周知的&#xff0c;固定的地址&#xff0c;该地址称为IP地址。 配备大量主机的数据中心常被用于创建强大的虚拟服务器&#xff1b;P2P体系结构&#xff1a; 特点&…
阅读更多...
K8S知识点（二）

K8S知识点（二）

&#xff08;1&#xff09;K8S概念 K8S是通过控制pod来控制容器进而控制程序的 service是沟通Pod和外键的桥梁&#xff0c;可以实现负载均衡的效果&#xff0c;加权负载的效果 &#xff08;2&#xff09;环境搭建-环境规划 &#xff08;3&#xff09;环境搭建-主机安装 使用…
阅读更多...
时序分解 | Matlab实现PSO-VMD粒子群算法优化变分模态分解时间序列信号分解

时序分解 | Matlab实现PSO-VMD粒子群算法优化变分模态分解时间序列信号分解

时序分解 | Matlab实现PSO-VMD粒子群算法优化变分模态分解时间序列信号分解 目录 时序分解 | Matlab实现PSO-VMD粒子群算法优化变分模态分解时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 PSO-VMD粒子群算法PSO优化VMD变分模态分解 可直接运行 分解效果…
阅读更多...
【编程技巧】Pychar如何添加预制信息

【编程技巧】Pychar如何添加预制信息

新建一个py后 成功添加预制
阅读更多...
2023-11-04 LeetCode每日一题（数组中两个数的最大异或值）

2023-11-04 LeetCode每日一题（数组中两个数的最大异或值）

2023-11-04每日一题 一、题目编号 421. 数组中两个数的最大异或值二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数数组 nums &#xff0c;返回 nums[i] XOR nums[j] 的最大运算结果&#xff0c;其中 0 ≤ i ≤ j < n 。 示例 1&#xff1a; 示例 2&…
阅读更多...
[动态规划] (六) 路径问题 LeetCode 63.不同路径II

[动态规划] (六) 路径问题 LeetCode 63.不同路径II

[动态规划] (六) 路径问题: LeetCode 63.不同路径II 文章目录 [动态规划] (六) 路径问题: LeetCode 63.不同路径II题目解析解题思路状态表示状态转移方程初始化和填表返回值 代码实现总结 63. 不同路径 II 题目解析 (1) 机器人从左上角移动到右下角 (2) 机器人只能向右或者向…
阅读更多...
【漏洞复现】Nginx_0.7.65_空字节漏洞

【漏洞复现】Nginx_0.7.65_空字节漏洞

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞扫描3、漏洞验证 1.1、漏洞描述 1.2、漏洞等级 1.3、影响版本 0.7.65 1.4、漏洞复现 1、基础环…
阅读更多...
JavaSpringbootMySQL高校实训管理平台01557-计算机毕业设计项目选题推荐（附源码）

JavaSpringbootMySQL高校实训管理平台01557-计算机毕业设计项目选题推荐（附源码）

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3论文结构与章节安排 2 高校实训管理平台系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据增加流程 2.2.2 数据修改流程 2.2.3 数据删除流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系…
阅读更多...
Oracle安全基线检查

Oracle安全基线检查

一、账户安全 1、禁止SYSDBA用户远程连接 用户具备数据库超级管理员（SYSDBA）权限的用户远程管理登录SYSDBA用户只能本地登录，不能远程。REMOTE_LOGIN_PASSWORDFILE函数的Value值为NONE。这意味着禁止共享口令文件，只能通过操作系统认证登录Oracle数据库。 1）检查REMOTE…
阅读更多...
【python 深拷贝与浅拷贝】

【python 深拷贝与浅拷贝】

python 深拷贝与浅拷贝 问题&#xff1a; 在用影刀编写流程的时候发现&#xff0c;明明只修改人名为“小张”对应的字典里面的值&#xff0c;但是所有的人名对应的值都被修改了。 原因&#xff1a; 第14行&#xff0c;设置键值对&#xff0c;值对应的变量“初始打卡类型字…
阅读更多...
伪随机序列——m序列及MATLAB仿真

伪随机序列——m序列及MATLAB仿真

文章目录 前言一、m 序列1、m 序列的产生2、m 序列的性质①、均衡性②、游程分布③、移位相加特性④、自相关函数⑤、功率谱密度⑥、伪噪声特性 二、M 序列1、m 序列的产生2、m 序列的性质 三、MATLAB 中 m 序列1、m 序列生成函数的 MATLAB 代码2、MATLAB 仿真 前言 在通信系统…
阅读更多...
CVE-2023-34040 Kafka 反序列化RCE

CVE-2023-34040 Kafka 反序列化RCE

漏洞描述 Spring Kafka 是 Spring Framework 生态系统中的一个模块&#xff0c;用于简化在 Spring 应用程序中集成 Apache Kafka 的过程&#xff0c;记录 (record) 指 Kafka 消息中的一条记录。 受影响版本中默认未对记录配置 ErrorHandlingDeserializer&#xff0c;当用户将容…
阅读更多...
二叉树第i层结点个数

二叉树第i层结点个数

//二叉树第i层结点个数 int LevelNodeCount(BiTree T, int i) {if (T NULL || i < 1)return 0;if (i 1) return 1;return LevelNodeCount(T->lchild, i - 1) LevelNodeCount(T->rchild, i - 1); } int GetDepthOfBiTree(BiTree T) {if (T NULL)return 0;return Ge…
阅读更多...
【HTML】播放器如何自动播放【已解决】

【HTML】播放器如何自动播放【已解决】

自动播放器策略 先了解浏览器的自动播放器策略 始终允许静音自动播放在以下情况&#xff0c;带声音的自动播放才会被允许 2.1 用户已经与当前域进行交互 2.2 在桌面上&#xff0c;用户的媒体参与指数阈值(MEI)已被越过&#xff0c;这意味着用户以前播放带有声音的视频。 2.3 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023