Uni-App-01

在这里插入图片描述

HBuilder安装卸载

安装

官网地址：https://www.dcloud.io/hbuilderx.html

  1. 下载HBuilder最新版

    在这里插入图片描述

  2. 解压到安装目录，路径中不要有中文和空格

    在这里插入图片描述

  3. 在桌面上增加快捷方式

    在这里插入图片描述

卸载

  1. 执行reset.bat

    在这里插入图片描述

  2. 删除HBuilder文件夹（如果提示文件被占用，杀死相关进程再删除）

    在这里插入图片描述

夜神模拟器安装

安装

  1. 下载夜神模拟器

    网址：https://www.yeshen.com/

    在这里插入图片描述

  2. 安装夜神模拟器

    双击运行安装，目录中不要有中文和空格

    在这里插入图片描述

移动端应用开发方式分类

移动端开发

技术实现机制优势
1NativeApp原生App原生App，Android使用Java，IOS使用OC编写的直接运行操作系统中的App可以直接调用底层系统接口、性能高开发复杂，成本高
2H5使用HTML/CSS/JS编写的网页，部署在服务器上，客户端使用手机中的浏览器/内嵌浏览器来浏览编写简单，兼容性好，便于分享运行性能低，功能有限，用户使用粘性低
3WebApp使用HTML/CSS/JS编写的网页，打包安装到用户的手机中，使用内置的WebView组件来浏览编写简单，兼容性好，用户使用粘性高运行性能低，功能有限
4HybridApp混合/混编App,使用HTML/CSS/JS + Nativ.js+Java/OC编写的App，打包安装到用户的手机中运行性能比较高，功能丰富，开发方式灵活如果项目中需要的原生代码较多时，开发反倒更复杂
5各类小程序运行于专有App平台的小型App(<2MB)“无需安装”，点开即用不跨平台
6华为鸿蒙AppArkUI平台，ArkTS语言，专用于鸿蒙系统，有自己专有的解释运行平台性能高，功能丰富只用于鸿蒙系统
7Flutter App2019年Google开发的新技术，直接在GPU绘图芯片上绘图，使用Dart语言性能高，兼容性高用户和案例偏少，“未来可期”

H5：

  1. HTML5的简称
  2. 使用HTML5、CSS、JS开发的基于网页的应用程序，优势在于快速开发、上线、分享、迭代

不同前端框架可以开发哪些移动端应用程序？

  1. Vue.js: PC网站、H5站、WebApp
  2. uni-app: PC网站、H5站、WebApp、各类小程序
  3. React: PC网站、H5站、WebApp、NativeAPP

Uni-App概述

官网：https://dcloud.io

Uni-App是什么

在这里插入图片描述

Uni-App功能框架图

​ 在这里插入图片描述

案例1

​ 创建一个示例项目，在浏览器中运行 - 即uni-app编译为H5网站

  1. 创建项目

    在这里插入图片描述

  2. 配置项目

    在这里插入图片描述

  3. 创建项目

    在这里插入图片描述

  4. 打开pages/index/index.vue

    在这里插入图片描述

  5. 运行项目到浏览器

    在这里插入图片描述

  6. 等待下载插件

    HBuilder采用插件模式，工作时自动下载安装所需插件

  7. 等待编译后自动打开浏览器访问页面(如果没有自动打开手动访问控制台提示的地址)
    在这里插入图片描述

  8. 通过HBuilder内置浏览器打开页面(可能会需要下载内置浏览器插件)在这里插入图片描述

    在这里插入图片描述

案例2

创建一个示例项目，在安卓手机中调试运行 - 即uni-app编译为WebApp

  1. 安装运行Android模拟器(夜神\雷电\逍遥等都可以)

    在这里插入图片描述

  2. 找到模拟器的nox_adb.exe

    ADB：Android Debugger，安卓调试器，理解为PC机与安卓模拟器之间的“USB数据线”

    在这里插入图片描述

  3. 为HBuilder配置adb

    在这里插入图片描述

    在这里插入图片描述

  4. 运行到Android模拟器中

    在这里插入图片描述

    在这里插入图片描述

  5. 最终效果

在这里插入图片描述

Uni-App项目结构

Uni-App目录结构

在这里插入图片描述

components目录

自定义组件所在的目录，需要手动创建，且必须叫这个名字

在这里插入图片描述

index.vue

在这里插入图片描述

static目录

静态资源所在目录

index.html

SPA应用中唯一的HTML页面

在这里插入图片描述

main.js

编译入口文件

在这里插入图片描述

App.vue

根组件

在这里插入图片描述

pages.json

