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

最新推荐文章于 2023-12-28 21:22:01 发布

大力99

最新推荐文章于 2023-12-28 21:22:01 发布

阅读量1.4k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Tangoneone/article/details/107267574

版权

笔记专栏收录该内容

67 篇文章 7 订阅

订阅专栏

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

在这里插入图片描述

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

02.登录-微信授权登录

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

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

为什么需要配置？

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

需要配置什么？

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

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

公共请求里面BASE_URL需要 https://www.uinav.com或者https://api-ugo-dev.itheima.net
在微信开发者工具里面退出你的账号

在这里插入图片描述

修改appid

在这里插入图片描述

让老师登录成功

注意点

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

注意点：

接口本身的问题
1. 再点一次就行了。

在这里插入图片描述

如果获取用户信息失败
1. 微信开发者工具，微信账号和appid不匹配的原因

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

传送门

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

使用示例
在这里插入图片描述

申请流程

申请小程序开发者账号，而且必须是小程序企业开发者账号
1. 企业开发者账号需要营业执照
2. 公司里面有营业执照
微信认证
1. 个人号无法认证
小程序开通微信支付
点击开通按钮后，选择新申请微信支付商户号或绑定一个已有的微信支付商户号，
申请微信支付商户号
1. 传送门
2. 需要营业执照和银行卡号
业务流程
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. 调授权接口

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

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

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

注意点：

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

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

在这里插入图片描述

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

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

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

在这里插入图片描述

点击请选择收货地址，授权获取通讯地址
1. 点击@click:getAddr
2. 发起授权
3. 调用授权接口
4. 如果用户拒绝
  1. uni.authorize的fail中统一处理
  2. 提示，打开设置允许
获取到用户通讯地址，渲染收货地址
设置为data属性address
请选择收货地址和显示收货地址的切换
1. v-if: address.userName

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

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

补充：

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

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

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

10.支付-微信支付

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

注意点

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

在这里插入图片描述

练习注意点：

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

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

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

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

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

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

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

构造cart

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

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

注意点

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

在这里插入图片描述 )]

onLoad拿到的数据是字符串

13.request中设置token

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

三种情况：

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

步骤：

根据接口是否需要token，两种状态isAuth,默认值为false
默认request.js header={}
如果是情况2，给header设置token

如果是情况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
}