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.hqwc.cn/news/161317.html

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

相关文章

5.数据表基本操作

5.数据表基本操作

目录 1.创建数据表 创建数据表的语法格式&#xff1a; 查看当前数据库的表&#xff1a; 主键 1.单字段主键 (1)在定义列的同时指定主键&#xff0c;语法规则如下&#xff1a; (2)在定义完所有列之后指定主键。 2.多字段联合主键 外键&#xff1a; 非空约束&#xff1…
阅读更多...
uniapp: 前端利用百度云OCR实现文字识别（身份证识别功能，别的功能类似）

uniapp: 前端利用百度云OCR实现文字识别（身份证识别功能，别的功能类似）

第一章 前言 介绍如何使用百度智能云实现我们想要的效果&#xff0c;需要在下面这个网址注册账号&#xff1a; 百度智能云-云智一体深入产业 使用文档在该网址上&#xff1a; 简介 - 文字识别OCR 请求成功的效果&#xff0c;如下图&#xff1a; 搜索产品&#xff08;例如文字…
阅读更多...
python脚本-网页爬虫获取网页图片

python脚本-网页爬虫获取网页图片

python脚本-网页爬虫获取网页图片 代码 import requests import re import time url"http://10.9.47.154/python-spider/" # 爬取网站的url headers {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like …
阅读更多...
Linux中的高级IO

Linux中的高级IO

文章目录 1.IO1.1基本介绍1.2基础io的低效性1.3如何提高IO效率1.4五种IO模型1.5非阻塞模式的设置 2.IO多路转接之Select2.1函数的基本了解2.2fd_set理解2.3完整例子代码&#xff08;会在代码中进行讲解&#xff09;2.4优缺点 3.多路转接之poll3.1poll函数的介绍3.2poll服务器3.…
阅读更多...
51单片机汇编-点亮一个led

51单片机汇编-点亮一个led

文章目录 前言1.打开IDE2.设置编辑器3.设置输出4. 原理图5.编写代码6 编译7.下载8.其它代码1.LED闪烁2.跑马灯 前言 51单片机基础 本章主要介绍打开一个led,具体采用51汇编 1.打开IDE 选择STC89C52RC 后缀是.asm 2.设置编辑器 3.设置输出 4. 原理图 5.编写代码 ORG 00H;伪代…
阅读更多...
linux之按键中断

linux之按键中断

查看原理图确认引脚 可以看到按键有两个&#xff0c;分别对应GPIO5_1和GPIO4_14 配置pinctrl&#xff0c;配置成GPIO模式 1.使用官方工具&#xff0c;配置下引脚 2.将生成的代码复制到设备树里 创建设备节点 生成二进制设备树文件 在工具链表下使用 make dtbs 或者使…
阅读更多...
加法运算、 || 、 赋值运算

加法运算、 || 、 赋值运算

一、加法运算 在这里插入图片描述 二、&& || 三、赋值运算 四、js类型就八种&#xff1a; 五、css权重、 六&#xff1a;布局&#xff0c;尽量使用块盒。 七、小数精度存储的问题&#xff1a;存的不精确&#xff0c;算的肯定也是有问题的。 八、找单身狗算法题…
阅读更多...
Unity之UI、模型跟随鼠标移动（自适应屏幕分辨率、锚点、pivot中心点）

Unity之UI、模型跟随鼠标移动（自适应屏幕分辨率、锚点、pivot中心点）

一、效果 UI跟随鼠标移动， 动态修改屏幕分辨率、锚点、pivot等参数也不会受到影响。同时脚本中包含3d物体跟随ui位置、鼠标位置移动 二、屏幕坐标、Canvas自适应、锚点、中心点 在说原理之前我们需要先了解屏幕坐标、Canvas自适应、锚点、中心的特性和之间的关系。 1.屏幕坐标…
阅读更多...
Leetcode—110.平衡二叉树【简单】

Leetcode—110.平衡二叉树【简单】

2023每日刷题&#xff08;十九&#xff09; Leetcode—110.平衡二叉树 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ int preFunc(struct TreeNode* root) {if(root…
阅读更多...
【入门Flink】- 06Flink作业提交流程【待完善】

【入门Flink】- 06Flink作业提交流程【待完善】

Standalone 会话模式作业提交流程 代码生成任务的过程&#xff1a; 逻辑流图&#xff08;StreamGraph&#xff09;→ 作业图&#xff08;JobGraph&#xff09;→ 执行图&#xff08;ExecutionGraph&#xff09;→物理图&#xff08;Physical Graph&#xff09;。 作业图算子链…
阅读更多...
@Slf4j将日志记录到磁盘和数据库

@Slf4j将日志记录到磁盘和数据库

文章目录 1、背景介绍2、存本地2.1、配置文件2.2、使用 3、存数据库3.1、配置文件改造3.2、过滤器编写3.3、表准备3.4、添加依赖3.5、测试 4、优化4.1、日志定期删除 1、背景介绍 现在我一个SpringBoot项目想记录日志&#xff0c;大概可以分为下面这几种&#xff1a; 用户操作…
阅读更多...
一天写一个（前端、后端、全栈）个人简历项目（附详源码）

一天写一个（前端、后端、全栈）个人简历项目（附详源码）

一、项目简介 此项目是用前端技术HTMLCSSjquery写的一个简单的个人简历项目模板&#xff0c;图片可点击放大查看&#xff0c;还可以直接下载你的word或者PDF的简历模板。 如果有需要的同学可以直接拿去使用&#xff0c;需自行填写个人的详细信息&#xff0c;发布&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023