# yougou

**Repository Path**: ty-88/yougou

## Basic Information

- **Project Name**: yougou
- **Description**: 微信小程序
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-10-13
- **Last Updated**: 2024-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## uniapp

### 什么是 uniapp

它是 **vue**语法的**全端**开发框架

### 初始化 uniapp 项目

1. 检查我们安装好的 vue 的脚手架版本 - 必须要 4 版本！！！

   ```
   vue -V
   ```

2. 假设你是 `5` 版本的话 先卸载

   ```
   npm un -g @vue/cli
   ```

3. 重新安装 4 版本的

   ```
   npm install -g @vue/cli@4
   ```

   ![image-20220726094658602](README.assets/image-20220726094658602.png)

4. 使用命令来创建 uniapp 项目 等待安装即可 _网络慢 要等待长时间_

   ```
   vue create -p dcloudio/uni-preset-vue hmyg145
   ```

5. 选择 `默认模版`

   ![image-20220726100650333](README.assets/image-20220726100650333.png)

6. 找到 项目中 `src/manifest.json`, 中关于 微信小程序的配置 ， 填写你的 appid

   ![image-20220726101216341](README.assets/image-20220726101216341.png)

7. 运行命令 运行微信小程序

   看清楚你打开 cmd 的目录

   ![image-20220726101311885](README.assets/image-20220726101311885.png)

   输入以下命令

   ```
   npm run dev:mp-weixin
   ```

8. 运行成功 看见这个 提示

   ![image-20220726101500655](README.assets/image-20220726101500655.png)

9. 在微信开发者工具中 来导入项目即可 - 大家先别做 - 很容易出错！！！！

   ![image-20220726102450453](README.assets/image-20220726102450453.png)

   要导入的是 **dist/dev/mp-weixin**

   ***

   ![image-20220726102628372](README.assets/image-20220726102628372.png)

10. 如果出现以下提示，就表示成功

    ![image-20220726102730148](README.assets/image-20220726102730148.png)

### 开发 uniapp 的注意点！！

#### 不要直接在微信开发者工具中 修改代码

> 实际工作中，不能直接改编译好后的代码，要改就应该改 项目的源代码

原因：

1. 我想要改 appid， 就像以前开发原生小程序一样 `dist/dev/mp-weixin/project.config.json` 修改 id，确实会成功！！！

2. 上传代码，关闭电脑、下班

3. 我们的项目 不会把 dist 目录下所有代码上传 码云

   ![image-20220726104631714](README.assets/image-20220726104631714.png)

4. 你的同事拉取你的代码 - 问你 说 你填写好了公司新的 appid 了没有

   1. 你一看 微信开发者工具 ，已经成功， 你说改好了！！！
   2. 但是你同事拉取下来的代码 没有！！！
   3. 而且你的同事 会在项目敲命令 `npm run dev:mp-weixin` 表示 同事电脑中的 dist 自动生成！！

5. 而且对于我们自己来说 等到第二天上班 会敲一个命令 `npm run dev:mp-weixin`

   你的脚手架 会删除掉 旧的`dist` 然后重新编译新的！！

#### 开发时，标签尽可能使用小程序的，而语法尽可能使用 vue 的

```html
<view>
  <text class="title">{{title}}</text>
</view>
```

```html
<view v-for="item in list" :key="item" @click="handleClick(item)"
  >{{item}}</view
>
```

### uniapp 目录结构

1. App.vue **全局样式和应用生命周期**

2. manifest.json 可以配置小程序的 appid、等同于 原生小程序 project.config.json 文件

   ![image-20220726112751946](README.assets/image-20220726112751946.png)

3. pages.json 等同于以前的 全局配置(app.json) 和 页面配置(index.json)

4. `uni.scss` uniapp 直接会执行的 sass 文件- 也是可以定义全局样式！！变量 混合。。

5. `pages` 目录 就是我们存放小程序页面的地方

6. `static` uniapp 中用来存放静态资源的地方，都建议把静态资源存放进去！！

