详细流程：
1.设置登录按钮的open-type属性为getUserInfo，监听getuserinfo函数，用户点击同意后传回一个参数对象，里面包括用户的信息（地区，性别，微信名），然后渲染页面
2.调用wx.login()获取用户登录凭证，就是返回数据中的code
3.把用户信息跟code合并，发到服务器，服务器返回一个唯一token
4.后期通过token判断是否已登录，发起订单等

微信支付

先判断用户是否登录
如何判断：判断是否有token，如果有token，就在请求拦截器中添加到一些特定的请求的请求头中。
创建订单
调用创建订单的API接口，把订单信息发送到服务器，等待服务器返回订单编号
调用订单预支付的API接口，把订单编号发送服务器，等待服务器返回订单预支付的数据
调用微信支付API，wx.requestPayment()，把订单预支付数据传进去。

地址

1.点击按钮-调用wx.chooseAddress()获取用户收货地址
表现效果为点击按钮跳转到微信的收货地址界面，并不是小程序的页面
2.如果用户未授权，可调用wx.openSetting()，调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。

购物车：

image.png

左边是wx的radio复选框组件
右边是uni-ui 提供的NumberBox 组件

滑动删除需要用到 uni-ui 的 uni-swipe-action 组件和 uni-swipe-action-item。SwipeAction 滑动操作。

优化：

对上拉触底进行节流处理
定义一个变量（节流阀）：false表示当前没有数据请求，true表示正在进行数据请求。
在调用请求函数中设置为true，在网络请求的complete回调函数中设置为false。
在onReachBottom中判断节流阀，如果为true则阻止当前请求。

配置小程序分包
分包可以减少小程序首次启动时的加载时间，为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。

其他

封装 uni.$showMsg() 方法

当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：

在 main.js 中，为 uni 对象挂载自定义的$showMsg() 方法：

// 封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon: 'none',
  })
}

今后，在需要提示消息的时候，直接调用uni.$showMsg() 方法即可：

应用的生命周期函数：

app.js中：

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () { },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) { },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () { },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) { }
})

页面生命周期函数：

js文件中：

//index.js
//获取应用实例
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: { },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { }
})

微信给小程序都提供了以下9大类组件：

① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ map 地图组件
⑦ canvas 画布组件
⑧ 开发能力
⑨ 无障碍访问

常用的视图容器类组件：

view 组件：类似于div
scroll-view组件：可滚动试图区域
swiper组件：轮播图
text组件：文本组件，类似span
rich-text组件：富文本组件，支持把html字符串渲染为wxml结构。
button组件：可通过open-type属性调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
Button 组件的详细文档
image组件：默认宽300px，高240px
navigator组件：导航组件，类似与a标签

小程序中的 API 是宿主环境提供的，通过这些丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。小程序官方把 API 分为如下 3 大类：

1. 事件监听 `API`

特点：以 on 开头的 API 用来监听某个事件是否触发
举例：wx.onWindowResize(function callback)

2. 同步 `API`

特点1：以 Sync 结尾的 API 都是同步 API
特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
举例：wx.setStorageSync('key', value) 向本地存储中写入内容

3. 异步 `API`

特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用结果
举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据
小程序中，大多数的 API 都是异步 API

wx.request()发起get,post请求

微信小程序的生命周期函数：

onLoad事件：监听页面加载

onLoad: function (options) {
    this.getSwiperList()
}

option就是导航传递过来的参数对象。

小程序的宿主环境不是浏览器，不存在跨域。

AJAX核心是依赖于浏览器中的XMLHttpRequest对象，所以小程序中不能叫做发起ajax请求，而是叫做发起网络数据请求。

小程序中实现页面导航的两种方式

声明式导航
- 在页面上声明一个 <navigator> 导航组件
- 通过点击 <navigator> 组件实现页面跳转
编程式导航
- 调用小程序的导航 API，实现页面的跳转

导航到tabBar页面：

<navigator url="必须以/开头" open-type="switchTab"></navigator>

API：wx.switchTab()

导航到非tabBar页面：

<navigator url="必须以/开头" open-type="navigate"></navigator>

API：wx.navigateTo()

后退导航：

<navigator open-type="navigateBack" delta="1"></navigator>

API：wx.navigateBack()

什么是wxs

WXS (WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构

wxs 的应用场景
- wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数，因此，小程序中 wxs 的 典型应用场景 就是 过滤器

启用下拉刷新：

json文件的window中将enablePullDownRefresh设置为true
json的backgroundColor是下拉窗口背景颜色
json的backgroundTextStyle配置下拉loading的样式：dark和light

监听用户下拉：在js中：

onPullDownRefresh:function(){

  //当操作完毕调用次函数，关闭下拉刷新的效果
  wx.stopPullDownRefresh()
}

监听上拉触底：js中：

onReachBottom:function(){}

在json中通过onReachBottomDistance配置距离，默认50px

loading提示api：

开启
wx.showLoading({
  title:'数据加载中'
})
隐藏
wx.hideLoading()

配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

小程序

登录