路由配置文件

在这里插入图片描述

mainfest.json

配置清单文件

在这里插入图片描述

项目开发

产品原型：

https://www.axureshop.com/

https://www.axureshop.com/a/1504177.html

在这里插入图片描述

创建页面

登录页

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

我的页

在这里插入图片描述

物业页

在这里插入图片描述

社区页

在这里插入图片描述

路由配置文件

路由配置文件中自动生成了路由配置

在这里插入图片描述

页面基础配置

首页

在这里插入图片描述

登录页

将登录页变为启动页：放置到数组第一位

去除导航栏

在这里插入图片描述

我的页

在这里插入图片描述

社区页

在这里插入图片描述

物业页

在这里插入图片描述

全局配置

在这里插入图片描述

页签

页签：处于应用底部的用于页面跳转的链接：
在这里插入图片描述

配置页签

在这里插入图片描述

UniApp中的标签

uni-app中的标签需要保证兼容各个平台（H5、WebApp、小程序），一般不要使用HTML标签

https://uniapp.dcloud.net.cn/component/

内置组件

可以编译为任意平台可用的标签

view(视图)、scroll-view、swiper、text、rich-text、image、button、input…

在这里插入图片描述

扩展组件

uni-ui组件库(官方+第三方)

扩展组件需要安装后才可以使用

uni-list、uni-card、uni-rating、uni-datetimer-picker…

  1. 安装扩展组件

    在这里插入图片描述

  2. 直接下载扩展组件到HBuilder

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

  3. 使用扩展组件
    在这里插入图片描述

  4. 最终效果
    在这里插入图片描述

  5. 下载扩展组件在本质

下载的扩展组件，

本质上是浏览器调用的HBuilder中的uni_modules插件

下载了指定扩展组件放置到了项目的uni_modules目录下

在这里插入图片描述

  1. 手动下载并导入扩展插件（直接导入不行使使用此方法）

    在这里插入图片描述

    在这里插入图片描述

自定义组件

创建自定义组件必需的文件：

文件必须创建在@/components目录下，且有同名父目录

在使用该组件的文件中声明自定义组件

正式使用自定义组件

  1. 创建组件

在components目录下创建

在这里插入图片描述

  1. 编写组件代码
