uniapp入门学习

最新推荐文章于 2025-03-05 17:33:25 发布
置顶 最新推荐文章于 2025-03-05 17:33:25 发布
阅读量3.5k 收藏 13
点赞数 3
分类专栏： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40052011/article/details/106084664
版权
本文介绍了uni-app，一个基于vue.js的跨平台开发框架，用于构建网页、安卓、苹果及各小程序应用。详细讲解了uni-app的开发方式、项目结构、样式处理、基本语法、事件处理、组件使用及生命周期等核心概念，并提供了实际操作示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

uni-app介绍

什么是ui-app

ui-app是一个使用vue.js语法来开发所有前端应用的框架
（网页应用、安卓应用、苹果应用、各种小程序应用（微信、qq、支付宝等））
##线上产品
csdn ，开源中国，咪咕商城、中国银联、招商银行等等

ui-app社区和规模

380万开发者、几十万应用案例、8.5亿手机端用户、数千款ui-app插件、70+微信/qq群

uni-app基础

ui-app初体验

开发方式

1.使用DCloud的hbuilderX快速开发
2.使用脚手架来快速搭建和开发

  1. 全局安装
    npm install -g @vue/cli

  2. 创建项目
    vue create -p dcloudio/uni-preset-vue my-project

  3. 启动项目
    npm run dev:mp-weixin

  4. 微信小程序开发者工具导入dist在这里插入图片描述在这里插入图片描述

  • 搭建过程可能出现vue和vue-template-complier版本不一致的问题。。。此时根据提示，重新安装对应的vue版本即可。npm install vue@2.6.10然后再重新运行项目 npm run dev:mp-weixin

项目结构介绍

项目目录

在这里插入图片描述 public ->index.html 给uiapp 做网页应用， 提供模板的功能
.gitignore ->git管理文件
babel.config.js ->js版本管理 比如es5转es6
package.json\package-lock.json ->node项目必备的包的描述文件
postcss.config.js->定义如何编译css代码,添加什么前缀、版本啊
README.md ->编写文字给用户看
tsconfig.json ->如果项目用js开发，可能会对语法进行规范，在这里进行配置
src中的目录结构：
在这里插入图片描述
pages：页面
static：静态资源（不要放样式）
App.vue：整个应用启动做的事情
main.js：入口文件（增加函数、方法等可以在这里定义）
pages.js:新增页面时，既要在pages增加文件，同时也需要在这里面配置文档路径、标题等。这里面有个globalStyle定义全局窗口样式（标题、文字、颜色等） （路劲谁放在前面谁就是首页）
uni.scss:这里是uni-app内置的常用样式变量
在这里插入图片描述

样式和sass

样式和sass

uniapp中直接支持小程序的rpx和h5的vw、vh

  • rpx是小程序中的单位，750rpx=屏幕的宽度
  • vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度

uniapp中内置有sass的配置了，怎么使用？

  1. 首先全局安装对应的依赖
npm install sass-loader node-sass
  1. vue组件中，在style标签上加入属性<style lang='scss'>

基本演示代码（pages/index2/index.html）：