7. 如何在 uniapp 中来新建页面

   1. 手动的在 pages 下新建 `pages/index2/index2.vue` 添加好基本结构 否则会报错

      ```vue
      <template>
        <view>index2</view>
      </template>

      <script>
      export default {};
      </script>

      <style></style>
      ```

   2. 修改 `pages.json` 在里面添加一个页面的记录

      ![image-20220726113513653](README.assets/image-20220726113513653.png)

      ***

   ![image-20220726113604330](README.assets/image-20220726113604330.png)

### 在 vscode 安装 uniapp 插件

![image-20220726114330424](README.assets/image-20220726114330424.png)

---

![image-20220726114340831](README.assets/image-20220726114340831.png)

### uinapp 的生命周期

> 大伙不要去纠结 遵循就可以！！

1. 应用和页面使用小程序规范

   1. 应用生命周期 在 `App.vue` 定义

      ![image-20220726120724293](README.assets/image-20220726120724293.png)

   2. 页面生命周期 直接在 组件的 js 中写即可

      ![image-20220726120710198](README.assets/image-20220726120710198.png)

2. 组件使用 vue 规范

   ![image-20220726120739813](README.assets/image-20220726120739813.png)

### easycom 组件引入方式

在 uniapp 中 引入组件的方式 变为两个步骤

1. 按照**规范** 新建组件

   ![image-20220726122207879](README.assets/image-20220726122207879.png)

   ***

   ![image-20220726122219361](README.assets/image-20220726122219361.png)

2. 页面中直接使用组件

   ![image-20220726122232802](README.assets/image-20220726122232802.png)

### uni api

> 为什么要使用它

1. 支持 promise（_原生小程序一些 api 不支持_）
2. 跨平台，一段代码 直接运行到不同的平台上 （_web、小程序、手机 app_）

如何使用

```js
const [err, result] = await uni.request({
  url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
});
if (!err) {
  // 没有出错
  console.log(result);
}
```

## uview

> https://v1.uviewui.com/

> 和 uniapi 配套出现 全端 UI 框架！！！
>
> 项目使用的 uview 的版本 1.x 版本！！

### 在 uniapp 引入 uview

1. 安装依赖

   ```
   npm i uview-ui@1.8.4 sass
   ```

2. 在 `src/main.js` 文件中 全局引入 js 库

   ```js
   import uView from 'uview-ui';
   Vue.use(uView);
   ```

3. 在 uni.scss 中 引入 uview 的 sass 主题库

   ```less
   @import 'uview-ui/theme.scss';
   ```

4. 在 App.vue 中 引入 uview 的 sass 主题库

   ```scss
   <style lang="scss">
   @import "uview-ui/index.scss";
   </style>
   ```

5. pages.json 中 配置 easycom

   ```json
   {
     "easycom": {
       "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
     },

     // 此为本身已有的内容
     "pages": [
       // ......
     ]
   }
   ```

6. 在 页面中 使用 uview 的按钮

   ```vue
   <u-button>默认按钮</u-button>
   <u-button type="primary">主要按钮</u-button>
   <u-button type="success">成功按钮</u-button>
   <u-button type="info">信息按钮</u-button>
   <u-button type="warning">警告按钮</u-button>
   <u-button type="error">危险按钮</u-button>
   ```

7. 成功

   ![image-20220726151338196](README.assets/image-20220726151338196.png)

## 购物车静态页面

