01uni-app知识点梳理（一）
2021-04-12 本文已影响0人
东邪_黄药师
脚手架搭建项目
- 全局安装
npm install -g @vue/cli - 创建项目
vue create -p dcloudio/uni-preset-vue my-project - 启动项目（微信小程序）
npm run dev:mp-weixin
微信小程序开发者工具导入项目
项目结构介绍
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 组件挂载完毕时
