# uniapp-pinyougou

**Repository Path**: kaiziming/uniapp-pinyougou

## Basic Information

- **Project Name**: uniapp-pinyougou
- **Description**: ahvjdfhvasd
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-25
- **Last Updated**: 2023-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ugo-92



## 项目启动1

```
npm install -g @vue/cli

vue create -p dcloudio/uni-preset-vue my-project   这一行命令是从github网站上面拉取uni-app的模板代码项目， 由于网络问题，可能拉取不下来。 
这里就换成老师的地址 git clone https://gitee.com/errlei/ugo-92.git （然后 npm i）

npm run dev:mp-weixin   生成dist文件夹 --> dev文件夹 --> mp-weixin 文件夹

将 mp-weixin文件夹 导入到小程序开发者工具里面
```



## 项目启动2 -- 使用hbuilderx

```
下载完的是一个zip压缩包， 解压到全英文路径

双向 hbuilderx.exe 打开这个工具

点击文件 --> 创建项目 --> 输入项目名称 --> 选择vue2  --> 点击创建项目

打开小程序开发者工具 --> 设置（通用设置） --> 安全选项项目 勾选所有开关

hbuilderx点击运行 --> 选择小程序开发者工具 --> 自动打开小程序工具
```



## 项目文件讲解



## uni-app里面的生命周期

+ 应用（app.vue）和页面级别（pages文件里面的 .vue文件）的使用  小程序的生命周期
+ 组件级别的使用  vue的生命周期



## uni-app里面的发请求

+ uni-app 对原生小程序的 发请求wx.request 做了一个promise的封装，如果不传递success等回调函数，那么就返回一个proimise。 可以用then 和 catch写法； 也可以使用async +await 的写法
+ uni-app在之前，没有拦截器之前，很多promise化的请求，返回的数据都是 数组的形式， error  first 语法（nodejs里面的）。 数组第一项是错误对象，如果没有错误 error就是null。 `var [err, res] = data;`
+ [uni-pormise官网地址](https://uniapp.dcloud.net.cn/api/#api-promise-%E5%8C%96)
+ 官网的写法最新的下载的模板里面，给我们写入了一个uni-app原生的拦截器，将服务器返回的数组的形式的代码，解构了一下。我们在业务代码那边就可以直接使用res返回值，不用写数组了
+ 在官网里面，如果没有拦截器，针对vue2 和 vue3的 写法给了不同的返回值，vue2的语法返回值是数组的形式。vue3的语法形式是普通的对象形式
+ 下载了uView ui这个组件库以后，这个组件库里面给我们提供了更简洁的发请求的方法。`uni.$u.http.xxx` 可以很方便的去配置基地址，请求响应拦截器，使用起来和axios类似。



## 页面写滚动的时候

+ 之前有一个场景，写的小程序，有一个页面，分为左右两个区域，都要实现滚动操作，我自己选择的是需要滚动的区域用scroll-view包裹以下，不适用page的滚动，设置页面高度的时候， 通过calc这个css函数，结合100vh动态去计算当前scroll-view的高度。 然后在写上拉加载，下拉刷新的时候，不适用小程序page页面的 上拉和下载事件。而是使用scroll-view这个组件自带的上拉和下拉