# 小程序开发-19后端

**Repository Path**: shirley3790/wechat19BE

## Basic Information

- **Project Name**: 小程序开发-19后端
- **Description**: 老师的代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-06-07
- **Last Updated**: 2021-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 小程序开发-19后端课堂笔记

小程序文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/

### 1.widow/tabbar/pages全局配置

位置：框架/小程序配置 /全局配置 

### 2.xx.js文件的介绍

位置：框架/框架接口 /小程序 App /App 

位置：框架/框架接口 /页面 /Page 

### 3.xx.wxml语法

位置：框架/WXML 语法参考 /数据绑定 

位置：框架/WXML 语法参考 /列表渲染

位置：框架/WXML 语法参考 /条件渲染 

### 4.事件绑定和传参

位置：指南/小程序框架 /视图层 /事件系统 /WXS 响应事件

### 5.轮播图的制作

位置：组件/视图容器 /swiper 

### 6.发送网络请求

位置：API/网络 /发起请求 /wx.request 

### 7.作业：

- 把今天代码都敲一遍；
- 预习：视频  https://ke.qq.com/webcourse/3378025/103509725#from=800021724&lite=1

### 8.小程序路由

位置：API/路由 /wx.switchTab 

位置：组件/导航 /navigator 

- 页面跳转：编程式导航和声明式导航
- 页面传参

### 9.小程序常用api

地图：API/位置 /wx.stopLocationUpdate 

弹窗：API/界面 /交互 /wx.showToast 

本地存储：API/数据缓存 /wx.setStorageSync 

网络状态：API/设备 /网络 /wx.onNetworkStatusChange 

打电话：API/设备 /电话 /wx.makePhoneCall 

扫码：API/设备 /扫码 /wx.scanCode 

### 10.项目实战-电商项目

项目实战：手机端打开：http://yimei-h5.bestyuemei.com/ym/shopping-mall/shopping-mall.html

接口地址：链接：https://easydoc.xyz/s/42058006

阿里icon图标库：https://www.iconfont.cn/

#### 功能介绍

- 首页
  - 轮播图
  - 主题分类
  - 点击跳转详情页
- 分类页
  - 显示分类数据
  - 根据分类渲染商品列表
  - 点击商品跳转详情页
- 商品详情页
  - 接收gid，查询商品信息
  - 渲染某个商品信息
  - 加入购物车
- 购物车页
  - 渲染购物车数据
  - 全选、反选、单选
  - 统计小计
  - 删除商品
  - 下单：修改地址，添加地址
- 订单页
  - 展示订单信息
- 修改地址页
  - 修改地址
  - 新增地址
- 个人中心
  - 展示个人信息
  - 查看订单
  - 跳转修改地址页面

#### 代码块：首页轮播图和分类

```
<view class="home">
  <!-- 轮播图 -->
  <view>
    <swiper indicator-dots indicator-color="#ccc" indicator-active-color="#1296db" autoplay="true" interval="3000"
      circular="true">
      <swiper-item wx:for="{{banners}}" wx:key="index">
        <image src="{{item.url}}"></image>
      </swiper-item>
    </swiper>
  </view>
  <!-- 分类图片展示 -->
  <view class="list">
    <view class="imgList">
      <!-- 活动图片 -->
      <image class="bigPic" src="http://vueshop.glbuys.com/uploadfiles/1484285334.jpg"></image>
      <scroll-view scroll-x="true">
        <view class="picscroll">
          <view class="smallpic">
            <image src="http://vueshop.glbuys.com/uploadfiles/1524556026.jpg"></image>
            <text>连衣裙</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>
```

```
/* pages/home/home.wxss */
swiper{
  width: 750rpx;
  height: 300rpx;
}
swiper swiper-item image{
  width: 750rpx;
  height: 300rpx;
}

.bigPic{
  width: 750rpx;
  height: 300rpx;
}
.picscroll{
  display: flex;
}
.smallpic image{
  width: 200rpx;
  height: 200rpx;
}
.smallpic text{
  display: block;
  text-align: center;
}
```

#### 代码块：分类页结构和样式

开发一个小程序页面：写html和csss->准备接口->请求数据Ajax->渲染页面

```
<view class="category">
  <!-- 导航 -->
  <view class="nav">
    <view>衣服</view>
    <view class="sel">鞋子</view>
    <view>包包</view>
  </view>
  <!-- 商品分类数据 -->
  <view class="product-wrapper"></view>
</view>
```

```
/* pages/category/category.wxss */
.category{
  display: flex;
}
.nav{
  width: 180rpx;
  height: 100vh;
  border-right: 1px solid #ccc;
  /* background: lightcoral; */
}

.nav view{
  width: 180rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-left: 4px solid #ffffff;
}

.nav .sel{
  border-left: 4px solid #1296db;
  color: #1296db;
}

.product-wrapper{
  flex: 1;
  background: skyblue;
}
```

#### vantUI框架

网址：https://vant-contrib.gitee.io/vant-weapp/#/home

```
1.安装软件 ：https://nodejs.org/zh-cn/download/
nodejs：node-v14.16.1-x64.msi

2.检测是否安装成功：任务管理输入cmd回车
node -v
npm -v
出现版本号，证明成功。
不出现版本号，全局配置：https://blog.csdn.net/weixin_42442123/article/details/84025294

3.去到根目录下，初始化项目：npm init -y

4.安装vantUI:npm i @vant/weapp -S --production

5.去到小程序开发工具构建npm：
 5.1 详情-本地配置-使用npm模块
 5.2 工具-构建npm：根目录下会生成一个目录：miniprogram_npm
 5.3 去到app.json 删除一句话： "style": "v2",
 
6.使用vantui
 6.1 注册组件：app.json
 	"usingComponents": {
        "van-button": "/miniprogram_npm/@vant/weapp/button/index"
      }
 6.2 使用组件:wxml
 	<van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
 
```