uni-app初级（二）

最新推荐文章于 2024-04-11 13:45:34 发布

达菲姐姐好好看

最新推荐文章于 2024-04-11 13:45:34 发布

阅读量142

点赞数 1

分类专栏： uni-app开发文章标签： uni-app 前端

本文链接：https://blog.csdn.net/shengjiaxin/article/details/127413570

版权

uni-app开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了uni-app中如何使用Vue组件，并遵循其单文件组件(SFC)规范，同时涵盖了条件编译、App/nVue开发、HTML5+等知识点。重点讲解了组件标签、接口调用、数据绑定和布局样式，以及针对不同平台的适配技巧。

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

uni-app规范 1.页面文件遵循Vue单文件组件（SFC）规范

<template>
	<view class="content">
		{{content}}
	</view>
</template>
<script>
	export default {
		data(){
			return{
				content:"hello uni-app"
			}
		}
	}
</script>
<style>
	.content{
		background-color: #FFFFFF;
	}
</style>

相比于传统html，Vue页面分为三层，template包裹的模版块；script包裹的脚本块，style包裹的样式块。

2.组件标签靠近小程序规范
3.接口能力（JS API）靠近小程序规范：使用Vue的时候，是无法跨端掉用手机端的原声api的，但是如果使用uni-app开发时，可带有uni前缀来使用手机原生api

onLoad() {
			//获取网络类型
			uni.getNetworkType()
		}

4.数据绑定及事件处理同Vue.js规范
5.为兼容多端，建议使用flex布局进行开发

uni-app规范 1.条件编译

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在app平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了h5平台，其他平台均存在的代码
#ifdef H5 or MP-WEIXIN 需条件编译的代码 #endif	在h5平台或微信小程序平台存在的代码

2.App端的nVue开发（只能在app端使用）
3.HTML5+（只能在app端使用）

uni-app知识点：
1.组件：自定义组件，基础组件
2.生命周期
3.api
4.路由
5.语法
6.布局样式