小程序······uni-app框架-----------1

1.uni-app框架

脚手架搭建项目：

1. 全局安装 只需要执行一次 之前执行过不需要执行

npm install -g @vue/cli

2. 创建项目：

vue create -p dcloudio/uni-preset-vue my-project(项目名称 要是在本文件夹 ./)

3. 启动项目（微信小程序）

npm run dev:mp-weixin

4. 微信小程序开发者工具导入项目：

文件目录路径： dist>dev>my-weixin

项目目录结构

样式和sass

• 支持小程序的rpx和h5的vw.vh

1. rpx:
   rpx小程序中的单位 750rpx=屏幕的宽度
2. vw vh
   vw h5单位 100vw=屏幕的宽度 100vh=屏幕的高度

• 内置有sass的配置了，只需要安装对应的依赖即可

npm install sass-loader node-sass

• vue组件中，在style标签上加入属性“

基本语法与vue类似

v-if 和 v-show：

计算属性

事件使用

组件

1

2

3

4

组件传参

this.$emit 监听事件

1.在vue原型上使用
在main.js 定义 Vue.prototype.名称=数据
在组件通过 this.名称获取

2.app独有方式 可读可写
app.vue想当与 微信小程序中的 app.js
在app.vue中使用
创建全局数据

globalData(){
名称：数据
}

使用全局数据

getApp().globalData.名称

生命周期

2.uni-app框架项目准备

• 创建项目：

vue create -p dcloudio/uni-preset-vue my-project(项目名称 要是在本文件夹 ./)

• 安装sass依赖

npm install sass-loader node-sass

关于图标素材 取自阿里巴巴矢量图标库：使用方法 https://www.jianshu.com/p/6b8aebac8a83

uni-ui 使用

官方文档：https://ext.dcloud.net.cn/plugin?id=55

安装全局：

npm install @dcloudio/uni-ui

分段器实现 tab切换

按需引入： import { uniSegmentedControl } from ‘@dcloudio/uni-ui’

注册组件->使用组件

封装异步请求

详看：
https://blog.csdn.net/weixin_42863800/article/details/106070827

框架的基本准备完成