【uni-app】详细总结uni-app基础知识和如何配置项目,运行到模拟器和小程序端,附案例和图(建议收藏)

news2025/2/27 17:08:48

1- uni-app 简介


1.1 介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。 开发者编写一套代码,可发布到 iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

在这里插入图片描述

详细的 uni-app 官方文档,请翻阅 https://uniapp.dcloud.net.cn/

1.2 总结

  1. 由dcloud公司开发的 多端融合框架,1次开发,多端运行;
  2. 竞品:apiCloud ,appCan,Codova
  3. 技术架构:Vue语法+小程序的api
  4. 多端混合开发Hybrid
  • App端
    • nvue(原生view)
    • native.js(js原生沟通的桥梁)
    • weex
    • 内置ios/安卓的模块使用
  • H5端(h5专用api)
  • 各种小程序(微信为主)

2- 工具


2.1 前言

准备工具:

  • HbuilderX(开发与编译工具)
  • 微信开发工具(微信小程序预览测试)
  • 安卓模拟器/真机(运行app)

2.2 HbuilderX

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。

可以根据自己的喜好,选择喜欢的编辑器!

2.2.1 下载安装 HbuilderX
  1. 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
  2. 点击首页的DOWNLOAD按钮
  3. 选择下载正式版-> App 开发版
  4. 将下载的zip包进行解压缩
  5. 将解压之后的文件夹,存放到纯英文的目录中(且不能包含括号等特殊字符)
  6. 双击HBuilderX.exe即可启动 HBuilderX

2.3 微信开发工具

这个我们学微信小程序的时候,已经安装过了,此处不再赘述…

不太明白的小伙伴,可以看这篇博客 【微信小程序】小程序使用详细教程(建议收藏)

2.4 安卓模拟器/真机

针对这个,小媛下载了 木木模拟器,小伙伴可以安装自己喜欢的模拟器。

木木模拟器网址https://mumu.163.com/

安装步骤此处不再赘述…

3- 新建uni-app项目


3.1 新建项目

  1. 文件 -> 新建 -> 项目

在这里插入图片描述

  1. 填写项目基本信息

在这里插入图片描述

  1. 项目创建成功

在这里插入图片描述

3.2 界面介绍

3.2.1 目录结构

一个 uni-app 项目,默认包含如下目录及文件:

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

在这里插入图片描述

3.2.2 页面介绍

在这里插入图片描述

4- 运行uni-app项目


4.1 运行到微信开发者

把项目运行到微信开发者工具:

  1. 填写自己的微信小程序的 AppID

在这里插入图片描述

  1. 在 HBuilderX 中,配置“微信开发者工具”的安装路径

在这里插入图片描述

  1. 在微信开发者工具中,通过设置 -> 安全设置面板,开启“微信开发者工具”的服务端口

在这里插入图片描述

  1. 在 HBuilderX 中,点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具,将当前 uni-app 项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试:

在这里插入图片描述

  1. 初次运行成功之后的项目效果:

在这里插入图片描述

4.2 运行H5

  1. 在 HBuilderX 中,点击菜单栏中的 运行 -> 运行到内置浏览器,将当前 uni-app 项目编译之后,自动运行到内置中,从而方便查看项目效果与调试:

在这里插入图片描述

  1. 初次运行成功之后的项目效果:

在这里插入图片描述

4.3 运行到木木模拟器

不同的模拟器对应的端口号,我们需要配置:

  • 夜神模拟器端口号:62001
  • 海马模拟器端口号:26944
  • 逍遥模拟器端口号:21503
  • MuMu模拟器端口号:7555
  • 天天模拟器端口号:6555
  1. 打开模拟器或者手机

在这里插入图片描述

  1. 打开配置模拟器的端口,需要点击 运行-->运行到手机或模拟器--> Android模拟器端口设置

在这里插入图片描述

  1. 配置模拟器的端口,此处填写木木模拟器的端口号 7555;

在这里插入图片描述

  1. 运行到模拟器

在这里插入图片描述

  1. 点击运行

在这里插入图片描述

注意:

  1. 先打开木木模拟器
  2. hHuilder可能需要下载对应的插件,运行到安卓模拟器,有视图差别,运行需要时间
  1. 成功运行项目

在这里插入图片描述

5- uni-app 生命周期


5.0 生命周期

