uni-app 超详细教程（一）（从菜鸟到大佬）

news2024/11/29 14:52:44

一，uni-app 介绍 ：

官方网页
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

简单说： 1次开发 多端运行

二，准备工具

  1. Hbuilderx （开发与编译工具）

  2. 微信小程序开发工具（微信小程序预览测试）

  3. 安卓模拟器/真机
    运行app

官方链接在上面，点解下载

三，新建项目 / 认识界面

1，新建项目

  1. 点击HbuilderX菜单栏文件>项目>新建
  2. 选择uni-app,填写项目名称，项目创建的目录
    在这里插入图片描述

2，认识界面

在这里插入图片描述
在这里插入图片描述

2.1 介绍项目目录和文件作用

  1. pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
  2. manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。
  3. App.vue：是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
  4. main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
  5. uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
  6. unpackage：就是打包目录，在这里有各个平台的打包文件
  7. pages：所有的页面存放目录
  8. static：静态资源目录，例如图片等
  9. components：组件存放目录

3，全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档

在这里插入图片描述

注意：

如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
微信开发者工具在设置中安全设置，服务端口开启

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

  • 页面文件遵循 Vue 单文件组件 (SFC) 规范
  • 组件标签靠近小程序规范，详见uni-app 组件规范
  • 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
  • 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
  • 为兼容多端运行，建议使用flex布局进行开发

四，运行多端

1，H5

在这里插入图片描述

在这里插入图片描述

2，小程序

01 打开开发工具的服务端口

在这里插入图片描述

02 HBuilderx配置 微信开发工具的地址

在这里插入图片描述
在这里插入图片描述

03 配置微信小程序id

在这里插入图片描述

04 运行到微信小程序 在这里插入图片描述

3，App

01 打开模拟器或者手机

在这里插入图片描述

02 配置模拟器的端口

在这里插入图片描述
在这里插入图片描述

各模拟器 端口号：

夜神模拟器端口号：62001

海马模拟器端口号：26944

逍遥模拟器端口号：21503

MuMu模拟器端口号：7555

天天模拟器端口号：6555

03 运行到模拟器

在这里插入图片描述

在这里插入图片描述

4，注意项

  1. hbuilder可能需要下载对应的插件
  2. 运行到安卓模拟器，有视图差别
  3. 运行可以需要一定的诗句

五，语法：

1，模板语法

1.1，文本渲染

{{表达式}}
		v-text=“表达式”
表达式
		简单的js运算
				{{2+3}}
		js方法调用
				{{title.length}}
				{{title.split("").reverse().join("")}}
		3元运算符
				<view>{{title.length>15?'长度很长':'字少事大'}}</view>
v-html 富文本

1.2，条件渲染

v-if

v-else-if

v-else

v-show

通过三元运算符

1.3，列表选项

字符串，数字，列表，对象都可以遍历

<view v-for="(item,index) in list" :key="index">{{index+1}}  {{item}}</view>

一定要保证兄弟元素间的key值是唯一

1.4， 属性绑定

<button v-bind:disabled=“true”>
<button :disabled="true">

1.5，表单绑定

默认

:value="单向绑定"

input

v-model=“双向绑定”

@change=“$event.detail.value”
事件，事件的值$event.detail.value

1.6，事件

1.6.1，事件绑定：

<view v-on:click="响应"

简写绑定：

<view @click="事件响应"

事件行内处理

<view @click="num++"

事件响应函数 (函数在methods定义)

<view @click="say"
<view @click="say"

1.6.2，事件传参

不写参数

@click="say"
等同于 
@click=“say()”
等同于
@click=“say($event)”

$event 是一个固定写法 代表事件对象

@click=“doit(str)”
doit(str="你好"){
	uni.showModal({title:str})
}

1.6.3，事件对象 $event/e

function say(e){
}
//   target目标对象
//   dataSet 组件传参
<view :data-title="title" @click="say">
function say(e){
      e.target.dataset.title
}

2，uni-app页面 配置

页面配置 pages.json

globalStyle 默认页面的样式会应用全局样式

页面写了style 配置，那么用的配置覆盖全局的配置

**pages** 页面

path页面路径
style 页面样式

3，vue选项

data ：数据
methods： 方法
computed ：计算
watch：监听
directive：指令
filter：过滤

六，uni-app的生命周期

1，Vue的生命周期

创建

1. beforeCreate

2. created

可以使用this，没有dom

作用：

  1. 初始数据
  2. 注册监听事件
  3. 开启定时器
  4. ajax请求

