11-小程序(登录前配置,微信支付,收货地址,request中设置token,授权拒绝处理wx.openSetting(),微信授权地址)

01.登录-页面分析与静态页面

1. 入口: 如果需要登录态，就会跳转登录
2. 主要模块
   1. 点我登录按钮
3. 其他说明
   1. 本质上微信授权登录

02.登录-微信授权登录

1. 接口分析
   1. url /api/public/v1/users/wxlogin
   2. 方法 post
   3. 参数
      1. code 通过uni.login
      2. 另外一些参数用户信息
2. 步骤
   1. 声明button open-type="getUserInfo"来获取用户信息
   2. uni.login获取code
   3. 发请求获取token
   4. 存token，提示成功

03.登录-微信授权登录需要配置！！！

为什么需要配置？

1. 逻辑成功的逻辑，微信账号必须是小程序的项目开发者
2. 涉及商城而且有支付功能，必须不能是个人小程序账号，所以只能用广州小程序id
3. 服务器地址也只能用广州的

需要配置什么？

1. 服务器地址https://www.uinxx.com或者https://api-ugo-dev.ixxx.net
2. appid换成 wx38d8fxxxxxxx
3. 需要老师扫码微信开发者工具

步骤（登录前一定要做的）：

1. 公共请求里面BASE_URL需要 https://www.uinav.com或者https://api-ugo-dev.itheima.net

2. 在微信开发者工具里面退出你的账号

3. 修改appid

4. 让老师登录成功

注意点

1. 微信开发者工具同一时间只能登录一个账号，需要排队的。
2. 让老师扫码之前，保证登录请求OK

注意点：

1. 接口本身的问题

   1. 再点一次就行了。

2. 如果获取用户信息失败

   1. 微信开发者工具，微信账号和appid不匹配的原因

04.小程序微信支付（了解）

传送门

用户在微信小程序内唤起微信支付，完成支付返回微信小程序

使用示例

申请流程

1. 申请小程序开发者账号，而且必须是小程序企业开发者账号

   1. 企业开发者账号需要营业执照
   2. 公司里面有营业执照

2. 微信认证

   1. 个人号无法认证

3. 小程序开通微信支付

4. 点击开通按钮后，选择新申请微信支付商户号或绑定一个已有的微信支付商户号，

5. 申请微信支付商户号

   1. 传送门
   2. 需要营业执照和银行卡号

6. 业务流程

   1. 前端只调接口，拿到支付参数，然后调用wx.requestPayment，唤起微信支付

      wx.requestPayment({
        timeStamp: '',
        nonceStr: '',
        package: '',
        signType: 'MD5',
        paySign: '',
        success (res) { },
        fail (res) { }
      })
      

   2. 后端调用wxsdk.reqWXUnifiedorder,传入appid，商户号，open_id等生成前端微信支付的参数。

 wxsdk.reqWXUnifiedorder(wxconfig.AppID, wxconfig.MchId, wxconfig.PayKey, user.wx_open_id.toString(), out_trade_no, 1, "品优购支付", wxconfig.wxPayNotifiyUrl)

05.小程序授权拒绝处理

授权

概念: 小程序获取微信的一些权限

使用：

1. 用户信息
2. 其他
   1. 发起授权
   2. 调授权接口

问题：如果小程序授权拒绝如何处理

1. 现象：如果拒绝了，再次点击没有反应的
2. 解决方法
3. 提示，打开设置让用户允许权限

fail(){
    // console.log('拒绝了')
    // 提示，在设置里打开允许
    wx.showModal({
        title:'提示',
        content:'请在打开的设置允许通讯地址',
        success(res){
            if(res.confirm){
                // 打开设置
                wx.openSetting()
            }
        }
    })
}

注意点：

1. wx.openSetting()会打开界面，可以看各种权限的状态

06.支付-页面分析&静态页面

1. 入口：购物车点结算进来，商详立即购买跳转支付
2. 主要模块
   1. 同步收货地址
   2. 商品列表
   3. 微信支付
3. 其他说明
   1. 这个页面没有设计
   2. 收货地址没有接口，只同步微信的通讯地址
   3. 商品列表和购物车列表的差别
      1. 商品是购物车选中的商品
      2. 数量不能改

07.支付-同步微信通讯地址

1. 实际工作中，一般收货地址有相关接口+同步微信通讯地址

2. 点击请选择收货地址，授权获取通讯地址

   1. 点击@click:getAddr
   2. 发起授权
   3. 调用授权接口
   4. 如果用户拒绝
      1. uni.authorize的fail中统一处理
      2. 提示，打开设置允许

3. 获取到用户通讯地址，渲染收货地址

4. 设置为data属性address

5. 请选择收货地址和显示收货地址的切换

   1. v-if: address.userName
      

08.支付-同步微信通讯地址-补充

1. 收货地址需要存在本地
   1. 授权获取到地址时，设置到storage
   2. data函数里storage=>data属性
2. 已经有地址，还希望可以切换地址
   1. 注册获取地址事件，放在外层

补充：

1. 购物车里面，如果商品ids是空的，没有必要发请求
2. 购物车点击结算后跳转支付页
   1. 没有商品提示
   2. 没有登录，跳转登录
   3. 否则跳转支付
3. 登录页面如果登录的话，回到上一页