详细内容可取uni-app 官网查看

在这里插入图片描述

5.1 vue的生命周期

具体内容可看博客:【Vue】Vue2生命周期详解

在这里插入图片描述

5.2 小程序的生命周期

5.2.1 简介

小程序中,生命周期主要分成了三部分:

  • 应用的生命周期

小程序的生命周期函数是在app.js里面调用的,通过App(Object)函数用来注册一个小程序,指定其小程序的生命周期回调

  • 页面的生命周期

页面生命周期函数就是当你每进入/切换到一个新的页面的时候,就会调用的生命周期函数,同样通过App(Object)函数用来注册一个页面

  • 组件的生命周期

组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发,通过Component(Object)进行注册组件

5.2.2 生命周期
  • 应用的生命周期
生命周期说明
onLaunch小程序初始化完成时触发,全局只触发一次
onShow小程序启动,或从后台进入前台显示时触发
onHide小程序从前台进入后台时触发
onError小程序发生脚本错误或 API 调用报错时触发
onPageNotFound小程序要打开的页面不存在时触发
onUnhandledRejection()小程序有未处理的 Promise 拒绝时触发
onThemeChange系统切换主题时触发
  • 页面的生命周期
生命周期说明作用
onLoad生命周期回调—监听页面加载发送请求获取数据
onShow生命周期回调—监听页面显示请求数据
onReady生命周期回调—监听页面初次渲染完成获取页面元素(少用)
onHide生命周期回调—监听页面隐藏终止任务,如定时器或者播放音乐
onUnload生命周期回调—监听页面卸载终止任务
  • 组件的生命周期
生命周期说明
created生命周期回调—监听页面加载
attached生命周期回调—监听页面加载
ready生命周期回调—监听页面初次渲染完成
moved生命周期回调—监听页面隐藏
detached生命周期回调—监听页面卸载
error生命周期回调—监听页面卸载

5.3 小程序的全局方法

具体内容可看博客:【小程序】微信小程序常用api的使用,附案例(建议收藏)

在这里插入图片描述

6- 页面和路由


6.1 路由组件

navigator 导航

  • url 跳转页面的地址
  • open-type 打开类型
    • navigate 跳转、
    • redirect重定向(当前页面不留历史记录)
    • navigateBack 返回、
    • relaunch 重启、
    • switchTab 跳转底部栏
6.1.1 案例
  • index.vue
		<!-- 导航的跳转 -->
		<navigator url="/pages/life/life">
			<button type="default">生命周期</button>
		</navigator>
		<navigator url="/pages/joke/joke" open-type="reLaunch">
			<button>笑话大全</button>
		</navigator>
		<navigator url="/pages/options/options" open-type="switchTab">
			<button type="warn">options(要用switchTab)</button>
		</navigator>

6.2 路由传参

传递参数

  • url 里拼接 count=5&title=来自index

接收参数

6.2.1 案例
  • life.vue
		<!-- 页面传参 -->
		<navigator url="/pages/options/options?count=5&title=来自index">
			<button type="primary">life(页面传参)</button>
		</navigator>
  • options.vue
		onLoad(option) {
			//console.log("ccc", option);
			this.count = option.count;
			uni.setNavigationBarTitle({
				title: option.title
			})
		},

在这里插入图片描述

6.3 路由API

可以在官方网址查看API:https://uniapp.dcloud.net.cn/api/router.html#

在这里插入图片描述

uni.navigateTo({url}) 跳转
uni.redirectTo({url}) 重定向
uni.navigateBack() 返回
uni.switchTab() 底部栏切换
uni.reLaunch() 重启

6.3.1 案例
  • life.vue
		<!-- 页面跳转 -->
		<button type="warn" size="mini" @click="goOptions">go选项</button>
		<button type="primary" size="mini" @click="goIndex">Index选项</button>