<template><view class="go-top" @click="go"><text>返回顶部</text></view>
</template><script>export default {methods: {go(){//滚动到页面顶部——uni-app官方提供的APIuni.pageScrollTo({scrollTop: 0,	//滚动到距离顶部的位置duration: 100,  //滚动动画耗时多少毫秒})}}}
</script><!-- scoped：局部作用域的样式 -->
<!-- lang： language，指定预编译样式语言 -->
<style scoped  lang="scss">
.go-top {//固定定位到页面右下角position: fixed;right: 20rpx;		//rpx：响应式像素数bottom: 180rpx;width: 110rpx;height: 110rpx;background-color: #fff;border: 1px solid #aaa;border-radius: 50%;text-align: center;opacity: .5;font-size: 38rpx;&:active {			//SCSS中的&表示“当前元素”opacity: 1;}
}	
</style>

小程序、uni-app支持的全新尺寸单位：Responsive Pixel —— rpx，响应式像素数

因为不同的手机屏幕尺寸不同，如果做适配的话，传统的尺寸很麻烦；小程序引入了全新的尺寸单位，rpx —— 不论实际物理屏幕尺寸有多大，一律认为是750rpx

320px <=> 750rpx

360px <=> 750rpx

414px <=> 750rpx

这样一来，假设有个图片占屏幕宽度一半，width应该设定为 750rpx/2 = 375rpx

  1. 使用组件
    在这里插入图片描述

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

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

相关文章

使用语音模块的开发智能家居产品（使用雷龙LSYT201B 语音模块）

使用语音模块的开发智能家居产品（使用雷龙LSYT201B 语音模块）

在这篇博客中&#xff0c;我们将探讨如何使用 LSYT201B 语音模块 进行智能设备的语音交互开发。通过这个模块&#xff0c;我们可以实现智能设备的语音识别和控制功能&#xff0c;为用户带来更为便捷和现代的交互体验。 1. 语音模块介绍 LSYT201B 是一个基于“芯片算法”的语音…
阅读更多...
Centos7.9安装MySQL（二进制）

Centos7.9安装MySQL（二进制）

安装包 https://downloads.mysql.com/archives/community/ mysql-8.0.39-linux-glibc2.17-x86_64.tar.xz 1.卸载MariaDB 查看 rpm -qa|grep mariadb卸载 可能名称不一样&#xff0c;记得替换 rpm -e --nodeps mariadb-libs-5.5.68-1.el7.x86_64rpm -qa|grep mariadb 执行…
阅读更多...
C++游戏开发中的多线程处理是否真的能够显著提高游戏性能？如果多个线程同时访问同一资源，会发生什么？如何避免数据竞争？｜多线程｜游戏开发｜性能优化

C++游戏开发中的多线程处理是否真的能够显著提高游戏性能？如果多个线程同时访问同一资源，会发生什么？如何避免数据竞争？｜多线程｜游戏开发｜性能优化

目录 1. 多线程处理的基本概念 1.1 多线程的定义 1.2 线程的创建与管理 2. 多线程在游戏开发中的应用 2.1 渲染与物理计算 3. 多线程处理的性能提升 3.1 性能评估 3.2 任务分配策略 4. 多线程中的数据竞争 4.1 数据竞争的定义 4.2 多线程访问同一资源的后果 4.3 避…
阅读更多...
数字后端零基础入门系列 | Innovus零基础LAB学习Day5

数字后端零基础入门系列 | Innovus零基础LAB学习Day5

###Module 12 RC参数提取和时序分析 数字后端零基础入门系列 | Innovus零基础LAB学习Day4 数字后端零基础入门系列 | Innovus零基础LAB学习Day3 数字后端零基础入门系列 | Innovus零基础LAB学习Day2 数字后端零基础入门系列 | Innovus零基础LAB学习Day1 ###LAB12-1 这个章节…
阅读更多...
六自由度机械臂模型预测控制MPC+倒立摆+二自由度机械臂

六自由度机械臂模型预测控制MPC+倒立摆+二自由度机械臂

接下来三个例子教你入门mpc&#xff0c;为了体现视频的高质量&#xff0c;在倒立摆和二自由度模型预测控制方面&#xff0c;我会给出一种基于状态变量微分的实时线性化策略&#xff0c;经过这样处理的mpc实际可以看作是nmpc。 1.一阶倒立摆MPC 1.1倒立摆状态方程 1.2倒立摆状…
阅读更多...
rabbitmq 使用注意事项

rabbitmq 使用注意事项

1&#xff0c;注意开启的端口号&#xff0c;一共四个端口号&#xff0c;1883是mqtt连接的端口号&#xff0c;如果没开&#xff0c;是连接不上的需要手动起mqtt插件。 //开始mqtt插件服务 rabbitmq-plugins enable rabbitmq_mqtt 2&#xff0c;15672端口是http网页登录的管理后…
阅读更多...
深度学习模型预测控制python tensorflow 实现

深度学习模型预测控制python tensorflow 实现

DL-MPC&#xff08;Deep Learning Model Predictive Control&#xff09;是一种结合深度学习和模型预测控制的先进控制策略。其核心思想是利用深度学习模型来预测系统的未来行为&#xff0c;并通过模型预测控制来优化控制输入&#xff0c;从而实现对复杂系统的高效控制。 深度…
阅读更多...
MATLAB实现遗传算法优化零件拆卸装配问题

MATLAB实现遗传算法优化零件拆卸装配问题

零件拆卸装配问题是一个有复杂约束的优化问题&#xff0c;它涉及到零件之间的连接关系、拆卸或装配的顺序、工具的使用、操作成本。 1.假设&#xff1a; &#xff08;1&#xff09;零件完整性&#xff1a;每个零件在拆卸和装配过程中保持完整&#xff0c;不发生形变或损坏 &…
阅读更多...
BUUCTF之web篇

BUUCTF之web篇

第一题 [极客大挑战 2019]EasySQL 打开靶机后可以看到这是一个登陆的页面 我们可以尝试两种方式登录 弱口令爆破&#xff08;burpsuite&#xff09; 通过SQL注入里的万能密码来跳过账户和密码验证的过程 这里就需要万能密码aor true # 在这里单引号的作用是结束用户名或者密码…
阅读更多...
Javascript基础面试题

Javascript基础面试题

仅学习使用&#xff0c;若有侵权将修改或删除|面试鸭 Javascript 有哪些数据类型?它们的区别是什么? 7 原始类型Undefined、Null、Boolean、Number、String、Symbol和BigInt 引用类型&#xff1a;Object(对象、函数和数组等&#xff09; 如何判断 JavaScript 变量是数组? …
阅读更多...
《BLEU: a Method for Automatic Evaluation of Machine Translation》翻译

《BLEU: a Method for Automatic Evaluation of Machine Translation》翻译

文章目录 0. 摘要1. 引言1.1 理由1.2 观点 2. 基准 BLEU 指标2.1 修正的 n-gram 精度2.1.1 对文本块的修正 n-gram 精度2.1.2 仅使用修正 n-gram 精度对系统进行排序2.1.3 结合修正的 n-gram 精度 2.2 句子长度2.2.1 召回率的问题2.2.2 句子简短惩罚 2.3 BLEU 细节 3. BLEU 评估…
阅读更多...
如何在Node.js中执行解压缩文件操作

如何在Node.js中执行解压缩文件操作

一、解压文件 1.安装依赖&#xff1a; 安装adm-zip依赖包&#xff1a;npm install adm-zip --save 安装iconv-lite依赖包&#xff1a;npm install iconv-lite --save 解压前的file文件夹结构&#xff1a; update-1.0.2.zip压缩包内容&#xff1a; 2.在depresssFile.js文件&…
阅读更多...
鸿蒙是必经之路

鸿蒙是必经之路

少了大嘴的发布会&#xff0c;老实讲有点让人昏昏入睡。关于技术本身的东西&#xff0c;放在后面。 我想想来加把油~ 鸿蒙发布后褒贬不一&#xff0c;其中很多人不太看好鸿蒙&#xff0c;一方面是开源性、一方面是南向北向的利益问题。 不说技术的领先点&#xff0c;我只扯扯…
阅读更多...
【网络原理】网络地址转换----NAT技术详解

【网络原理】网络地址转换----NAT技术详解

&#x1f490;个人主页&#xff1a;初晴~ &#x1f4da;相关专栏&#xff1a;计算机网络那些事 我们在 IP协议 一文中介绍过&#xff0c;由于IPv4协议中 IP地址只有32位&#xff0c;导致最多只能表示 42亿9千万个IP地址。但我们需要通过IP地址来标识网络上的每一个设备&#x…
阅读更多...
【p2p、分布式，区块链笔记 IPFS】go-ipfs windows系统客户端节点实现 kubo试用

【p2p、分布式，区块链笔记 IPFS】go-ipfs windows系统客户端节点实现 kubo试用

Kubo &#xff08;go-IPFS&#xff09; 是最早和使用最广泛的 IPFS 实现。它包括&#xff1a; 一个 IPFS 守护程序服务器广泛的命令行工具用于控制节点的 HTTP RPC API用于向 HTTP 浏览器提供内容的 HTTP 网关 下载 https://dist.ipfs.tech/#go-ipfs 解压 初始化 C:\User…
阅读更多...
docker-minio启动参数

docker-minio启动参数

完整命令 docker run -p 9000:9000 -p 9090:9090 -v /opt/minio/data:/data -d --name -d --restartalways minio -e "MINIO_ACCESS_KEYminio" -e "MINIO_SECRET_KEYminioadmin123" minio/minio server --console-address ":9090" -address &q…
阅读更多...
IDEA开发工具使用技巧积累

IDEA开发工具使用技巧积累

一、IDEA 工具设置默认使用maven的settings.xml文件 第一步&#xff1a;打开idea工具&#xff0c;选中 File ——> New Projects Setup ——> Settings for New Projects 第二步&#xff1a;先设置下自动构建项目这个选项 第三步&#xff1a;选中 Build Tools ——>…
阅读更多...
正点原子阿尔法ARM开发板-IMX6ULL（九）——关于SecureCRT连接板子上的ubuntu

正点原子阿尔法ARM开发板-IMX6ULL（九）——关于SecureCRT连接板子上的ubuntu

文章目录 一、拨码器二、SecureCRT 一、拨码器 emmm,也是好久没学IMX6ULL了&#xff0c;也是忘了拨码器决定了主板的启动方式 一种是直接从TF卡中读取文件&#xff08;注意这里是通过imdownload软件编译好了之后&#xff0c;通过指令放入TF卡&#xff09; 一种是现在这种用串口…
阅读更多...
日常笔记记录

日常笔记记录

1、Http 1.1 概念 HTTP 是 HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09;的简写&#xff0c;它是 TCP/IP 协议集中的一个应用层协议&#xff0c;是客户端与服务端进行交互时必须遵循的规则。它用于定义 Web 浏览器与 Web 服务器之间交换数据的过程以及…
阅读更多...
Golang | Leetcode Golang题解之第504题七进制数

Golang | Leetcode Golang题解之第504题七进制数

题目&#xff1a; 题解&#xff1a; func convertToBase7(num int) string {if num 0 {return "0"}negative : num < 0if negative {num -num}s : []byte{}for num > 0 {s append(s, 0byte(num%7))num / 7}if negative {s append(s, -)}for i, n : 0, len…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023