Uniapp学习-第二弹代码实现

知识浅谈
144 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

🍁 作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云星级博主

📌 擅长领域：全栈工程师、爬虫、ACM算法

💒 公众号：知识浅谈

🔥 联系方式vx：zsqtcc

Uniapp代码实现

编写代码之前，先了解一下uniapp代码的结构

举几个常见的结构的作用：

  1. uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
  2. components 符合vue组件规范的uni-app组件目录
  3. hybrid App端存放本地html文件的目录，详见
  4. pages 业务页面文件存放的目录
  5. ─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意： 静态资源只能存放于此。
  6. uni_modules 存放[uni_module].
  7. wxcomponents 存放小程序组件的目录，详见
  8. nativeplugins App原生插件 详见
  9. unpackage 非工程代码，一般存放运行或发行的编译结果
  10. main.js Vue初始化入口文件
  11. App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
  12. manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
  13. pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
  14. uni.scss 这里是uni-app内置的常用样式变量

基础代码的使用

包含了不同标签的用法

<template>
	<!-- v-bind:组件属性要使用data 中定义的数据变量，或者组件属性要是使用表达式Eg:v-bind:data="1 + 2" ，使用v-bind指定，在使用的时候可以使用 ：代替v-bind: 也是绑定的意思  -->
	<!-- v-on:绑定事件，一般绑定的时候v-on可省略，直接使用@click，省略了v-on绑定触发的事件的处理方法 -->
	<view v-bind:class="title" v-bind:data="true ? 'asd' : 'zxc'">
	<!-- <view :class="title" v-bind:data="true ? 'asd' : 'zxc'"> -->
		{{title}}
		<button v-on:click="show">点我</button>
		<!-- <button @click="show">点我</button> -->
	
    <!-- v-model 是双向绑定的，就是下边输入框中的内容跟和title内容是绑定的，输入框中的数据改变会影响title的值，所有用到title值的地方也会发生变化，title中的值改变会影响输入框中的值 -->
		<input v-model="title" />
        
        <!--判断语句的使用 -->
		<view v-if="index==1">aaa</view>
		<view v-else-if="index==2">bbb</view>
		<view v-else>ccc</view>	
        <!-- v-show 语句的使用 -->
		<view v-show="flag">asd</view>  <!-- 这个不管现实不显示都会占用一块地方，代码是在，而v-if不满足代码是不存在的 -->
		<view>{{ flag ? '三元' : '四元' }}</view>  <!-- 三元运算符的简单实用 -->
		<!-- 空标签的使用，在源代码中block会自动移除 -->
		<block v-if="flag">
			sad
		</block>
    </view>
</template>

1.关于data 是为什么写成函数的形式，而不是map 的形式，因为函数每次页面的显示都会重新加载，而map是不会改变。

如下：

data:{	
	title: 'Hello'
},
data() {
    return {
    	title: 'Hello'
    }
}
上边是两种data 的使用方法，上边的哪一种是变量的形式而不是函数的形式，所以在页面重新加载的时候，data里边对应的值不会初始化

2.事件穿透解决方法

<template>
	<view @click="show">
		<!-- 下边这个按钮点击后会触发两次show函数，即show
		 函数会执行两次，一次是内部view  一次是外层view，这个叫做事件	穿透-->
		<view @click="show">点击</view>  
		<!-- 解决方法：使用.stop 阻止事件穿透 -->
		<view @click.stop="show">点击</view>  
	</view>
</template>

3.uni-app基础组件

  1. 滚动组件

    <scroll-view class="scroll" :scroll-y="true" >  <!-- scroll-y前边的双引号的作用是这样true就是一个变量而不是一个字符串了 -->
    <view v-for="(item,index) in pers" >{{item}}</view>
</scroll-view>

  2. 自定义组件

    根目录下新建一个components文件夹，下边可以新建组件，一个组件即一个文件夹。因为有了easycom不用像是小程序中的需要注册引入之后才能使用，对于components文件夹下的内容相当于把三部合并为一步了。但是components文件夹下的需要文件夹和vue是同名的如下图的card

    image-20211222172830877

    关于自定义组件的使用：

    父组件向子组件传递数据的时候是通过props

    如下：自定义组件card

    <template>
	<view :style="{background: color}">
		hello
	</view>