methods: {
			goOptions() {
				uni.navigateTo({
					// 跳转并传参
					url: "/pages/options/options?count=1000&title=来自js跳转"
				})
			},
			goIndex() {
				// 重定向
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
         }

在这里插入图片描述

6.4 获取当前页面getApp()

6.4.1介绍

getApp() 函数用于获取当前应用实例,一般用于获取globalData 。

实例

const app = getApp()
console.log(app.globalData)

注意:

  • 不要在定义于App()内的函数中,或调用App前调用 getApp() ,可以通过this.$scope获取对应的app实例
  • 通过getApp()获取实例之后,不要私自调用生命周期函数。
  • 当在首页nvue中使用getApp()不一定可以获取真正的App对象。对此提供了const app = getApp({allowDefault: true})用来获取原始的App对象,可以用来在首页对globalData等初始化
6.4.2 案例
  1. App.vue 定义
globalData:{num:100}
  1. 要使用的页面获取app
var app = getApp()
<!-- 获取当前页面 -->
<button type="warn" @click="addNum">{{num}}</button>
  1. 获取globalData的值
onShow(){
  this.num = app.globalData.num
​}
  1. 更新globalData
addNum(){
app.globalData.num++;
this.num = app.globalData.num
​}

在这里插入图片描述

6.5 获得页面栈getCurrentPages

6.5.1介绍

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意: getCurrentPages()仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。

每个页面实例的方法属性列表:

方法描述平台说明
page.$getAppWebview()获取当前页面的webview对象实例App
page.route获取当前页面的路由

注意:

- navigateTo, redirectTo 只能打开非 tabBar 页面。

  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面
  • 页面底部的tabBar由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar
  • 不能在 App.vue 里面进行页面跳转。
6.5.2 案例
  • 获取当前的页面栈,是一个数组(1-5)
var page = getCurrentPages
uni.navigateBack({delta:page.length})
//page[page.length-1]获取当前页面的信息不要去修改
  • code
    在这里插入图片描述

6.6 路由配置 tabBar

  • pages.json 配置底部栏
"tabBar": {
		"color": "#777777",
		"selectedColor": "#ff3300",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/home.png",
				"selectedIconPath": "static/home-active.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/options/options",
				"iconPath": "static/sort.png",
				"selectedIconPath": "static/sort-acitve.png",
				"text": "选项"
			}
		]
	},
  • code

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

7- 条件编译


7.1 简介

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

写法:以#ifdef#ifndef%PLATFORM%开头,以 #endif 结尾。

解释:

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

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

具体内容可查看uni-app 官网https://uniapp.dcloud.net.cn/tutorial/platform.html

7.2 模板条件编译

  1. 在 hHuilder 写以下代码:
		<view>
			<view class="title">条件</view>
			<!-- #ifdef H5 -->
			<view>H5:下载App 获取优惠券</view>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view>App 优惠券0.5元</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view>微信小程序福利专享</view>
			<!-- #endif -->
		</view>
  1. 在不同的端,我们可以看到不同的内容

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

7.3 CSS条件编译

  1. 在 hHuilder 写以下代码:
<!-- condition.vue -->
<view class="active">我要变成不同的颜色</view>
<style>

	/* #ifdef APP-PLUS/*
	.active {
		color: #ffcc00;
	}
	/* #endif */

	/* #ifdef H5 */
	.active {
		color: lawngreen;
	}
	/* #endif */

	/* #ifdef MP-WEIXIN */
	.active {
		color: cornflowerblue;
	}
	/* #endif */
</style>
  1. 在不同的端,我们可以看到不同的内容

在这里插入图片描述

在这里插入图片描述

7.4 js条件编译

  1. 在 hHuilder 写以下代码:
<!-- condition.vue -->
	<view>
		<button @click="say()" type="primary">js的条件编译</button>
	</view>
<script>
	export default {
		methods: {
			say() {
				// #ifdef APP-PLUS
				uni.showModal({
					title: "你好App用户"
				})
				// #endif
				// #ifdef H5
				uni.showModal({
					title: "你好手机用户"
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					title: "你好微信用户"
				})
				// #endif
			}
		},
		data() {
			return {

			}
		},

	}
</script>
  1. 在不同的端,我们可以看到不同的内容

在这里插入图片描述

7.5 跨平台条件配置

7.5.1 页面配置
  1. 新建一个页面在 condition文件夹 里,命名为 weixin.vue ,在pages.json 写以下代码:

在这里插入图片描述

<!-- pages.json -->
		//  #ifdef MP-WEIXIN || APP
		{
			"path": "pages/condition/weixin",
			"style": {
				"navigationBarTitleText": "小程序专有页面"
			}
		},
		// #endif

  1. condition.vue 里,写以下代码:
	<!-- #ifdef APP || MP-WEIXIN -->
	<navigator url="/pages/condition/weixin">
		<button type="warn">微信专有</button>
	</navigator>
	<!-- #endif -->
  1. 在不同的端,我们可以看到不同的内容

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

