1 uni-app学习
1.1 什么是uni-app
uni-app是一个使用Vue.js语法来开发所有前端应用的框架（也称之为全端开发框架）
技术栈：JavaScript，vue， 微信小程序， uni-app
1.2 有哪些uni-app的作品
image
1.3. uni-app的社区规模
image
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.微信小程序开发者工具导入项目
（搭建过程中可能会遇到的问题）
image
2.2 如何编写代码
2.3 uni-app初体验
image
2.4 项目结构介绍
image
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>
image
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>
查看打印出的结果：
image
2.8 组件
1 组件的定义/引入/注册/使用
重点章节，组件化思想是前端必备思想之一，灵活的使用组件可以提高网页开发效率，提高代码复用率，降低块与块之间的耦合性。
1.1 组件的定义
- 在src目录下新建文件夹components用来存放组件
- 在components目录下直接新建vue文件
1.2 组件的引入
- 在页面中引入组件 "import 组件名 from '组件路径'"
1.3 组件的注册
- 在页面的实例中，新增属性 components
- 属性components是一个对象， 在里面添加要注册的组件
1.4 组件的使用
+在页面的template中添加组件标签 "<组件><组件/>"
1.5 全局数据传递
- 通过prototype在vue的原型上添加属性
image
-
在App.vue文件中向外暴露一个全局对象
image 以上两种方法的拿值
image
1.6 使用插槽实现动态更新组件
image
2.9 生命周期
1 介绍
- uni-app框架的生命周期结合了vue和微信小程序的生命周期
- 全局APP中使用 onLaunch 表示应用启动时
- 页面中使用 onLoad 或者 onShow 分别表示页面加载完成 和 页面显示时
- 组件中使用mounted 表示组件挂载完毕时
2 完整生命周期
uni-app项目
- 懂你找图
本文结合黑马程序员教学视频，部分截图来自原视频
黑马视频链接： https://www.bilibili.com/video/BV1Sc41187nZ?p=1
作者：VinSmokeW
链接：https://www.jianshu.com/p/3dec2cc2e30b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