```vue
<template>
  <view class="cart">
    <!-- 1 列表 -->
    <view class="cart-list">
      <view class="cart-item">
        <!-- 1 复选框 -->
        <view class="goods-chk">
          <u-checkbox value="" shape="circle" active-color="red"></u-checkbox>
        </view>
        <!-- 2 图片 -->
        <view class="goods-img">
          <u-image width="191rpx" height="191rpx"></u-image>
        </view>
        <!-- 3 信息 -->
        <view class="goods-info">
          <!-- 名称 -->
          <view class="goods-name u-line-2"></view>
          <!-- 价格和数量 -->
          <view class="goods-price-num">
            <view class="goods-price">￥xxx</view>
            <view class="goods-num-tool">
              <view class="num-btn">-</view>
              <view class="goods-num">xxx</view>
              <view class="num-btn">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 2 统计 -->
    <view class="statistics">
      <view class="all-chk">
        <u-checkbox shape="circle" active-color="red">全选</u-checkbox>
      </view>
      <view class="all-price"> 合计: <text>￥xxx</text> </view>
      <view class="all-count">
        <u-button type="error" shape="circle">去结算(xxx)</u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {};
</script>

<style lang="scss">
.cart {
  padding-bottom: 111rpx;
  .cart-list {
    .cart-item {
      display: flex;
      padding: 10rpx;
      border-bottom: 1rpx solid #ccc;
      .goods-chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .goods-img {
        flex: 2;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      .goods-info {
        color: #666;
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods-name {
        }

        .goods-price-num {
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: #eb4450;
          }

          .goods-num-tool {
            width: 140rpx;
            height: 40rpx;

            display: flex;
            justify-content: space-between;
            .num-btn {
              border: 1rpx solid #ccc;
              border-radius: 50%;
              width: 40rpx;
              height: 40rpx;
              text-align: center;
              line-height: 40rpx;
            }
          }
        }
      }
    }
  }
  .statistics {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    border-top: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    padding: 15rpx;
    .all-chk {
    }

    .all-price {
      flex: 1;
      color: #666;
      text {
      }
    }

    .all-count {
    }
  }
}
</style>
```

## 支付静态页面

```vue
<template>
  <view class="pay">
    <!-- 1 收货地址 -->
    <view class="address u-p-20">
      <view class="address-btn u-flex u-row-center">
        <u-button
          shape="circle"
          type="error"
          plain
          size="medium"
          :custom-style="{ backgroundColor: '#fff!important' }"
          >获取收货地址</u-button
        >
      </view>

      <view class="address-detail">
        <view class="address-detail">xxx</view>
        <view class="address-user">xxx</view>
      </view>
    </view>

    <u-line color="#eee"></u-line>

    <!-- 2 已选商品 -->
    <view class="goods-list u-p-15">
      <view class="goods-list-title">已选商品</view>
      <view class="goods-list-content">
        <view class="cart-item">
          <!-- 2 图片 -->
          <view class="goods-img">
            <u-image width="191rpx" height="191rpx"></u-image>
          </view>
          <!-- 3 信息 -->
          <view class="goods-info">
            <!-- 名称 -->
            <view class="goods-name u-line-2">xxx</view>
            <!-- 价格和数量 -->
            <view class="goods-price-num">
              <view class="goods-price">￥xxx</view>
              <view class="goods-num-tool">
                <view class="goods-vnum">Xxxx</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 2 统计 -->
    <view class="statistics">
      <view class="all-price"> 合计: <text>￥xxx</text> </view>
      <view class="all-count">
        <u-button type="error" shape="circle">去支付(xxx)</u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {};
</script>

<style lang="scss">
.pay {
  padding-bottom: 111rpx;
}
.cart-item {
  display: flex;
  padding: 10rpx;
  border-bottom: 1rpx solid #ccc;

  .goods-img {
    flex: 2;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .goods-info {
    color: #666;
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods-name {
    }

    .goods-price-num {
      display: flex;
      justify-content: space-between;
      .goods-price {
        color: #eb4450;
      }

      .goods-num-tool {
        width: 140rpx;
        height: 40rpx;

        display: flex;
        justify-content: flex-end;

        .goods-vnum {
        }
      }
    }
  }
}
.statistics {
  position: fixed;
  background-color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  border-top: 1rpx solid #ccc;
  display: flex;
  align-items: center;
  padding: 15rpx;
  .all-price {
    flex: 1;
    color: #666;
    text {
    }
  }

  .all-count {
  }
}
</style>
```





## 企业appid和对应的接口

| 小程序名称             | appid              | 接口地址                                                     |
| ---------------------- | ------------------ | ------------------------------------------------------------ |
| 黑马优购               | wxfb52f2d7b2f6123a | [https://api-hmugo-web.itheima.net/api/public/v1](https://gitee.com/link?target=https%3A%2F%2Fapi-hmugo-web.itheima.net%2Fapi%2Fpublic%2Fv1) |
| 黑马程序员广州研发中心 | wx38d8faffac4d34d2 | [https://wx.zbztb.cn/api/public/v1](https://gitee.com/link?target=https%3A%2F%2Fwx.zbztb.cn%2Fapi%2Fpublic%2Fv1) |