09.支付-请求与渲染数据

1. 渲染storage购物车里面勾选的商品
   1. 把cart.vue相同的逻辑copy过来
   2. storage cart去掉没有勾选的商品

10.支付-微信支付

1. 分析接口
   1. 先创建订单
   2. 再获取支付参数
2. 步骤
   1. 点击微信支付, 创建订单
      1. @click:pay
      2. 如果用户没有选择地址，提示
      3. 请求
         1. header里面传Authorization
         2. data需要构造一些参数
   2. 根据订单号，生成支付参数
      1. 请求
         1. header里面传Authorization
   3. 根据支付参数，使用uni.requestPayment 唤起支付
      
      
      
      

注意点

1. 微信开发工具，唤起的微信支付是二维码; 手机扫码小程序唤起支付是正常的
2. 另外微信开发工具，预览报错，‘userLocation’, 搜索所有的文件，删除

练习注意点：

1. 可以手动在调试器storage添加token, 可以最终获取到支付参数
2. 微信开发者工具，appid尽量填真实的

11.支付-订单成功后删除勾选商品

1. 需要删除storage cart已勾选的商品：arrangeCart
   1. 逻辑 数组方法filiter

12.商品详情-立即购买跳转支付页面

​ 把当前商品购买一份，直接跳转支付页面，不经过购物车，无须在storage存储

1. 点击立即购买跳转支付页面，并传递goodsId

   1. 点击@click:toBuy
   2. 跳转uni.navigateTo
   3. 在模拟器页面参数确认传参Ok
   4. 支付页面获取到goodsId
      

2. 如果是从商详跳转支付页面，商品列表应该展示该商品，数量为1

   1. 构造cart

      this.cart = [
          {
              goodsId: this.goodsId,
              num: 1,
              checked: true
          }
      ];
      

3. 如果不是从商详立即购买过来，生成订单后删除storage cart里面选中的商品
   

注意点

1. 微信开发者工具里面AppData的属性

)]

2. onLoad拿到的数据是字符串

13.request中设置token

把header传token，和需要登录态没有token就跳转登录页的逻辑统一放在request.js

三种情况：

1. 接口无须token,header不需要传或者传header={}
2. 接口需要token，有登录态，header传token
3. 接口需要token，但是没有登录态，跳转登录页

步骤：

1. 根据接口是否需要token，两种状态isAuth,默认值为false

2. 默认request.js header={}

3. 如果是情况2，给header设置token

4. 如果是情况3，跳转登录

   // 接口不需要传token,默认值为{}
   let header = {}
   
   if (isAuth) {
       // 接口需要传token
       let token = uni.getStorageSync('token')
       // 接口需要token，但是没有登录态，跳转登录页
       if(!token){
           uni.navigateTo({
               url: '/pages/login/login'
           })
           return 
       }
       header.Authorization = token
   }
   

14.优购案例-订单结果页(了解)

01.页面分析

1. 支付页面，支付取消或者支付成功，都会进入订单结果页
2. 订单结果页支付成功，展示成功状态和首页按钮，点首页按钮去到首页
3. 订单结果页支付失败，展示失败状态和首页按钮与订单详情按钮，点首页按钮去到首页，点订单详情去到订单详情

02.静态页面

1. 文案及两个按钮

03.基本逻辑

1. 支付页面上，支付成功和失败跳转订单结果页
   1. 失败时候传递orderNumber
2. 支付成功显示首页,并设置标题
3. 支付失败显示首页和查询订单详情，也设置标题

15.优购案例-订单详情(了解)

01.页面分析

1. 订单结果点订单详情去到订单详情
2. 订单详情展示订单基本信息

02.静态页面

1. 展示订单基本信息

03.请求&渲染数据

1. 未登录跳转登录

2. 查询订单状态

   1. 接口 /api/public/v1/my/orders/chkOrder

      1. 请求方式POST

      2. 请求头:

         “Authorization” : token // 需要设置token带给后台

      3. 请求体:
         order_number : 订单号

16. 优购案例-我的(了解)

01.页面分析

1. 入口是tabBar
2. 展示登录状态收藏店铺、订单及其他信息
3. 已经登录展示用户头像和昵称，未登陆就显示登录，点登录跳转登录
4. 点订单跳转订单列表
5. 拨打电话的功能

02.静态页面

03.基本逻辑

1. 已经登录展示用户头像和昵称，未登陆就显示登录，点登录跳转登录
   1. login页userInfo添加到storage
   2. onShow里面获取到用户信息
   3. 点登录跳转登录
2. 拨打电话
   1. wx.makePhoneCall

17. 优购案例-订单列表(了解)

01.页面分析

1. 分别展示全部，待付款，已付款，退款/退货的订单列表
2. 在我的页面，点击订单去到订单列表

02.静态页面

1. 顶部tab栏
2. 订单列表展示

03.基本逻辑

1. 我的页面点击不同菜单去到订单列表，选中对应的tab
   1. 两边菜单并不是一一对应的，设置数组序列标志
2. 点击tab展示对应的列表

04.请求&渲染数据

1. 渲染订单列表

   1. 接口/api/public/v1/my/orders/all?type=1

      1. 请求方式GET

      2. 请求头:

         “Authorization” : token //需要设置token带给后台

2. 切换Tab发送请求