01uni-app知识点梳理（一）

脚手架搭建项目

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

项目结构介绍

官方文档 https://uniapp.dcloud.io

image.png

样式和sass

• 支持小程序的rpx 和 h5的vw、vh
• 内置有sass的配置了，只需要 安装对应的依赖即可 “ npm install sass-loader node-sass ”
• vue组件中，在 style 标签上 加入 属性“ <style lang=‘scss’ > ” 即可

组件传递参数

• 父向子传递参数 通过 属性 的方式
• 子向父传递参数 通过 触发事件 的方式
• 0 使用全局数据传递参数
• 通过 挂载 vue 的原型上
• 通过 globalData 的方式

父向子传递数据

• 父页面向子组件 ul-com 通过属性名 list 传递了一个数组数据

• 子组件 通过 props 进行接收 数据

  
  image.png

子向父传递数据

• 子组件通过 触发事件 的方式向父组件传递数据

• 父组件通过 监听事件 的方式来接收数据

  
  image.png

全局共享数据

• 通过 Vue的原型共享数据

  
  image.png

• 通过 globalData 共享数据

  
  image.png

生命周期

• uni-app框架的生命周期结合了 vue 和 微信小程序的生命周期
• 全局的APP中 使用 onLaunch 表示应用启动时
• 页面中 使用 onLoad 或者 onShow 分别表示 页面加载完毕时 和页面 显示时
• 组件中使用 mounted 组件挂载完毕时

完整生命周期

• uni-app https://uniapp.dcloud.io/frame?id=生命周期
• vue https://cn.vuejs.org/v2/guide/instance.html?#生命周期图示
• 微信小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html