挂载

1. beforeMount

2. mounted

可以操作dom（节点）

作用：

  1. 操作dom
  2. ajax请求

更新

1. beforeUpdate

2. updated

卸载

1. beforeDestroy

2. destroyed

作用：

  1. 移除事件监听
  2. 移除停止定时器

2，小程序的生命周期

加载

onLoad

作用：

能够获取页面的参数
开启ajax，定时器，事件监听
像vue的created

显示

onShow

作用：

播放媒体

准备

onReady

作用：

获取节点信息
像vue的mounted

后台运行

onHide

作用：

停止播放媒体

卸载

onUnload

作用：

停止事件监听与定时器

3，小程序的全局方法

下拉刷新

onPullDownRefresh

触底更新

onReachBottom()

右上角分享

onShareAppMessage

页面滚动

onPageScroll

分享到朋友圈

onShareTimeline

4，app的全局方法

4.1，手机的返回键被点击

onBackPress

4.2，导航栏按钮被点击

onNavigationBarButtonTap

七，路由

1，路由组件

导航 navigator

url 跳转页面的地址

打开类型 open-type

navigate跳转
redirect重定向（当前页面不留历史记录）
navigateBack返回
relauch 重启
switchTab 跳转底部栏

2，路由传参

传递

url:path?name=mumu&age=18

接收

onLoad(option){}

option的值{name:“mumu”,age:18}

3，路由api

跳转

uni.navigateTo({url})

重定向

uni.redirectTo({url})

返回

uni.navigateBack()

底部栏切换

uni.switchTab()

重启

uni.reLaunch()

4，路由配置 + （底部选项栏配置）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

语法解释

"borderStyle": “边框颜色”,
"selectedColor": “字体选中后的颜色”,
"backgroundColor":“底部栏背景颜色”,
“color”: “默认字体颜色”,
"list": [{ 选项列表
"pagePath": "页面路径",
"iconPath": “未选择时的图片（图片路径）”,
"selectedIconPath": “选择时的图片（图片路径）”,
"text": “底部选项文字”
},

// 配置tabbar导航栏
	"tabBar": {
		"borderStyle": "#eaeaea",
		"selectedColor": "#f12525",
		"backgroundColor": "#ffffff",
		"color": "#444444",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/img/home.png",
				"selectedIconPath": "static/img/home-hl.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/cate/cate",
				"iconPath": "static/img/type.png",
				"selectedIconPath": "static/img/type-hl.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/member/member",
				"iconPath": "static/img/ceo.png",
				"selectedIconPath": "static/img/ceo-hl.png",
				"text": "会员"
			},
			{
				"pagePath": "pages/Cart/Cart",
				"iconPath": "static/img/cart.png",
				"selectedIconPath": "static/img/cart-hl.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/mine/mine",
				"iconPath": "static/img/mine.png",
				"selectedIconPath": "static/img/mine-hl.png",
				"text": "我的"
			}
		]
	},

注意：

底部选项**最多设置5个，最少2个**

5，获取当前页面 getApp

	01 在App.vue

定义globalData:{num:100}
02 要使用的页面获取app
var app = getApp()
03获取globalData的值
onShow(){
this.num = app.globalData.num
}
04 更新globalData值
addNum(){
app.globalData.num++;
this.num = app.globalData.num
}

6，获取页面栈 getCurrentPages

var page  = getCurrentPages();
uni.navigateBack({delta:page.length})

获取当前的页面栈，是一个数组（1-5）

page[page.length-1]

获取当前页面的信息（不要去修改）

八，条件编译

目的:

不同的平台展示不同特性与功能
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

介绍：

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

  • #ifdef：if defined 仅在某平台存在
  • #ifndef：if not defined 除了某平台均存在
  • %PLATFORM%：平台名称

在这里插入图片描述

1， 模板条件编译

格式

<!-- #ifdef H5 -->
	**内容**
<!-- #endif -->

条件

APP —— App端
H5 —— 网页
MP —— 小程序
MP-WEIXIN —— 微信小程序

2，css条件编译

/* #ifdef APP */
     .active{color:red}
/* #endif */

3，js条件编译

// #ifdef APP-PLUS
	uni.showModal({
		title:"你好App用户"
	})
// #endif

4，条件配置

pages.json
		“style”:{
  "h5":{
      "titleNView":{
          "titleText":"我是H5"
       }
  },
  "app-plus": {
      "titleNView":false //隐藏导航栏
  }
}

