一、简单介绍Vue、uni-app、微信小程序三者之间的联系
uni-app和Vue的关系
使用Vue.js开发；在发布到H5时，支持所有的vue的语法；发布到App和小程序时，不支持部分vue语法(vue-router，需要dom操作的第三方插件、组件)。
uni-app和小程序的关系
组件标签靠近小程序规范；接口能力（JS API）靠近微信小程序规范；拥有完整的小程序生命周期。
web开发与微信小程序的差别.png
二、入门微信小程序简单介绍
下载安装微信开发者工具，第一次打开使用微信扫一扫即可，
创建项目：
创建微信小程序项目.png
微信小程序项目目录结构说明：
微信小程序项目目录结构说明.png
image.png
微信小程序生命周期：
image.png
三、uni-app简单介绍
uni-app 核心知识点.png
uni-app特色：
1、条件编译：
条件编译.png
2、App端的Nvue（native vue）开发
Nvue内置了weex的渲染引擎，在Nvue中我们既可以使用weex的组件和api，也可以使用uni-app的组件和api。
3、HTML5+引擎
HTML5+引擎：可以帮助我们在app端直接调用原生插件，含大量的api方法。（只能在App端使用，在H5和微信小程序端不可用。）
uni-app核心知识点：
1、开发规范：页面文件遵循Vue单文件组件（SFC）规范。
image.png
2、组件标签靠近小程序规范。
uni开发与普通web开发的区别.png
3、接口能力（JS API）靠近微信小程序规范。
vue开发不可以直接api获取手机原生功能，而uni-app可以直接使用uni前缀的api获取，如获取当前手机的网络类型：
image.png
4、数据绑定及事件处理同Vue.js规范。
5、为兼容多端运行，建议使用flex布局。
uni-app语法（绝大部分和Vue.js一样）
<template>
<!-- 1、模版语法 -->
<!-- 2、数据绑定 -->
<!-- 3、条件判断 :判断某一块元素是否需要渲染-->
<!-- 4、列表渲染 :通过一个数组来渲染列表-->
<!-- 5、基础组件的使用 :官网=>组件-->
<!-- 6、自定义组件的使用（简单使用） -->
<!-- 7、基础api的用法 -->
<!-- 8、条件编译 -->
<!-- 9、页面布局 -->
<view>
<!-- <view class="content" :class="className" @click="open"> -->
<view class="content" v-bind:class="className" v-on:click="open">
{{title}}
</view>
<!-- <view>{{show?'条件判断为真时显示该内容111':'条件判断为假时显示该内容000'}}</view> -->
<view v-if="show">条件判断为真时显示该内容111</view>
<view v-else>条件判断为假时显示该内容000</view>
<button type="default" @click="show=!show">切换内容</button>
<view>
<view v-for="(item,index) in arr">{{item}}-{{index}}</view>
<view v-for="(item,value) in arr1">{{item}}-{{value}}</view>
</view>
<view hover-class="active1"> <!-- div -->
<text>11111</text> <!-- span -->
</view>
<!-- 自定义组件 -->
<btn color="blue" @change='change'>插入组件中插槽的内容</btn>
<movable-area style="height:100px;width: 100px;border: 1px solid red;">
<movable-view>1212</movable-view>
</movable-area>
</view>
</template>
<script>
import btn from '@/componment/btn/btn.vue'
export default {
components:{
btn
},
data() {//初始化数据
return {
title: '我是一个初始化值',
className: 'active',
show: false,
arr:['uni-app','vue','html'],
arr1:{
key1:'value1',
key2:'value2',
key3:'value3'
}
}
},
onLoad() {
// 两秒之后将tiele的值变为“hello uni-app”
setTimeout(()=>{
/* 小程序“this.setData({
title:'hello uni-app',
}) */
this.title = 'hello uni-app';
},2000)
},
methods: {//自定义的事件、方法
open () {
this.title = '啊啊啊我被点击了'
},
change (e) {
console.log('我是当前页面的事件，我返回了'+e);
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.active1{
border: 1px solid red;
}
</style>
在进行简单的条件判断时，三元运算真的香^^
pages.json文件解析：各种配置
分包配置：
/* 以后项目体积过大了，这里的作用就体现出来了，
你的pages目录下就放下面的tabbar的4个页面就好 ，
其他的子模块就按照我这样进行分包处理*/
"subPackages": [{
"root": "subIndex",
"pages": [{
"path": "index/index",
"style": {
"navigationBarTitleText": "分包"
}
}]
}]
...
...
...
推荐项目目录扩充：
King.png
（正常创建uni-app项目后，添加上图所示的原项目没有的文件）（组件放components文件下，要进行页面跳转的页面放到pages目录下，且要在pages.json文件下进行相应的配置）
image.png
