锐客网

  1. 首页 > it技术 > >

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

脚手架搭建项目

  • 全局安装
    npm install -g @vue/cli
  • 创建项目
    vue create -p dcloudio/uni-preset-vue my-project
  • 启动项目（微信小程序）
    npm run dev:mp-weixin
    微信小程序开发者工具导入项目
项目结构介绍 【01uni-app知识点梳理（一）】官方文档 https://uniapp.dcloud.io

01uni-app知识点梳理（一）
文章图片
image.png
样式和sass
  • 支持小程序的rpx 和 h5的vw、vh
  • 内置有sass的配置了，只需要 安装对应的依赖即可 “ npm install sass-loader node-sass ”
  • vue组件中，在 style 标签上 加入 属性“” 即可
组件传递参数
  • 父向子传递参数 通过 属性 的方式
  • 子向父传递参数 通过 触发事件 的方式
  • 0 使用全局数据传递参数
  • 通过 挂载 vue 的原型上
  • 通过 globalData 的方式
父向子传递数据
  • 父页面向子组件 ul-com 通过属性名 list 传递了一个数组数据
  • 子组件 通过 props 进行接收 数据

    01uni-app知识点梳理（一）
    文章图片
    image.png
子向父传递数据
  • 子组件通过 触发事件 的方式向父组件传递数据
  • 父组件通过 监听事件 的方式来接收数据

    01uni-app知识点梳理（一）
    文章图片
    image.png
全局共享数据
  • 通过 Vue的原型共享数据

    01uni-app知识点梳理（一）
    文章图片
    image.png
  • 通过 globalData 共享数据

    01uni-app知识点梳理（一）
    文章图片
    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

    推荐阅读


    上一篇：《德云斗笑社》张鹤伦秦霄贤即兴救场（即兴发言的秘密）

    下一篇：银杏树