Uni-app基础知识

uni-app组成和跨端原理 | uni-app官网uni-app,uniCloud,serverless,uni-app组成和跨端原理,基本语言和开发规范,编译器,运行时（runtime）,逻辑层和渲染层分离icon-default.png?t=N7T8https://uniapp.dcloud.net.cn/tutorial/1.adb连接模拟器

        找到adb所在位置（一般在hbuilder安装目录下的 \plugins\launcher-tools\tools\adbs 下）

        当前文件夹直接cmd

        adb常用命令：

#查看adb连接的设备列表

adb devices

#连接本地模拟器（我这端口时mumu模拟器默认的端口）

adb connect 127.0.0.1:7555

2.uni-app项目结构介绍

├── common            # 通用的资源，如样式、工具函数等
├── components        # 自定义组件
├── pages             # 各页面目录，每个页面是一个文件夹
│   ├── index
│   │   ├── index.vue # 首页页面
├── static            # 静态资源，如图片、字体等
├── unpackage         # 打包后的文件
├── App.vue           # 应用的入口文件
├── main.js           # Vue初始化文件
├── manifest.json     # 配置应用名称、appid、logo、版本等
├── pages.json        # 配置页面路由、导航条、选项卡等
├── uni.scss          # 通用样式文件
└── package.json      # npm 包管理配置文件

 2.1 main.js

        main.js是项目的入口文件，用来初始化vue实例，定义全局属性、组件，安装插件

2.2 App.vue

        app.vue是项目的入口组件，所有页面在此切换，用来监听应用生命周期、编写全局样式、定义全局数据

2.2.1 全局样式

<style>/*每个页面公共css */.title{color: aqua;}
</style>
  •  有个就近原则，如果你设置的全局样式与某个页面的样式重名，全局样式的对应属性对该页面不生效

2.2.2 全局数据

<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')},//定义全局数据globalData: {name: 'luobei',age: 18}}
</script>

        页面中获取全局数据

<script>export default {data() {return {title: 'Hello!'}},onLoad() {//1.拿到全局数据const app = getApp()console.log(app.globalData);},methods: {}}
</script>

2.3 pages.json

        pages.json用来对项目进行全局配置，决定页面的路径、窗口样式、导航栏、底部tabbar等

2.3.1 窗口样式 

    "globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}
  •  navigationBarTextStyle：设置导航栏上文字的颜色；
  • navigationBarTitleText：设置导航栏的标题文本；
  • navigationBarBackgroundColor：设置导航栏的背景颜色；
  • backgroundColor：设置整个页面的背景颜色；

2.3.2 页面路径 

    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}],
  • 数组中的每一项表示一个页面，包含页面的路径和样式配置；
  • pages中的设置样式的优先级在globalStyle之上；

2.3.3 底部导航栏

"tabBar": {"color": "#999999","selectedColor": "#000000","backgroundColor": "#FFFFFF","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "Home","iconPath": "static/icon-home.png","selectedIconPath": "static/icon-home-selected.png"},{"pagePath": "pages/profile/profile","text": "Profile","iconPath": "static/icon-profile.png","selectedIconPath": "static/icon-profile-selected.png"}]
}
  • borderStyle：backgroundColor：整个 tabBar 的背景颜色；
  • tabBar 上边框的颜色，仅支持 black 和 white 两种值；
  • list：定义 tabBar 中的每一个选项（tab）； 

 2.4 mainfest.json

        应用配置文件，hbuilder支持可视化配置

  • 应用信息配置：包括应用名称、版本、描述、图标、协议、端口等基本信息；
  • 平台配置：定义应用在不同平台（如 App、微信小程序、H5 等）的特殊配置；
  • 权限配置：声明应用需要的权限；
  • SDK配置：集成第三方服务的 SDK 配置；
  • 发布配置：设置应用发布到不同平台的相关信息；

2.5 uni-app的生命周期

生命周期函数描述触发时机
onLoad页面加载时触发。页面初始化时，只会触发一次，参数为上一个页面传递的 options。
onShow页面显示/切入前台时触发。每次打开页面时。
onReady页面初次渲染完成时触发。页面首次渲染完成时，只触发一次。
onHide页面隐藏/切入后台时触发。如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
onUnload页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面。
onPullDownRefresh监听用户下拉动作。需要在页面配置 enablePullDownRefresh 为 true。
onReachBottom页面上拉触底事件的处理函数。需要在页面配置 onReachBottomDistance。
onShareAppMessage用户点击右上角分享时触发。返回自定义的分享内容。
onPageScroll监听页面滚动。页面滚动时。
onResize页面尺寸改变时触发。小程序中无此钩子。
onTabItemTap点击 tab 时触发。需要在页面配置 tabBar。

