【Uniapp】基本配置

uniapp

uniapp 介绍

• 什么是 uniapp？

  uniapp 是一个使用 Vue 语法来开发所有前端应用的框架（全端开发框架）

uniapp 基础

• 开发方式

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

• 脚手架搭建项目

  • 全局安装 npm install -g @vue/cli
  • 创建项目 vue create -p dcloudio/uni-preset-vue <项目名称>
  • 创建项目（vue3） vue create -p dcloudio/uni-preset-vue#vue3 <项目名称>
  • 启动项目（以微信小程序为例） npm run dev:mp-weixin
  • 微信小程序开发者工具导入项目 项目根路径\dist\dev\mp-weixin

• 项目结构介绍

| App.vue         应用配置，用来配置App全局样式以及监听
| main.js         Vue初始化入口文件
| manifest.json   配置应用名称、appid、logo、版本等打包信息
| pages.json      配置页面路由、导航条、选项卡等页面类信息
| uni.scss        内置的sass变量，可以直接使用
|
|-pages
| └─index
|     index.vue   页面组件
|
└─static          静态资源
    logo.png

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

基本语法

• 数据展示（Vue 语法）
• 数据循环（Vue语法）
• 条件编译（Vue 语法）
• 计算属性（Vue 语法）
• 事件（Vue 语法）
• 组件（Vue 语法）
• 组件插槽（Vue 语法）
• 生命周期（结合 Vue 和小程序）
• 全局共享数据
  • 通过 Vue 的原型共享数据
  • 通过 globalData 共享数据（微信小程序独有）
  • vuex
  • 本地存储

生命周期（常用）

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