Uni-app基础

一、Uni-app是什么？

uni-app是一个使用Vue.js开发跨平台应用的前端框架；开发者编写一套代码，uni-app将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。

二、使用步骤

1.推荐使用软件Hbuilder X

下载地址：HBuilderX-高效极客技巧

2.创建项目及初始化步骤

（1）启动小程序

（2）启动小程序

1.微信公众平台查看自己的小程序id 开发 → 开发管理 → 开发设置 → 找到appid

2.在uniapp 中进行配置目录下的manifest.json → 微信小程序配置 → 填写小程序appid

（3）目录结构

├── pages # 页面（每个页面可以作为一个文件）
├── static # 静态资源（图片、音视频）
├── unpackage # 打包文件
├── App.vue # 主文件（可以定义全局方法、样式、变量）
├── main.js # 入口（引入插件）
├── pages.json # 页面路由
├── package.json # npm相关文件
└── uni.scss # 常用于定义全局样式变量、第三方ui库的样式（插件）

四、一个.vue文件和 .html文件的区别

可看见的区别：

1.uniapp里不使用div 使用 view 替换

2.html里面使用 img uniapp里使用 image

3.script 跟我们平常写的格式不一样了

其他区别：

1.vue里的template 只能有一个根标签如果多个会报错

2.js 定义变量： var a = 3; vue里面存放在data里不需要声明

3.js里的this 指向 window vue里面指向当前的vue实例

4.想要获取变量、方法要使用 this.

5.js修改元素的值需要document. 获取再赋值 vue里直接使用变量就可以了总结减少操作DOM

vue：

1.插值表达式（胡子表达式）

{ { 变量、判断条件（三元）}} 如果里面想使用字符串加引号

2.data

定义初始数据用的

data() {

return {

键：值

}

3.methods 方法

作用：写一些我们自己定义的方法（函数）

<template> 
<!-- template 模板的意思 -->
	<view class="content">
		<view class="text-area">
			<text class="title">{
   
   {title}}</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title : 'Hello',
				title1:'hello world'
			}
		},
		onLoad() {
			console.log(12);
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

html：

 <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>
       <script>
       </script>
   </body>
   </html>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了利用Hbuilderx开发Uni-app和部分页面内容的使用。