7.5.2 导航栏配置
  1. 不同端的导航栏配置不同的内容

在这里插入图片描述

  1. pages.json 写以下代码:
        {
            "path" : "pages/condition/condition",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "条件编译",
                "enablePullDownRefresh": false,
				"app-plus": {
					"titleNView": false //隐藏导航栏
				},
				"h5": {
					"titleNView": {
						"titleText": "H5:条件编译"
					}
				}
            }
            
        }

8- 总结


今天先分享到这里了~~~

往期传送门


【小程序】微信小程序常用api的使用,附案例(建议收藏)

【微信小程序】小程序使用详细教程(建议收藏)

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

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

相关文章

煤炭行业数据库-煤炭价格、消耗量、发电量分省市民用电、工业用电数据

&#xff08;1&#xff09;煤炭行业数据库 1、数据来源&#xff1a; WIND数据库煤炭资源网 2、时间跨度&#xff1a;至今 3、区域范围&#xff1a;全国 4、指标说明&#xff1a; 包含指标如下 煤炭价格 国际煤价&#xff08;周&#xff09; 秦皇岛煤炭价格&#xff08;…

【仿牛客网笔记】项目进阶,构建安全高效的企业服务——优化网站性能

Caffeine是最好缓存工具 登录凭证和用户有直接关联不适合存放在本地缓存 本地缓存和redis缓存的区别 本地缓存的效率高 整个缓存在使用的过程中详细流程 caffeine的使用 caffeine的使用手册 affeine的导包 设置自定义参数 去优化查询的方法&#xff0c;通常优化的是Servi…

MIT发现语言模型内的事实知识可被修改??

文 | 小伟前言众所周知&#xff0c;自回归语言模型(如GPT-2)里存储着大量的事实知识&#xff0c;比如语言模型可以正确的预测出埃菲尔铁塔所在的城市是巴黎市。那么语言模型是在什么地方存储这些知识呢&#xff1f;我们是否可以修改存储在语言模型里的知识呢&#xff1f;来自于…

流媒体传输 - RTP 荷载 H265

H265 码流结构 H265 码流和是由很多 NAL Unit 组成&#xff0c;所有 NAL Unit 均存在一个 16 位数据的 NAL Unit Header &#xff0c;一个 NAL Unit Header 的语法如下: ------------------------------|0|1|2|3|4|5|6|7|0|1|2|3|4|5|6|7|----------------|F| Type | La…

电感啸叫产生的根本原因及解决方法

电感啸叫产生的根本原因及解决方法 【摘 要】环形电感或工形电感啸叫问题&#xff0c;在稳压电源电路的设计经常遇到&#xff0c;根据稳压电源芯片的不同和外围电路的不同&#xff0c;解决方法也各不相同&#xff0c;本文档的宗旨是分析电感啸叫的根本原因&#xff0c;并综合各…

使用Psycopg2连接openGauss

文章目录1.简介2.接口介绍开发流程接口说明3.使用3.1环境准备3.2下载并加载python驱动3.3创建数据库连接用户3.4示例4.常见报错1.简介 Psycopg是一种用于执行SQL语句的PythonAPI&#xff0c;可以为PostgreSQL、openGauss数据库提供统一访问接口&#xff0c;应用程序可基于它进…

我们为什么喜欢看疯狂科学家开飞艇?

很多人可能不是科幻迷&#xff0c;也在日常生活中接触过蒸汽朋克。为什么呢&#xff1f;很简单——蒸汽朋克几乎无处不在。相比其他科幻流派&#xff0c;蒸汽朋克可能算是最“出圈”的一种。简单地说&#xff0c;蒸汽朋克是一种科幻小说类型&#xff0c;由“蒸汽 ”(steam)和“…

微服务框架 SpringCloud微服务架构 3 Eureka 3.5 服务发现

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构3 Eureka3.5 服务发现3.5.1 在order-service完成服务拉取3.5.2 总结3 Eure…

实习day1

今天部署东西&#xff1a; docker compose -f docker-compose.yml up -d 知道这个命令是什么意思 先进入decays里面&#xff0c;再进去corepack &#xff0c;在进入yarn安装代码。 需要进入路径然后run 这个东西 c:\Users\yuan\PycharmProjects\decsys\app\Decsys>dotnet…