// #ifdef MP-WEIXIN	|| APP	
{
	"path":"pages/condition/we",
	"style":{
		"navigationBarTitleText": "小程序专有页面"
	}
},
// #endif

在这里插入图片描述

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

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

相关文章

百度集团副总裁吴甜发布文心大模型最新升级，AI应用步入新阶段

百度集团副总裁吴甜发布文心大模型最新升级，AI应用步入新阶段

11月30日&#xff0c;由深度学习技术与应用国家工程研究中心主办、百度飞桨承办的WAVE SUMMIT2022深度学习开发者峰会如期举行。百度集团副总裁、深度学习技术及应用国家工程研究中心副主任吴甜带来了文心大模型的最新升级&#xff0c;包括新增11个大模型&#xff0c;大模型总量…
阅读更多...
PyQt5_寻找顶(底)背离并可视化

PyQt5_寻找顶(底)背离并可视化

技术指标的背离是指技术指标曲线的波动方向与价格曲线的趋势方向不一致&#xff0c;是使用技术指标最为重要的一点。在股市中&#xff0c;常见的技术指标的背离分为两种常见的形式&#xff0c;即顶背离和底背离。背离是预示市场走势即将见顶或者见底的依据&#xff0c;在价格还…
阅读更多...
计算机组成原理习题课第四章-1（唐朔飞）

计算机组成原理习题课第四章-1（唐朔飞）

计算机组成原理习题课第四章-1&#xff08;唐朔飞&#xff09; ✨欢迎关注&#x1f5b1;点赞&#x1f380;收藏⭐留言✒ &#x1f52e;本文由京与旧铺原创&#xff0c;csdn首发&#xff01; &#x1f618;系列专栏&#xff1a;java学习 &#x1f4bb;首发时间&#xff1a;&…
阅读更多...
k8s部署手册

k8s部署手册

一、基础配置 1.修改主机名 hostnamectl set-hostname k8s-master01 hostnamectl set-hostname k8s-master02 hostnamectl set-hostname k8s-master03 hostnamectl set-hostname k8s-node01 hostnamectl set-hostname k8s-node022.添加 主机名与IP地址解析 cat > /etc/hos…
阅读更多...
LINUX安装openssl

LINUX安装openssl

openssl 官网下载 https://www.openssl.org/source/old/ 1、解压openssl包&#xff1a; tar -xzf openssl-1.1.1n.tar.gz2、得到openssl-1.1.1n目录&#xff0c;然后进入openssl-1.1.1n目录中&#xff0c;安装openssl到 /usr/local/openssl 目录&#xff0c;安装之后&#xff…
阅读更多...
[附源码]Python计算机毕业设计SSM联动共享汽车管理系统（程序+LW)

[附源码]Python计算机毕业设计SSM联动共享汽车管理系统（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
如何在 SwiftUI 中创建条形图

如何在 SwiftUI 中创建条形图

条形图以矩形条的形式呈现数据的类别，其宽度和高度与它们表示的值成比例。本文将展示如何创建一个垂直条形图，其中矩形的高度将代表每个类别的值。 系列文章 如何在 SwiftUI 中创建条形图SwiftUI 中的水平条形图在 iOS 16 中用 SwiftUI Charts 创建一个折线图在 iOS16 中用 …
阅读更多...
在 Node.js 中操作 Redis

在 Node.js 中操作 Redis

在 Node.js 中操作 Redis Node.js 中可以操作 Redis 的软件包推荐列表&#xff1a;https://redis.io/clients#nodejs。 推荐下面两个&#xff1a; node-redisioredis 这里主要以 ioredis 为例。 ioredis 是功能强大的 Redis 客户端&#xff0c;已被世界上最大的在线商务公司…
阅读更多...
MyBatis详解（一）

MyBatis详解（一）

MyBatis简单介绍 【1】MyBatis是一个持久层的ORM框架【Object Relational Mapping&#xff0c;对象关系映射】&#xff0c;使用简单&#xff0c;学习成本较低。可以执行自己手写的SQL语句&#xff0c;比较灵活。但是MyBatis的自动化程度不高&#xff0c;移植性也不高&#xff…
阅读更多...
数据库索引

数据库索引

目录 &#x1f407;今日良言:志在山顶的人&#xff0c;不会贪念山腰的风景。 &#x1f409;数据库索引 &#x1f433;1.概念 &#x1f433;2.使用 &#x1f433;3.在mysql中的数据结构 &#x1f407;今日良言:志在山顶的人&#xff0c;不会贪念山腰的风景。 &#x1f409…
阅读更多...
Java基础