<template>
	<view class="content">
		  <view class="rpx">rpx</view> 
          <view class="vw">vw</view>
          <view class="sass" >sass</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	/*rpx是小程序中的单位，750rpx=屏幕的宽度*/
	.rpx{
        width: 750rpx;
        height: 100px;
        background-color: aqua;
    }
    .vw{
        /*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/
        width: 50vw;
        height: 100px;
        background-color: tan;

    }
    .content{
        .sass{
            background-color: red;
            color:$uni-text-color-grey;//使用uni.scss里面定义好的颜色
        }

    }
</style>

在这里插入图片描述

基本语法

数据的展示
  1. js里data中定义数据
  2. template通过{{数据}}展示
<view>{{msg}}</view>
  1. 在标签属性上通过:data-index=‘数据’使用
 <view :data-color="color">color</view>
数据的循环
  1. 通过特定的语法v-for将数据显示
  2. item和index分别为循环项和循环索引
  3. :key指定唯一的属性，用来提高循环效率
  <view v-for="(item,index) in arr" :key="item.id">{{item.id}}--{{item.text}}--{{index}}</view>

data(){
	return{
		arr:[
		     {id:0,text:"苹果"},
			{id:1,text:"香蕉"},
			{id:2,text:"李子"}
			
		]
	}
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020051300474736.png

条件编译

动态显示DOM元素

  1. v-if
  2. v-show
<view v-show="false">v-show</view>
<view v-if="false">v-if</view>
<view v-show="isShow">显示或隐藏</view>

区别

（1）手段：

v-if是动态的向DOM树内添加或者删除DOM元素；

v-show是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

（3）编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗：

v-if有更高的切换消耗；

v-show有更高的初始渲染消耗；

（5）使用场景：

v-if适合运营条件不大可能改变；

v-show适合频繁切换。

计算属性
  1. 可以理解是对data数据的加工或者过滤能力
  2. 通过computed来定义计算属性
data(){
   money:1000
},
computed:{
		//把cnMoney看成是data中的普通数据一样使用
		cnMoney(){
			return "$"+this.money;
		}
	}

 <view>{{cnMoney}}</view>

在这里插入图片描述

事件

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

事件的使用：
1.注册事件@click="handleClick"
2.methods中定义事件监听函数

在这里插入图片描述
3.事件的传参

 <view  data-index="11"  @tap="handleClick(1,$event)">click me</view>
<view data-index="11" @tap="handleClick(2,$event)">click me</view><!--data-index自定义属性传参通过event.currentTarget.dataset.index获取-->

methods: {
			handleClick(index,event){
				console.log(index);
				console.log(event);
				console.log(event.currentTarget.dataset.index);				
			}
},

组件

组件的简单使用
  1. 组件的定义
    src目录下新建文件夹componenets
    components下新建组件*.vue
    在这里插入图片描述
<template>
  <image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=0.jpg"  />
</template>

<script>
export default {

}
</script>

<style>
.img-border{
  border-radius: 50%;
}
</style>

  1. 组件的引入
    页面引入：import 组件名 form '组件路径'

  2. 组件的注册
    页面实例中，新增属性compontents
    属性components是一个对象，把组件放进去注册

  3. 组件的使用
    在页面标签中，直接使用引入的组件<组件><组件>

<template>
	<view class="content">

	<img-border></img-border>
	</view>
</template>

<script>
//引入自定义组件
import imgBorder from "@/components/img-border"//@代表找到src路径
	export default {
		//注册组件
			//Component Object
		components:{
			imgBorder
		},
	
	};
</script>

<style lang="scss">
	
</style>

在这里插入图片描述

组件传参
父组件向子组件传递参数，通过属性的方式

父组件

<template>
	<view class="content">
<!--组件使用-->
	<img-border :src="src1"></img-border><!--传参src给子组件img-border-->
	<img-border :src="src2"></img-border>
	</view>
</template>

<script>
//2引入自定义组件
import imgBorder from "@/components/img-border"//@代表找到src路径
	export default {
		data(){
			return{
				src1:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=0.jpg",
				src2:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589372184891&di=fc7c7c3a7b99b72b6900ab289af1a96e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F05%2F20180705103723_U5EFY.jpeg"
			}
		},
		//3注册组件
			//Component Object
		components:{
			imgBorder
		}
		
	
	}
</script>

<style lang="scss">
	/*rpx是小程序中的单位，750rpx=屏幕的宽度*/
     /*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/
</style>

子组件

<template>
<!--要把props中传入的指=值看成是data中的变量一样来使用-->
  <image class="img-border" :src="src"  />
</template>

<script>
export default {
  //声明要接受的 父组件传递过来的属性
  props:{
    src:String//这个src跟父组件中那个属性名保持一致

  }

}
</script>

<style>
.img-border{
  border-radius: 50%;
}

</style>

在这里插入图片描述

子组件向父组件传递参数，通过触发事件的方式

子组件通过触发事件的方式向父组件传值，父组件通过监听事件的方式来接收数据

例子：点击图片的时候把图片路径打印到页面

子组件

<template>
<!--要把props中传入的指=值看成是data中的变量一样来使用-->
  <image class="img-border" :src="src"  @click="handleClick"/>
</template>

<script>
export default {
  //声明要接受的 父组件传递过来的属性
  props:{
    src:String//这个src跟父组件中那个属性名保持一致

  },
  methods:{
    handleClick(){
      /*子组件向父组件传递数据 通过触发事件this.$emit("自定义的事件名称"，"要传递的参数");*/
      this.$emit("srcChange",this.src);

    }
  }

}
</script>

<style>
.img-border{
  border-radius:50%;
}
</style>

