uni-app初学笔记

来源：黑马程序员uni-app框架  https://www.bilibili.com/video/BV1Sc41187nZ?p=1                                            

1 uni-app初体验

1.1 开发方式

• 使用DCloud公司提供的HBuilderX来快速开发
• 使用脚手架来快速搭建和开发

1.2 脚手架搭建项目

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

1.3 搭建过程中可能出现的问题

容易出现vue和vue-template-complier版本不一致的问题

此时根据提示重新安装对应的vue版本即可 npm install vue@2.6.10

然后再重新运行项目 npm run dev:mp-weixin

2 项目结构介绍

3 样式和sass

支持小程序的rpx和h5的vw、vh

内置有sass的配置，只需要安装对应的依赖即可 npm install sass-loader node-sass

vue组件中，在style标签上加入属性 <style lang="scss"> 即可

4 基本语法

4.1 数据展示

4.2 数据循环

4.3 条件编译

4.4 计算属性

5 事件 

6 组件

6.1 组件的简单使用

• 组件的定义
  • 在src目录下新建文件夹 components 用来存放组件
  • 在 components 目录下直接新建组件 *.vue
• 组件的引入
  • 在页面中引入组件 import 组件名 from '组件路径'
• 组件的注册
  • 在页面中的实例中，新增属性 components
  • 属性components是一个对象，把组件放进去注册
• 组件的使用
  • 在页面的标签中，直接使用引入的组件

6.2 组件传递参数

6.2.1 父向子传递数据

6.2.2 子向父传递数据

6.2.3 全局共享数据

6.3 组件插槽

• 标签其实也是数据中的一种，想实现动态地给子组件传递标签，就可以使用插槽slot
• 通过slot来实现占位符

7 生命周期

7.1 介绍

uni-app框架的生命周期结合了vue和微信小程序的生命周期

全局的APP中使用 onLaunch 表示应用启动时

页面中使用 onLoad 或者 onShow 分别表示页面加载完毕时和页面显示时

组件中使用 mounted 组件挂着完毕时

7.2 完整生命周期

• uni-app生命周期
• vue生命周期图示
• 微信小程序生命周期