3.uni-app内置组件 

3.1 视图容器

  • view：视图容器，可以包含其他组件和视图。

<view class="container"> <text>Hello, uni-app!</text> </view>

  • scroll-view：可滚动视图容器。

<scroll-view scroll-y="true" style="height: 200px;"> <view>Item 1</view> <view>Item 2</view> <view>Item 3</view> </scroll-view>

  • swiper：轮播图容器。

<swiper autoplay="true" interval="3000"> <swiper-item> <view>Slide 1</view> </swiper-item> <swiper-item> <view>Slide 2</view> </swiper-item> <swiper-item> <view>Slide 3</view> </swiper-item> </swiper>

3.2 基础内容

  • text：文本组件。

<text>这是一个文本</text>

  • image：图片组件。

#可以相对路径（../）、绝对路径（@/）、导入的图片（script中import的图片）、base64字符串

<image src="/static/logo.png" mode="widthFix"></image>

  • icon：图标组件。

<icon type="success" size="30"></icon>

3.3 表单组件

  • input：输入框组件。

<input type="text" placeholder="请输入内容"></input>

  • button：按钮组件。

<button type="primary">点击我</button>

  • checkbox：复选框组件。

<checkbox-group> <label><checkbox value="1"/>选项一</label> <label><checkbox value="2"/>选项二</label> </checkbox-group>

3.4 媒体组件

  • video：视频播放组件。

<video src="/static/video.mp4" controls></video>

  • audio：音频播放组件。

<audio src="/static/audio.mp3" controls></audio>

  • camera：相机组件。

<camera mode="normal"></camera>

4.uni-app扩展组件（uni-ui）

uni-app官网uni-app,uniCloud,serverless,在HBuilderX 新建uni-app项目的模板中，选择uni-ui模板,通过 uni_modules 单独安装组件,通过 uni_modules 导入全部组件,npm安装icon-default.png?t=N7T8https://uniapp.dcloud.net.cn/component/uniui/quickstart.html       Uni-UI 是 Uni-App 提供的扩展组件库，包含了一系列常用的 UI 组件，可以方便地在 Uni-App 项目中使用。

4.1 uni-ui安装使用 

4.1.1 导入整个uni-ui

        或者

4.1.2单独安装某个组件

 

5.uni-app页面之间传递参数

5.1 通过URL参数传递

        假如从A页面跳转B页面并传递参数

        A.vue中：

<template><view><button @click="navigateToDetail">跳转到B页</button></view>
</template><script>
export default {methods: {navigateToDetail() {uni.navigateTo({url: '/pages/B/B?name=luobei&age=18'});}}
}
</script>

        B.vue中接收参数：

