uni-app快速入门

最新推荐文章于 2024-08-05 09:48:11 发布

萝卜青菜·各有所爱

最新推荐文章于 2024-08-05 09:48:11 发布

阅读量896

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44127405/article/details/107853448

版权

本文是uni-app的初学者笔记，介绍了如何搭建项目、使用sass、基本语法（数据展示、循环、条件判断、计算属性）、事件、组件、传参、插槽、生命周期，以及与vue和微信小程序生命周期的对比。通过实例演示了uni-app的功能和用法。

摘要由CSDN通过智能技术生成

uni-app笔记

1.uni-app的初体验

1.1脚手架搭建项目

安装全局

npm install -g @vue/cli
创建项目

vue create -p dcloudio/uni-preset-vue my-project
启动项目（微信小程序）

npm run dev:mp-weixin
微信小程序开发者工具导入项目

2 项目目录

2.1官方文档 https://uniapp.dcloud.io

│  App.vue             应用配置，用来配置App全局样式以及监听
│  main.js               Vue初始化入口文件
│  manifest.json   配置应用名称、appid、logo、版本等打包信息
│  pages.json        配置页面路由、导航条、选项卡等页面类信息
│  uni.scss             内置的sass变量，可以直接使用
│  
|─pages               
│  └─index
│          index.vue  页面组件
│          
└─static                 静态资源
        logo.png

3.sass

支持小程序的rpx 和 h5的vw、vh
内置有sass的配置了，只需要安装对应的依赖即可 “ npm install sass-loader node-sass ”
vue组件中，在 style 标签上加入属性 lang=‘scss’ 即可
实例

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

<script>
	export default {
    
	
	}
</script>

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

	.content{
    
		.sass{
    
			background-color: red;
			color: $uni-color-primary;
		}
	}
</style>

4.基本语法

4.1数据展示:{ {msg}}插值表达式

1.在 js 的 data 中定义数据

2.在 template中通过 { { 数据 }} 来显示

3.在标签的属性上通过 :data-index=‘数据’来使用

实例

<template>
  <view class="content">
    <view>{
  { title }}</view>
    <view class="num">
      {
  { num }}
    </view>
    <view class="boolean">
      {
  { flag }}
    </view>
    <view class="obj"> {
  { obj.name }}----{
  { obj.age }} </view>
    <!-- 自定义属性 -->
    <view class="a" :data-color="color">color</view>
  </view>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      //字符串
      title: "uni-app中的数据展示",
      //数字
      num: 1000,
      //boolean
      flag: false,
      //对象形式
      obj: {
    
        name: "张三",
        age: 20,
      },
      //自定义属性
      color: "aqua",
    };
  },
};
</script>

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

4.2数据循环:v-for

1.通过 v-for来指定要循环的数组

2.item 和 index 分别为循环项和循环索引

3.:key 指定唯一的属性，用来提高循环效率

实例

<template>
  <view class="content">
    <!-- 循环数组 -->
    <view v-for="(item,index) in list" :key="item.id">
      id：{
  {item.id}} --- 水果：{
  {item.text}} --- 索引：{
  {index}}
    </view>
  </view>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      // 数组
      list: [
        {
    
          id: 0,
          text: "🍎",
        },
        {
    
          id: 1,
          text: "🍌",
        },
        {
    
          id: 2,
          text: "🍒",
        },
      ],
    };
  },
};
</script>

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

4.3条件判断v-if / v-else if / v-else /v-show

1.通过 v-if 来决定显示和隐藏不适合做频繁的切换显示

2.通过 v-show 来决定显示和隐藏适合做频繁的切换显示,

3.注意：v-for和v-if不要一起用，循环的优先级更高

实例

<template>
  <view class="content">
    <!-- 条件判断 -->
    <view v-if="flag">你看不到我 </view>
    <view v-else>你可以看到我 </view>
    <view v-show="flag">你看不到我 </view>
  </view>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      //boolean
      flag: true,
    };
  },
};
</script>

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