1 uni-app学习

1.1 什么是uni-app

uni-app是一个使用Vue.js语法来开发所有前端应用的框架（也称之为全端开发框架）
技术栈：JavaScript，vue，微信小程序， uni-app

1.2 有哪些uni-app的作品

线上项目.png

1.3. uni-app的社区规模

社区规模.png

2 uni-app基础

2.1 如何创建项目

脚手架搭建项目
1.全局安装  
    npm install -g @vue/cli  
2.创建项目      
    vue create -p dcloudio/uni-preset-vue my-project     
3.启动项目（微信小程序）   
    npm run dev:mp-weixin    
4.微信小程序开发者工具导入项目

（搭建过程中可能会遇到的问题）

脚手架搭建版本不一致.png

2.2 如何编写代码

2.3 uni-app初体验

初始界面.png

2.4 项目结构介绍

项目目录.png

2.5 样式和sass

支持小程序的rpx 和 h5的vw，vh。
rpx 小程序中的单位 750rpx = 屏幕宽度 vw h5单位 100vw = 屏幕的宽度， 100vh = 屏幕的高度
内置sass的配置，只需要安装对应的依赖即可 npm install sass-loader node-sass
vue组件中，在style标签上加入属性<style lang= 'scss'>即可

2.6 基本语法

学过vue的同学应该很容易上手,大胆去尝试吧

<template>
    <view class="content">
        <view>{{dataObj.name}}</view>
        <view>{{dataObj.age}}</view>
        <view>{{dataObj.boolean}}</view>
        <view>
            <view v-for="item in filterList" :key= 'item.id'>{{item.text}}</view>
        </view>
    </view>
    
</template>
<script>
    export default {
        data() {
            return {
                dataObj: {
                    name: 'Davidsofter',
                    age: 23,
                    boolean: true,
                },
                fruitList: [{id: 0, text: '🍎'},{id: 1, text: '🍌'},{id: 2, text: '🍇'}]
            }
        },
        computed: {
            filterList() {
                return this.fruitList.filter(v => v.id<=0)
            }
        }
    }
</script>

基本语法显示.png

2.7 事件

添加点击事件，自定义参数和传参

<template>
    <view class="content">
        <view>
            <button data-item="123" @click="btclick(1,$event)">点击我试试</button>
        </view>
    </view>
    
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            btclick(data,event) {
                console.log("我不想努力了😘")
                console.log(data)
                console.log(event)
            }
        },
    }
</script>

查看打印出的结果：