IBM MQ命令:DEFINE AUTHINFO

此命令里有很多内容值得一看。 https://www.ibm.com/docs/en/ibm-mq/8.0?topiccommands-define-authinfo#q085490___6 一&#xff0c;CHCKCLNT CHCKCLNT This attribute determines the authentication requirements for client applications, and is valid only for an A…

复制淘宝宝贝上传,宝贝的属性是错误的,怎么修改为正确的属性?

大家都知道&#xff0c;淘宝的发布要求是在不断变化的&#xff0c;以前发布宝贝没有这要求&#xff0c;但现在有可能就有这要求了&#xff0c;比如说以前这一属性可以随便填&#xff0c;但现在发布必须按照他的要求去填&#xff0c;不然发布不成功。近期&#xff0c;小编就有收…

什么是联盟营销以及如何使用它在网上赚更多的钱

无需创建自己的任何产品即可通过您的网站、社交媒体或博客在线赚钱。您可以使用联盟网络营销。如果您听说过联盟营销&#xff0c;但不确定它是什么或它是如何运作的&#xff0c;那么本文是一个很好的起点。 如果您已经熟悉这个概念&#xff0c;并且想知道如何开始使用它从您的博…

【DL with Pytorch】第 3 章 :使用 DNN 的分类问题

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

尚硅谷ES6复习总结上(64th)

1. let 关键字 let 关键字用来声明变量&#xff0c;使用 let 声明的变量有几个特点&#xff1a; 1、不允许重复声明 2、块级作用域 if (true) {let a 10; } console.log(a) // a is not defined3、不存在变量提升 console.log(a); //报错let a 20;4、不影响作用域链 以后声…

ggrcs 包2.4绘制RCS(限制立方样条图)实际操作演示(1)

ggrcs 包2.4版本已经发布一段时间了&#xff0c;大概几个月了吧&#xff0c;收到不少好评&#xff0c; 没听说太大的问题&#xff0c;最主要的问题有两个&#xff1a; 1.是说变量不是数字变量。 2.是说数据超过10万&#xff0c;无法处理 第一个问题非常好处理&#xff0c;这…

【一文秒懂——Profile配置】

目录 1. Profile配置 2. 实例 1. Profile配置 Spring框架允许使用Profile配置&#xff0c;即某些“个性化配置文件”&#xff0c;这些配置文件默认并不会被应用&#xff0c;需要“激活”后才生效&#xff01; 在Spring Boot项目中&#xff0c;简化了Profile配置的使用&…

智能型电动机保护器(马保)可应用在水泥厂,保证生产过程的连续不间断

安科瑞 李可欣 具体可咨询&#xff1a;Acrel_lkx 一、水泥厂的要求 水泥生产是一项较庞大的工程&#xff0c;生产环境比较恶劣&#xff0c;粉尘污染严重&#xff0c;受生产工艺的限制使得其工作场所的通风条件差且环境温度较高&#xff0c;而且需要设定大量的工作站点&…

NetCore路由的Endpoint模式

IdentityServer里有各种Endpoint,如TokenEndpoint,UserInfoEndpoint,Authorize Endpoint,Discovery Endpoint等等。Endpoint从字面意思来看是“终端节点"或者“终节点”的意思。无独有偶NetCore的路由也有Endpoint的概念。那么我们提出一个问题来&#xff0c;究竟什么是En…

R语言MCMC:Metropolis-Hastings采样用于回归的贝叶斯估计

全文链接&#xff1a;http://tecdat.cn/?p19664 MCMC是从复杂概率模型中采样的通用技术。蒙特卡洛马尔可夫链Metropolis-Hastings算法&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。问题如果需要计算有复杂后验pdf p&#xff08;θ| y&#xff09;的随机变量…

中远通创业板IPO过会:上半年营收7.3亿 拟募资2.3亿

雷递网 雷建平 11月28日深圳市核达中远通电源技术股份有限公司&#xff08;简称&#xff1a;“中远通”&#xff09;日前IPO过会&#xff0c;准备在深交所创业板上市。中远通计划募资2.3亿元。其中&#xff0c;1.3亿元用于研发中心改造提升项目&#xff0c;3248万元用于企业信息…