# ugo-92

**Repository Path**: hexiang666/ugo-92

## Basic Information

- **Project Name**: ugo-92
- **Description**: 黑马优购项目--- 国内的基本模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-07-22
- **Last Updated**: 2023-07-26

## 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这个组件自带的上拉和下拉





## 你做过微信登录吗？

+ 小程序， 自己公司的后端（java php），微信的服务器
+ 我们前端需要提供5个参数给我们的后端，之前我们公司的后端是java，然后他们提供给我们的登录接口需要5个参数(类似于iv  code之类)
+ 前端通过小程序的api  wx.getUserInfo 获取4个参数
+ 前端通过小程序的api  wx.login 获取一个参数 code
+ 最后在调用java提供的接口，发起登录，登录成功，后端返回token给我们，作为身份信息



**自己用代码整理一下 从登录到将token保存到vuex的代码流程！！！**

调自己公司java程序员提供的登录接口 （需要5个参数） --->  wx.getUserInfo 可以提供4个 + wx.login 提供了1个 code

登录成功以后 得到token -->   vuex的 模块modules里面 定义token 的状态，和修改tokenmutation ---> 登录成功以后通过store的commit调用 mutation 因为是模块，需要加上模块名称  --->  内存上的临时变量储存完以后，还有数据的持久化，涉及到wx.getStorageSync  同步和异步的写法



## 你做过微信支付吗？

+ 做过，这个对前端来说比较简单，主要就是要准备好wx.requestPayment这个api需要的 5个参数
+ 我在之前的项目里面，后端准备了两个接口，一个接口是 生成订单编号的，需要我们传递 订单价格，订单地址，订单商品详情。 接口调用成功返回 oder_number 订单编号
+ 还有一个接口根据订单编号 获取到 微信api需要的5个参数
+ 最后调用系统的wx.requestPayment 发请求就成功了