一、简单介绍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