01.登录-页面分析与静态页面
- 入口: 如果需要登录态,就会跳转登录
- 主要模块
- 点我登录按钮
- 其他说明
- 本质上微信授权登录
02.登录-微信授权登录
- 接口分析
- url /api/public/v1/users/wxlogin
- 方法 post
- 参数
- code 通过uni.login
- 另外一些参数用户信息
- 步骤
- 声明button open-type="getUserInfo"来获取用户信息
- uni.login获取code
- 发请求获取token
- 存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
注意点:
-
接口本身的问题
- 再点一次就行了。
-
如果获取用户信息失败
- 微信开发者工具,微信账号和appid不匹配的原因
04.小程序微信支付(了解)
用户在微信小程序内唤起微信支付,完成支付返回微信小程序
使用示例
申请流程
-
申请小程序开发者账号,而且必须是小程序企业开发者账号
- 企业开发者账号需要营业执照
- 公司里面有营业执照
-
微信认证
- 个人号无法认证
-
小程序开通微信支付
-
点击开通按钮后,选择新申请微信支付商户号或绑定一个已有的微信支付商户号,
-
申请微信支付商户号
- 传送门
- 需要营业执照和银行卡号
-
业务流程
-
前端只调接口,拿到支付参数,然后调用wx.requestPayment,唤起微信支付
wx.requestPayment({ timeStamp: '', nonceStr: '', package: '', signType: 'MD5', paySign: '', success (res) { }, fail (res) { } })
-
后端调用
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.小程序授权拒绝处理
概念: 小程序获取微信的一些权限
使用:
- 用户信息
- 其他
- 发起授权
- 调授权接口
问题:如果小程序授权拒绝如何处理
- 现象:如果拒绝了,再次点击没有反应的
- 解决方法
- 提示,打开设置让用户允许权限
fail(){
// console.log('拒绝了')
// 提示,在设置里打开允许
wx.showModal({
title:'提示',
content:'请在打开的设置允许通讯地址',
success(res){
if(res.confirm){
// 打开设置
wx.openSetting()
}
}
})
}
注意点:
- wx.openSetting()会打开界面,可以看各种权限的状态
06.支付-页面分析&静态页面
- 入口:购物车点结算进来,商详立即购买跳转支付
- 主要模块
- 同步收货地址
- 商品列表
- 微信支付
- 其他说明
- 这个页面没有设计
- 收货地址没有接口,只同步微信的通讯地址
- 商品列表和购物车列表的差别
- 商品是购物车选中的商品
- 数量不能改
07.支付-同步微信通讯地址
- 实际工作中,一般收货地址有相关接口+同步微信通讯地址
-
点击请选择收货地址,授权获取通讯地址
- 点击@click:getAddr
- 发起授权
- 调用授权接口
- 如果用户拒绝
- uni.authorize的fail中统一处理
- 提示,打开设置允许
-
获取到用户通讯地址,渲染收货地址
-
设置为data属性address
-
请选择收货地址和显示收货地址的切换
- v-if: address.userName
- v-if: address.userName
08.支付-同步微信通讯地址-补充
- 收货地址需要存在本地
- 授权获取到地址时,设置到storage
- data函数里storage=>data属性
- 已经有地址,还希望可以切换地址
- 注册获取地址事件,放在外层
补充:
- 购物车里面,如果商品ids是空的,没有必要发请求
- 购物车点击结算后跳转支付页
- 没有商品提示
- 没有登录,跳转登录
- 否则跳转支付
- 登录页面如果登录的话,回到上一页
09.支付-请求与渲染数据
- 渲染storage购物车里面勾选的商品
- 把cart.vue相同的逻辑copy过来
- storage cart去掉没有勾选的商品
10.支付-微信支付
- 分析接口
- 先创建订单
- 再获取支付参数
- 步骤
- 点击微信支付, 创建订单
- @click:pay
- 如果用户没有选择地址,提示
- 请求
- header里面传Authorization
- data需要构造一些参数
- 根据订单号,生成支付参数
- 请求
- header里面传Authorization
- 请求
- 根据支付参数,使用
uni.requestPayment
唤起支付
- 点击微信支付, 创建订单
注意点
- 微信开发工具,唤起的微信支付是二维码; 手机扫码小程序唤起支付是正常的
- 另外微信开发工具,预览报错,‘userLocation’, 搜索所有的文件,删除
练习注意点:
- 可以手动在调试器storage添加token, 可以最终获取到支付参数
- 微信开发者工具,appid尽量填真实的
11.支付-订单成功后删除勾选商品
- 需要删除storage cart已勾选的商品:arrangeCart
- 逻辑 数组方法filiter
12.商品详情-立即购买跳转支付页面
把当前商品购买一份,直接跳转支付页面,不经过购物车,无须在storage存储
-
点击立即购买跳转支付页面,并传递goodsId
- 点击@click:toBuy
- 跳转uni.navigateTo
- 在模拟器页面参数确认传参Ok
- 支付页面获取到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 }
14.优购案例-订单结果页(了解)
01.页面分析
- 支付页面,支付取消或者支付成功,都会进入订单结果页
- 订单结果页支付成功,展示成功状态和首页按钮,点首页按钮去到首页
- 订单结果页支付失败,展示失败状态和首页按钮与订单详情按钮,点首页按钮去到首页,点订单详情去到订单详情
02.静态页面
- 文案及两个按钮
03.基本逻辑
- 支付页面上,支付成功和失败跳转订单结果页
- 失败时候传递orderNumber
- 支付成功显示
首页
,并设置标题 - 支付失败显示
首页
和查询订单详情
,也设置标题
15.优购案例-订单详情(了解)
01.页面分析
- 订单结果点订单详情去到订单详情
- 订单详情展示订单基本信息
02.静态页面
- 展示订单基本信息
03.请求&渲染数据
-
未登录跳转登录
-
查询订单状态
-
接口 /api/public/v1/my/orders/chkOrder
-
请求方式POST
-
请求头:
“Authorization” : token // 需要设置token带给后台
-
请求体:
order_number : 订单号
-
-
16. 优购案例-我的(了解)
01.页面分析
- 入口是tabBar
- 展示登录状态收藏店铺、订单及其他信息
- 已经登录展示用户头像和昵称,未登陆就显示登录,点登录跳转登录
- 点订单跳转订单列表
- 拨打电话的功能
02.静态页面
03.基本逻辑
- 已经登录展示用户头像和昵称,未登陆就显示登录,点登录跳转登录
- login页userInfo添加到storage
- onShow里面获取到用户信息
- 点登录跳转登录
- 拨打电话
- wx.makePhoneCall
17. 优购案例-订单列表(了解)
01.页面分析
- 分别展示全部,待付款,已付款,退款/退货的订单列表
- 在我的页面,点击订单去到订单列表
02.静态页面
- 顶部tab栏
- 订单列表展示
03.基本逻辑
- 我的页面点击不同菜单去到订单列表,选中对应的tab
- 两边菜单并不是一一对应的,设置数组序列标志
- 点击tab展示对应的列表
04.请求&渲染数据
-
渲染订单列表
-
接口
/api/public/v1/my/orders/all?type=1
-
请求方式GET
-
请求头:
“Authorization” : token //需要设置token带给后台
-
-
-
切换Tab发送请求