</template>

<script>
	export default {
		name:"card",
		props:{
			color:{
				type:String,
				default:"white"
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

    在pages/news/news.vue下进行调用

    <template>
	<view>
		test
		<card color="red"></card>  <!-- 通过传递不同的color值，达到不同的结果 -->
		<card color="blue"></card>
	</view>
</template>

    子组件向父组件传递数据的时候，是通过触发事件函数，如下图

    子组件向父组件传递数据可以通过自定义事件，父组件自定义事件，子组件触发父组件定义的事件，并传递数据。

    image-20211222181846309

    插槽的占位使用

    因为在使用自定义组件的时候，是通过<组件名></组件名> 但是如果需要<组件名>传输值</组件名> 加入这里有值想要插入到子组件指定的位置，可以在子组件中使用 指定位置

    image-20211222185724909

    页面加载&跳转组件

    onLoad() {
    uni.showToast({
        title:"加载中...",
        icon:"loading",
        duration:2000
    })
    setTimeout(()=>{
        uni.redirectTo(({
          url: "/pages/index/index"
        })
    },2000)
}

    不同平台出现不同的内容

    参考网址：uniapp.dcloud.io/platform?id…

    在view/template中的格式如下
格式：
<!-- #ifdef APP -->  里边的APP可替换成H5等
<!-- #endif -->
Eg：
<!-- #ifdef APP -->
<card @myclick="myclick" color="blue" >qweqweqwe</card>
<!-- #endif -->

在js中
// #ifdef APP
// #endif

在css中
/* #ifdef APP */
/* #endif */

  3. uniapp 页面布局

    一个vue只能有一个template 的页面

    scss和scoped的使用

    1. scss可以在使用类的class的时候用层级的css格式
2. scoped 可以隔离组件的样式，防止样式的污染
非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性，H5端为了隔离页面间的样式默认启用了 scoped

    大小符号换算关系 2rpx = 1px

  4. css的引入与使用

    新建一个css的文件夹。

    另外页面布局推荐使用flex，因为使用定位可能会对某个客户端不兼容。

生命周期

应用的生命周期

<script>
	export default {
		//引用初始化执行，全局只执行一次
		onLaunch: function() {
			//做一些登录的处理全局变量的相关处理
			console.log('App Launch')
		},
		// 应用显示的时候执行，或者从后台进入前台
		onShow: function() {
			console.log('App Show')
		},
		//应用隐藏的时候执行，或者从前台进入后台
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

页面的生命周期

<script>
	export default {
		onLoad() {
			console.log("页面加载完成的时候触发");
		},
		onReady() {
			console.log('页面渲染完成的时候触发');
		},
		onShow() {
			console.log("页面显示的时候触发");
		},
		onUnload() {
			console.log("页面卸载的时候触发");
		},
		onHide() {
			console.log("页面隐藏的时候出发");
		}
	}
</script>

组件的生命周期

在组件的vue中
<script>
	export default {
	
		beforeCreate() {
			console.log("组件生命周期-实例初始化之后，数据观测和事件配置之前调用");
		},
		created() {
				console.log("组件生命周期-实例初始化之后，数据观测和事件配置之后调用");
		},
		mounted() {
				console.log("组件生命周期-实例挂载之后调用");
		},
		destroyed() {
				console.log("组件生命周期-实例销毁后调用);
		}
	}
</script>

tabBar的使用

"tabBar": {
    "color": "#7A7E83", 设置字体的颜色
    "selectedColor": "#3cc51f",  设置选中之后的颜色
    "borderStyle": "black",  设置边框的颜色
    "backgroundColor": "#ffffff", 设置背景颜色
    "list": [{   这里边的数组每个就是对应一个组件和一个页面
        "pagePath": "pages/index/index",
        "iconPath": "static/image/logo.png",
        "selectedIconPath": "static/image/logo.png",
        "text": "首页"
    }, {
        "pagePath": "pages/news/news",
        "iconPath": "static/image/logo.png",
        "selectedIconPath": "static/image/logo.png",
        "text": "我的"
    }]
}
avatar
文章
阅读
粉丝