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

约定不等于承诺〃 2023-03-13 05:11 1阅读 0赞

# 1.uni-app框架 #

## 脚手架搭建项目： ##

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

> npm install -g @vue/cli

1.  创建项目：

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

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

> npm run dev:mp-weixin

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]

## 项目目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]

## 样式和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： ###

![在这里插入图片描述][20200511135447356.png]

### 计算属性 ###

![在这里插入图片描述][20200511135533525.png]

### 事件使用 ###

![在这里插入图片描述][2020051114013490.png]

### 组件 ###

1  
![在这里插入图片描述][20200511140709327.png]

2  
![在这里插入图片描述][20200511140720750.png]  
3  
![在这里插入图片描述][20200511140729589.png]

4  
![在这里插入图片描述][20200511140745569.png]

### 组件传参 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][20200511141517120.png]  
![在这里插入图片描述][2020051114191193.png]  
this.$emit 监听事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 5]  
1.在vue原型上使用  
在main.js 定义 Vue.prototype.名称=数据  
在组件通过 this.名称获取

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

globalData(){ 
    名称：数据
    }

使用全局数据

getApp().globalData.名称

![在这里插入图片描述][20200511143509510.png]

## 生命周期 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 6]

# 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

# 框架的基本准备完成 #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70]: /images/20230312/7431b07dd63340aea573b394bd2e65d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 1]: /images/20230312/3a9d55a8c9fd411286c55c45c017a1af.png
[20200511135447356.png]: /images/20230312/964750cb2b6b41c49996ad8547749d7c.png
[20200511135533525.png]: /images/20230312/397a1a1f3bfa40349ca14ce923fe8c6a.png
[2020051114013490.png]: /images/20230312/a447ee72959d438fa4d41bda25d2f533.png
[20200511140709327.png]: /images/20230312/f2c2f21805b6480b810aa1e7e60cc72a.png
[20200511140720750.png]: /images/20230312/c7d83975673e4637bfb3eac8d62dfd6f.png
[20200511140729589.png]: /images/20230312/3608e434704c429aa0f42cf3a17a6f57.png
[20200511140745569.png]: /images/20230312/113255dbf7b740a6bb5339957439e084.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 2]: /images/20230312/889ae9930b5f488dbc0364cdcefcfd4a.png
[20200511141517120.png]: /images/20230312/690b96fed0304d6c956fff1981740157.png
[2020051114191193.png]: /images/20230312/0f36cf034f694c6b80e48182843c8a08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 3]: /images/20230312/c1c305c33b7f4f1ab7865d3a7f30e75b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 4]: /images/20230312/8e041670bdce4856afe3a0ab7148cb24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 5]: /images/20230312/b79d4344e11b47cda20cdec56fd15be8.png
[20200511143509510.png]: /images/20230312/33537bfb56e5475b88501acd6dbb20d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70 6]: /images/20230312/72cff043d3cd48cf8d64fd017893c2d5.png