Java基础

抽象类和普通类的区别抽象类不能被实例化。-- 抽象类只在分配了在栈中的引用&#xff0c;没有分配堆中的内存抽象类可以有构造函数&#xff0c;被继承时子类必须实现(调用)父类一个构造方法 — 《因为子类会继承父类的构造方法&#xff0c;如果父类方法中的构造函数是带有参数的…
阅读更多...
乾元通多卡聚合路由设备海上通信应用解决方案

乾元通多卡聚合路由设备海上通信应用解决方案

随着海上通信的发展&#xff0c;在各种应用需求的推动下&#xff0c;海上通信正在向着定制化的需求迈进。 海上通信通信建设目的是要构建一个战时、巡逻和应急情况下移动通信枢纽&#xff0c;为战时、巡逻和应急状态下提供多种通信保障手段。 乾元通智能融合通信设备可配合装…
阅读更多...
Graalvm安装配置与springboot3.0尝鲜

Graalvm安装配置与springboot3.0尝鲜

Graalvm安装配置与springboot3.0尝鲜 Spring 团队一直致力于 Spring 应用程序的原生映像支持已有一段时间了。经过3 年的孵化春季原生Spring Boot 2 的实验性项目&#xff0c;原生支持将在 Spring Framework 6 和 Spring Boot 3 中正式发布&#xff01; 安装Graalvm 由于spri…
阅读更多...
别再问我Python打包成exe了！（终极版）

别再问我Python打包成exe了！（终极版）

那今天我就给大家全面总结一下&#xff1a;Python如何打包成exe&#xff0c;以及如何打得足够小。 一、标准打包 目前比较常见的打包exe方法都是通过Pyinstaller来实现的&#xff0c;本文也将使用这种常规方法。如果对这块已经很熟悉的小伙伴&#xff0c;可以直接下滑到本文下…
阅读更多...
Javaweb的AJAX及Axios框架使用（封装AJAX）

Javaweb的AJAX及Axios框架使用（封装AJAX）

概念: AJAX(Asynchronous JavaScript And XML):异步的JS和XML。 作用: 与服务器进行数据交换 :通过AJAX可以给服务器发送请求。使用AJAX和服务器进行通信&#xff0c;就可以使用HTMLAJAX来替换JSP页面。异步交互 :可以在不重新加载整个页面的情况下&#xff0c;与服务器交互…
阅读更多...
[附源码]SSM计算机毕业设计学生宿舍管理系统JAVA

[附源码]SSM计算机毕业设计学生宿舍管理系统JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
永磁同步电机转子位置估算专题——正交锁相环

永磁同步电机转子位置估算专题——正交锁相环

前言 在电机转子位置估算算法中&#xff0c;常常用到锁相环获取磁链信号或反电势信号中的转子位置信息&#xff0c;考虑到包含转子位置信息的磁链信号或反电势信号多被分解在α,β\alpha,\betaα,β轴&#xff0c;以下内容侧重分析适用于该工况的正交锁相环。 1、正交锁相环原…
阅读更多...
线性代数学习笔记10-3：奇异值分解SVD（从四个子空间角度理解）

线性代数学习笔记10-3：奇异值分解SVD（从四个子空间角度理解）

从四个子空间角度理解SVD AUmmΣmnVnnTA U_{m \times m}\Sigma_{m \times n}V_{n \times n}^TAUmm​Σmn​VnnT​ 将A\mathbf {A}A视为线性变换&#xff0c;并将整个Rn\mathbf R^nRn空间拆分为两部分&#xff0c;即A\mathbf {A}A的行空间&#xff08;维数rrr&#xff09;和零空…
阅读更多...
cisco asa学习笔记

cisco asa学习笔记

cisco asa学习笔记一、网络模拟实验中的问题调试记录1、ASA自身接口地址ping不通(从远端路由过来的主机)2、同安全级别的接口默认不能通信&#xff0c;怎么才能通信&#xff1f;3、一个asa连接3个路由器&#xff0c;互联互通解决方案<1>方案1 全局开启policy-map inspect…
阅读更多...
C++习题2

C++习题2

指针调用数组元素 指针调用数组元素 int a[3][4] {{1,4,7,10},{2,5,8,11},{3,6,9,12}};int* pa[3] { a[0],a[1],a[2] };int(*pb)[4]; pb a;int** q pa;cout << *(a[2] 3)<<endl;cout << *(*(pa 2) 3)<<endl;cout << pb[2][3]<<en…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023