<template><view><text>姓名：{{ name }}</text><text>年龄：{{ age }}</text></view>
</template><script>
export default {data() {return {name: '',age: ''};},onLoad(options) {// 接收 URL 参数this.name = options.name;this.age = options.age;}
}
</script>

5.2 通过全局对象传递参数

        在App.vue中定义全局数据

<script>
export default {onLaunch() {console.log('App Launch');},globalData: {userInfo: {name: 'luobei',age: 18}}
}
</script>

        A.vue中设置全局参数

<template><view><button @click="setGlobalData">设置全局数据</button></view>
</template><script>
export default {methods: {setGlobalData() {getApp().globalData.userInfo = {name: 'new name',age: 25};}}
}
</script>

        B.vue中读取全局参数

<template><view><text>姓名：{{ userInfo.name }}</text><text>年龄：{{ userInfo.age }}</text></view>
</template><script>
export default {data() {return {userInfo: {}};},onShow() {// 获取全局数据this.userInfo = getApp().globalData.userInfo;}
}
</script>

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

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

相关文章

C++ 程序员常用的VScode的插件

C++ 程序员常用的VScode的插件

vscode中好用的插件 Better CommentsBookmarksC/C ThemeChinese (Simplified) (简体中文) Language Pack for Visual Studio CodeclangdClang-FormatCodeLLDBCMakeCMake ToolsCode RunnerCode Spell CheckerCodeSnapColor Highlightvscode-mindmapDraw.io IntegrationError Len…
阅读更多...
对称加密算法的应用场景

对称加密算法的应用场景

随着信息技术的飞速发展&#xff0c;数据安全成为了至关重要的议题。在保护数据传输和存储的过程中&#xff0c;加密算法扮演着不可或缺的角色。其中&#xff0c;对称加密算法&#xff0c;由于其高效性和易用性&#xff0c;被广泛应用于各种场景中。本文将探讨对称加密算法的主…
阅读更多...
Kubernets多master集群构建负载均衡

Kubernets多master集群构建负载均衡

前言 在构建 Kubernetes 多 Master 集群时&#xff0c;实现负载均衡是至关重要的一环。通过多台 Master 节点配合使用 Nginx 和 Keepalived 等工具&#xff0c;可以有效提高集群的可靠性和稳定性&#xff0c;确保系统能够高效运行并有效应对故障。接下来将介绍如何配置这些组件…
阅读更多...
物业水电抄表系统的全面解析

物业水电抄表系统的全面解析

1.系统概述 物业水电抄表系统是现代物业管理中的重要组成部分&#xff0c;它通过自动化的方式&#xff0c;实时监控和记录居民或企业的水电使用情况&#xff0c;极大地提高了工作效率&#xff0c;降低了人工抄表的错误率。该系统通常包括数据采集、数据传输、数据分析和数据展…
阅读更多...
链表OJ题（移除链表元素，反转链表，分割链表，环形链表（是否成环问题），链表中间节点（快慢指针讲解），环形链表（找入环节点））“题目来源力扣附带题目链接”

链表OJ题（移除链表元素，反转链表，分割链表，环形链表（是否成环问题），链表中间节点（快慢指针讲解），环形链表（找入环节点））“题目来源力扣附带题目链接”

目录 1.移除链表元素 2.反转链表 2.1三指针法 2.2头插法 3.分割链表 4.链表的中间节点&#xff08;快慢指针&#xff09; 4.1快慢指针 4.2求链表的中间节点 5.环形链表 5.1环形链表是否成环 5.2环形链表入环节点 5.3入环节点推论的不完备性说明 1.移除链表元素 移除…
阅读更多...
Microsoft Threat Modeling Tool 使用(三)

Microsoft Threat Modeling Tool 使用(三)

Boundary&#xff08;边界&#xff09; 本文介绍信任边界&#xff0c;基于 SDL TM Knowledge Base (Core) 模版&#xff0c;这是一个通用的威胁建模模板&#xff0c;非常适合初学者和大多数威胁建模需求。 这些边界&#xff08;Boundary&#xff09;在微软威胁建模工具中用于表…
阅读更多...
Java多线程与高并发

Java多线程与高并发

1、什么是进程？什么是线程？ 进程:进程是程序的基本执行实体；另外一种解释是进程是一个应用程序（1个进程是一个软件）。 线程：线程是操作系统能够进行运算调度的最下单位。它被包含在进程之中，是进程中的实际运作单位；是一个进程中的执行场景/执行单元。 注意：。一个进…
阅读更多...
在云服务器上运行StyleGAN3生成伪样本

在云服务器上运行StyleGAN3生成伪样本

首先是传入数据&#xff0c;这里我们不做赘述。 对于数据格式的裁剪&#xff0c;可以通过以下代码进行&#xff1a; from glob import glob from PIL import Image import os from tqdm import tqdm from tqdm.std import trangeimg_path glob(r"C:\Users\Administrato…
阅读更多...
【Oracle篇】rman物理备份工具的基础理论概述（第一篇，总共八篇）

【Oracle篇】rman物理备份工具的基础理论概述（第一篇，总共八篇）

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&am…
阅读更多...
嵌入式是大坑的说法，是否与学生的信息不对称有关？

嵌入式是大坑的说法，是否与学生的信息不对称有关？

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 目前也算是在搞嵌入式&#…
阅读更多...
【深度学习】时空图卷积网络（STGCN），预测交通流量

【深度学习】时空图卷积网络（STGCN），预测交通流量

论文地址&#xff1a;https://arxiv.org/abs/1709.04875 Spatio-Temporal Graph Convolutional Networks: A Deep Learning Framework for Traffic Forecasting 文章目录 一、摘要二、数据集介绍美国洛杉矶交通数据集 METR-LA 介绍美国加利福尼亚交通数据集 PEMS-BAY 介绍美国…
阅读更多...
Cocktail for Mac 激活版：一站式系统优化与管理神器

Cocktail for Mac 激活版：一站式系统优化与管理神器

Cocktail for Mac是一款专为Mac用户打造的系统优化与管理工具&#xff0c;凭借其强大的功能和简便的操作&#xff0c;赢得了广大用户的喜爱。这款软件集系统清理、修复和优化于一身&#xff0c;能够帮助用户轻松解决Mac系统中的各种问题&#xff0c;提高系统性能。 Cocktail fo…
阅读更多...
Leetcode-有效的括号(带图)

Leetcode-有效的括号(带图)

20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/valid-parentheses/ 题目 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&…
阅读更多...
在做题中学习（59）：除自身以为数组的乘积

在做题中学习（59）：除自身以为数组的乘积

238. 除自身以外数组的乘积 - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a;前缀积和后缀积 思路&#xff1a;answer中的每一个元素都是除自己以外所有元素的和。那就处理一个前缀积数组和后缀积数组。 而前缀积(f[i])是&#xff1a;[0,i-1]所有元素的乘积 后缀…
阅读更多...
如何利用香港多IP服务器实现定制化的网络服务

如何利用香港多IP服务器实现定制化的网络服务

如何利用香港多IP服务器实现定制化的网络服务 在当今数字化快速发展的时代&#xff0c;企业对于网络服务的需求日益增加&#xff0c;尤其是对于定制化和高度可调整的网络服务的需求。香港&#xff0c;作为国际金融中心和数据中心的枢纽&#xff0c;提供了优越的网络基础设施和…
阅读更多...
什么是蜜罐，在当前网络安全形势下，蜜罐能提供哪些帮助

什么是蜜罐，在当前网络安全形势下，蜜罐能提供哪些帮助

在当前的互联网时代&#xff0c;网络安全威胁日益严峻&#xff0c;攻击手段层出不穷。为了应对这些威胁&#xff0c;网络安全专家们不断探索新的防御手段&#xff0c;在过去的几年里&#xff0c;一种更加积极主动的网络安全方法正在兴起。蜜罐技术便是这样一种备受瞩目的主动防…
阅读更多...
【教学类-55-05】20240516图层顺序挑战（三格长条纸加黑色边框、3*3、5张，不重复7186张，9坐标点颜色哈希值去重、保留5色）

【教学类-55-05】20240516图层顺序挑战（三格长条纸加黑色边框、3*3、5张，不重复7186张，9坐标点颜色哈希值去重、保留5色）

背景需求&#xff1a; 前期测试了4*4框格种的8种颜色&#xff0c;随机抽取7种&#xff0c;随机排列图层&#xff0c;去掉相同的图片、保留7种颜色的图片&#xff0c;最后获得5400张样图 【教学类-55-04】20240515图层顺序挑战&#xff08;四格长条纸加黑色边框、4*4、7张&…
阅读更多...
Python程序设计 文件处理(二)

Python程序设计 文件处理(二)

实验十二 文件处理 第1关&#xff1a;读取宋词文件&#xff0c;根据词人建立多个文件 读取wjcl/src/step1/宋词.txt文件&#xff0c; 注意&#xff1a;宋词文件的标题行的词牌和作者之间是全角空格&#xff08;"　")可复制该空格 在wjcl/src/step3/cr文件夹下根据每…
阅读更多...
【CSND博客纪念】“创作纪念日：从灵感迸发到小有成就——我的CSND博客创作之旅”

【CSND博客纪念】“创作纪念日：从灵感迸发到小有成就——我的CSND博客创作之旅”

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…
阅读更多...
算法分析与设计复习__递归方程与分治

算法分析与设计复习__递归方程与分治

总结自&#xff1a;【算法设计与分析】期末考试突击课_哔哩哔哩_bilibili 1.递归&#xff0c;递归方程 1.1递归条件: 1.一个问题的解可以分解为几个子问题的解&#xff1b; 2.这个问题与分解之后的子问题&#xff0c;除了数据规模不同&#xff0c;求解思路完全一样; 3.存在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023