Uniapp学习-第一弹Uniapp学习-第一弹，uniapp基础，页面文件遵循vue单文件组件规范，组件标签靠近小程序

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

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

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

💒 公众号：知识浅谈

🔥 联系方式vx：zsqtcc

uniapp基础

基础

1.页面文件遵循vue单文件组件规范

<template>
	<view class="main">
		{{msg}}
	</view>
</template>

<script>
	export default {
		data(){
			return{
				msg: "hello"
			}	
		}
	}
</script>
<style>
	/*每个页面公共css */
	.main{
		background-color: #4CD964;
	}
</style>

2.组件标签靠近小程序规范

<body>
	<div>Hello</div>
	<span>Tom</span>
</body>
<template>
	<div>Hello</div>
	<span>Tom</span>
</template>

3.接口能力（JS API）靠近微信小程序规范

uni.getLocation({
    type:'wgs84',
    success: function(res){
        console.log('当前位置经度'+res.longitude);
        console.log('当前位置纬度'+res.latitude);			
    }
})

4.数据的绑定以及事件处理使用Vue.js规范

<template>
	view @click="changea">{{msg}}</view>
</template>
<script>
	export default {
		data(){
			return{
				msg: "hello"
			}	
		},
		methods:{
			changea(){
				this.msg="Nice"
			}
		}
    }
</script>

特色

条件编译

App端的Nvue的开发

uni-app App端内置了一个基于weex改进的原生渲染引擎，提供了原生渲染能力。

在App端，如果使用vue页面，则使用webview渲染，如果使用nvue页面（native vue），则使用原生渲染。

HTML5+

uni-app App端内置了HTML5+引擎，让js可以直接调用丰富的原生能力。

一些比较复杂的功能，可以直接调用App的原生插件来实现，只能在app端使用，无法在H5和小程序中使用。

基础知识点

1.组件：基础组件和自定义组件

2.API：网络请求

3.路由：类似小程序的页面切换

4.生命周期：页面隐藏，页面显示等

5.语法：数据绑定,事件等

6.布局样式：样式引用，sass等。

开发环境

使用HbuilderX
使用vue-cli

前提：已经安装nodejs
1. 安装vue-cli
```
npm install @vue-cli -g
```
2. 创建uni-app项目
```
vue create -p dcloudio/uni-preset-vue test
```

使用HbuilderX需要登陆账号才可以发行。

关于项目的不同目录的作用：

pages 页面存放目录
static 静态文件资源目录
App.vue 应用入口文件，和小程序app.js类似
main.js 应用入口文件注册Vue等
pages.json 主要是页面的配置
common 存放公用的文件
components 自定义组件
store vuex的目录
unpackage 编译后的文件存放的目录