父组件

<template>
	<view class="content">
	<!--组件使用-->
	<view class="hh">
		子组件传递过来的路径：{{src}}
	</view>
	<img-border @srcChange="handleSrcChange" :src="src1"></img-border>
	<img-border @srcChange="handleSrcChange" :src="src2"></img-border>
	</view>
</template>

<script>
//2引入自定义组件
import imgBorder from "@/components/img-border"//@代表找到src路径
	export default {
		data(){
			return{
				src:"",
				src1:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1285056959,3836499669&fm=11&gp=0.jpg",
				src2:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589372184891&di=fc7c7c3a7b99b72b6900ab289af1a96e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F05%2F20180705103723_U5EFY.jpeg"
			}
		},
		//3注册组件
			//Component Object
		components:{
			imgBorder
		},
		methods:{
			handleSrcChange(e){
				console.log(e)
				this.src=e;
			}
		}
		
	
	}
</script>

<style lang="scss">
	/*rpx是小程序中的单位，750rpx=屏幕的宽度*/
     /*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/
	 .hh{
		 font-size: 10px;
		 height: 5vh;

	 }
</style>
使用全局数据传递参数

组件之间还有很多不是父子组件的关系，这些组件之间共享数据就没法使用上面知识点，全局共享数据的方法如下：
–通过挂载vue的原型 上
只要有Vue的地方，可以通过vue.prototype增加一些变量和函数
，就可以通过this.来获取这些变量或者方法。（一般写在main.js）

vue.prototype.baseURL="http://baidu.com"

–通过globalData的方式

global Data:{
   base:"www.360.com"
}

App.vue中声明globalData,在任意组件可以通过getApp().globalData.base拿到数据（getApp()方法返回一个应用实例）

–vuex
–本地存储

组件插槽
  • 标签其实也是数据的一种，想实现动态的给子组件传递标签，就用插槽slot
  • 通过slot实现占位符
    插槽使用：

父组件：

<template>
	<view class="content">
      <my-form>
          <view><!--这级以下标签就代替了了组件my-form的slot--->
              <input type="text"><!--小程序中输入框没有默认颜色-->
              <radio></radio>
              <checkbox></checkbox>
          </view>
        
      </my-form>
    </view>
</template>

<script>
import myForm from "@/components/my-form"
	export default {
        components:{
            myForm
        },
	}
</script>

<style lang="scss">
	/*rpx是小程序中的单位，750rpx=屏幕的宽度*/
	
  /*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/
  
   
</style>

子组件：

<template>
  <view class="form">
       <view class="form-title">标题</view>
		<view class="form-content">
            <slot></slot>    
        </view> 
	</view>
</template>

<script>
export default {

}
</script>

<style>

</style>

在这里插入图片描述

生命周期

介绍：

  • uniapp框架的生命周期结合了vue和微信小程序的生命周期
  • 全局的APP中使用onLaunch表示应用启动时
//整个应用启动
		onLaunch: function() {//常用
			console.log('App Launch 应用启动')
		},
		//应用被看到
		onShow: function() {
			console.log('App Show')
		},
		//应用被隐藏
		onHide: function() {
			console.log('App Hide')
		}
  • 页面中使用onLoad或者onShow分别表示页面加载完毕时和页面显示时
	//页面加载完毕
		onLoad() {
			console.log("页面加载完毕")

        },
        //页面被看到
        onShow(){
            console.log("页面被看到");
            
        },
  • 组件中使用mounted组件挂载完毕时
 mounted(){
        console.log("my-form组件挂载完毕")
    }
从零开始：UniApp入门指南与实战教程
lyc2022064288的博客
04-18 3117
UniApp是一个基于Vue.js的跨平台应用开发框架，它结合了Vue.js的开发模式和一些特定平台的能力，使开发者可以使用Vue.js来开发多端应用，包括微信小程序、App、H5等。发布到应用商店或Web服务器：根据目标平台的要求，将打包后的应用发布到相应的应用商店（如App Store、华为应用市场、小米应用商店等）或Web服务器上，供用户下载和使用。：UniApp基于Vue.js框架，拥有丰富的开发工具和生态系统，开发者可以快速上手，并且可以借助Vue.js的组件化开发思想，提高开发效率。
uniapp的学习完整版PDF
03-11
uniapp的学习-1 一、概念认识 官网地址: uni-app 是一个使用开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个...
uniapp全局状态管理getApp()
weixin_68658847的博客
10-10 994
uniapp全局状态管理getApp()
uniapp在组件中调用getApp()为undefined
Lyn1421的博客
08-17 1903
我理解可能是这个组件在首页，globalData还未初始化完整我就就调用了。
深入浅出：UniApp 从入门到精通全指南
尘埃的博客
03-05 2553
UniApp 作为一款强大的跨平台应用开发框架，为开发者提供了高效、便捷的开发方式。从入门的环境搭建、项目创建，到核心概念的掌握、原生功能的交互，再到多端适配与优化以及项目实战，本文全面地介绍了 UniApp 的开发知识体系。通过学习和实践 UniApp，开发者可以快速构建出功能丰富、性能优良、多端兼容的应用程序，满足不同用户群体和业务场景的需求。随着移动应用开发技术的不断发展，UniApp 也在持续更新和完善，未来有望在更多领域得到广泛应用，为跨平台应用开发带来更多的创新和突破。
小程序和uniapp的getApp().globalDate.
陈新科的博客
07-30 5072
1.uni-app 在app.vue文件里面定义globalData， 在其他文件则用getApp().globalData调用 export default { globalData:{ lists:[], datainfo:{} }, }, 2.别的页面引用可以直接赋值 getlevel4() { this.$http({ url: '' }).then(res => { getApp().globalDa.
Uniapp中computed的使用
weixin_60246228的博客
01-09 2897
在上述示例中，我们定义了一个计算属性`fullName`，该计算属性通过拼接`firstName`和`lastName`的值得到完整的姓名，并在模板中显示。当`firstName`或`lastName`的值发生变化时，`fullName`会自动更新。注意，计算属性是基于依赖的，只有当依赖的属性值发生改变时，计算属性才会重新计算。计算属性的结果会进行缓存，如果依赖的数据没有改变，多次访问计算属性会直接返回缓存的值，提高性能。除了计算属性，还可以使用`watch`属性来观察数据的变化，并执行指定操作。
小程序和uniapp的globalData以及getApp()
热门推荐
沧笙踏歌的博客
04-14 1万+
globalData uniapp的globalData 小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。 以下是 App.vue 中定义globalData的相关配置： <script> export default { globalData: { text: 'text' } } </script> js中操作globalDa
前端开发UniApp入门教程与实战指南：环境搭建、核心语法、配置管理及调试发布全流程解析
最新发布
04-06
内容概要：本文档是关于UniApp的入门教程与实战指南，结合官方文档与开发者经验整理而成。首先介绍了环境搭建与项目创建，包括开发工具安装（HBuilderX、微信开发者工具、Node.js）和项目创建步骤，以及项目结构说明...
学习路之uniapp-goEasy入门-最新版本
12-24
uniapp-goEasy作为一个专为uniapp打造的入门学习资源，为初学者提供了一个了解和掌握uniapp开发的窗口。最新版本的教程，旨在帮助开发者快速上手uniapp，深入理解其特性，并能够快速构建出适用于多个平台的应用程序...
uniapp从入门到精通
03-12
《uniapp从入门到精通》涵盖了使用uniapp开发多端应用的全面知识，从基础知识到进阶技巧，帮助开发者在学习与实践的过程中，逐步成长为使用uniapp进行高效开发的专家。 首先，介绍部分让我们了解了uniapp的基本概念...
uni-app：全局变量的设置及引用（getApp().globalData）+全局方法的引用
weixin_46001736的博客
07-20 7034
uni-app：全局变量的设置及引用（getApp().globalData）
Babel的使用
qq_40674204的博客
03-20 1439
Babel是什么？ Babel 用通俗易懂的话来解释，就是一个js的编辑工具，可以将新版本的js（比如es6）编译成旧版本或者说是兼容性更好的js。解决es6的兼容性问题。下面是Babel的官网：https://www.babeljs.cn/docs/index.html Babel如何使用？ 说完了Babel是用来干什么的之后，我们来梳理一下Babel的使用流程。具体分为以下几个步骤： 安装node.js（可以到node的官网上去下载对应的版本，这里不再赘述了）Babel依赖包需要运行在Node.js的
关于Babel的使用
qq_41296374的博客
10-18 217
Babel是一个Javascript编辑器 目的是使代码可以兼容不能运行高版本Js的浏览器 首先安装node 这是个基于Chrome V8引擎的Javascript运行环境 安装cnpm 这个快 相当于国内的应用商店 用的是淘宝的镜像 npm就是国外的应用商店 下载慢 安装babel cnpm i -D(--save-dev) babel-cli 我们新建一个entry.j...
Babel安装与使用
cmy741741的博客
08-12 925
babel是一个广泛使用的es6转换器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。 Babel-cli（将es6的代码转换为es5的代码） 1.安装 npm install --global babel-cli 2.安装预设并且手动添加配置文件配置.babelrc npm install --save-dev babel-preset-es2015 { “presets”: [ "es2...
uni-app 资源在线升级/热更新
你的才华撑不起野心时，静下心学习；你的能力驾驭不了目标时，沉下心努力
05-30 6013
HBuilderX 1.6.5 起，uni-app 支持生成 App 资源升级包。 生成 App 资源升级包 修改版本号 首先，更新 manifest.json 中的版本号。 比如之前是 1.0.0，那么新版本应该是 1.0.1 或 1.1.0 这样。 发行 然后，在 HBuilderX 中生成升级包（wgt）。 菜单->发行->原生App-制作移动Ap...
uniapp中rpx、px、em、rem、%、vh、vw的区别是什么
zz_ll9023的博客
12-09 3210
在选择rpx、px、em、rem、%、vh和vw这些长度单位时，需要根据具体的使用场景和需求进行选择。总之，在选择长度单位时，需要考虑具体的使用场景、设备的特性以及页面的响应式设计需求。根据需要呈现的效果和页面的兼容性需求进行选择。rpx、px、em、rem、%、vh、vw的区别主要体现在定义和特性上。
uni-app入门指南
l7839的博客
04-16 1521
概述：uniCloud是DCloud联合阿里云和腾讯云推出的基于serverless服务的、跨全端的、用JS开发服务端的云产品。
快速上手uni-app,基础知识，基本使用
搬砖猴哥
12-26 1万+
####uni-app的基本使用 视频链接：uni-app配套视频 知识介绍： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 uni-app介绍 官方网页 uni-app 是一个使用 ...
uniapp入门
03-08
### UniApp 入门教程与基础知识 #### 一、UniApp简介 UniApp 是一个基于 Vue.js 的跨平台应用开发框架，允许开发者编写一次代码即可部署到多个平台，包括微信小程序、H5网页以及原生移动应用程序。这种高效的工作流程极大地提高了开发效率，并减少了维护成本[^1]。 #### 二、安装配置与发展环境设置 为了开始使用 UniApp 进行项目构建，首先需要完成必要的软件安装和环境准备。这通常涉及到 Node.js 和 npm (Node Package Manager) 的安装，接着是 HBuilderX IDE 或者其他支持插件的编辑器的选择。此外还需要下载并安装 DCloud 提供的官方工具链来简化整个过程[^2]。 #### 三、核心概念理解 掌握几个重要的术语对于理解和运用此框架至关重要： - **页面(Page)**：类似于 HTML 文件，在其中定义视图结构； - **组件(Component)**：可重用的小型UI部件集合体； - **API接口调用**：用于实现数据交互和服务端通信功能的方法集； #### 四、创建首个简单程序实例 当熟悉了上述基础理论后就可以尝试动手实践了。按照官方提供的模板或者自己构思一个小项目作为起点是非常好的做法。比如制作一款待办事项列表(Todo List)，它能够很好地展示如何组合各种内置控件以达到预期效果的同时也锻炼解决问题的能力。 ```html <template> <view class="container"> <!-- 输入框 --> <input v-model="newItemText" placeholder="请输入新项"/> <!-- 添加按钮 --> <button @click="addItem">添加</button> <!-- 列表显示区域 --> <ul> <li v-for="(item, index) in itemsList" :key="index">{{ item }}</li> </ul> </view> </template> <script> export default { data() { return { newItemText: '', itemsList: [] } }, methods: { addItem(){ this.itemsList.push(this.newItemText); this.newItemText=''; } } } </script> ``` #### 五、深入学习路径建议 随着技能水平的增长，可以逐步接触更加复杂的主题和技术细节，例如但不限于状态管理模式Vuex的应用场景分析、自定义样式设计原则探讨或是第三方库集成技巧分享等内容。这些都是提高个人技术水平的有效途径之一。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值