文档章节

支付宝小程序开发——登陆失效后的交互处理

o
 osc_g8254g7s
发布于 2019/08/19 17:55
字数 1474
阅读 17
收藏 0

精选30+云产品,助力企业轻松上云!>>>

前言:

做的第一个支付宝小程序,支付宝会员日抢购的一个卡券类项目。考虑到流量会比较大,授权登陆放到用户第一次能直接访问的需要登陆的页面(或页面某个操作)进行处理。访问需要登陆的接口请求返回登陆失效的结果之后进行重新登陆,登陆成功后需要重新回到当前页面。

需求分析:

1. 登陆逻辑的处理:

用户首次访问的入口页面需要登陆的不止一个,所以登陆逻辑最好是进行统一风封装复用;

2. 登陆失效的处理:

这个支付宝小程序项目并没有登陆页,且小程序外部入口较多,所以登陆失效跳回到入口页面不仅体验不好,而且实现起来也比较复杂。

也考虑过接口登陆失效后调用登陆模块,登陆成功后回调之前的请求  A(params)=>{B(A(params)} ,但我们的接口请求是经过统一封装的,登陆失效的处理逻辑也是在封装里边的,那么回调也是在封装里边进行的,并不能同步到页面的数据进行重新赋值,也就无法重新渲染。当然,你也可以直接将登陆逻辑放到页面中去,那就是所有需要登陆的接口的处理都要放到页面中去了,那就比较麻烦了。

最后想到的最佳的解决方案就是登陆失效后重新刷新当前页面,虽说比不上重新登陆回调之前请求的体验好,但是实现上就会容易的多了,而且交互上做好登陆相关的提示,体验也还是挺不错的了。

需求实现:

1. 登陆封装:

鉴于项目中已经封装了网络请求,且登陆的相关逻辑需要引入网络请求的相关封装模块,也进行了一番探索,最终还是把登陆的逻辑封装在app.js中:

//app.js
import http from "./api/http"
App({
    ......
    /**
        * 2. 自动登录业务逻辑  
        */
    login: function() {
        let self = this;
        my.getAuthCode({
            //授权类型,默认 auth_base。支持 auth_base(静默授权)/ auth_user(主动授权) / auth_zhima(芝麻信用)
            scopes: ['auth_user'],
            success: res => {
                let authCode = res.authCode
                console.log("authCode:", authCode)
                if (authCode) {
                    // 访问用户登录接口获取usertoken
                    http.userLogin(authCode).then(data => {
                        if (!my.isEmpty(data.userToken)) {
                            my.setStorageSync0("usertoken", data.userToken)
                            if (my.getStorageSync0("currentPageUrl")) {
                   my.reLaunch({   url: my.getStorageSync0(
"currentPageUrl")   });
                 } }
else { console.log("userLoginError:", JSON.stringify(data)) } }) } }, fail: res => { console.warn("getAuthCode:", res) my.confirm({ title: '温馨提示', content: '登录授权失败,您可以尝试重新授权', confirmButtonText: '重新授权', cancelButtonText: '取消', success: (result) => { if (result.confirm) { self.login() } else { //取消登陆,需要返回上一页 if (my.getStorageSync0("currentPageUrl") == "/pages/my/my") { //我的页面(tab页面需要使用relanch跳转到首页) my.reLaunch({ url: '/pages/index/index' }) } else { //针对其他页面,返回上一页 my.navigateBack({ delta: 1 }) } } }, }); } }) } ...... });

说明:

  • 代码中的 my.isEmpty(value)  getStorageSync0(key)  my.setStorageSync0(key,value) 等方法均为针对支付宝小程序的特性自己封装的公共方法;
  • 页面初始化接口登陆失效——这种情况可以采用静默登陆,不提示(用户看到小程序原生的授权登陆就能明白怎么回事),登陆成功之后重新加载当前页面进行初始化即可;
  • 用户主动触发接口请求登陆失效——如用户单击事件调用接口,重新登陆打断了用户的操作,如果还想上边一样静默登陆不提示,那么用户会有点懵的。然而如果在重新授权登陆的过程中给出相关提示,那么用户重新执行之前的操作就好了,这样体验就好的多了。
  • 关于在封装方法中重载当前页面——支付宝小程序并没有提供直接获取页面路径及参数的API,所以这个就只能在需要重载的页面保存页面的路径+参数的完整path了,下边会详细说明。
  • 如果用户取消授权登陆——那么就只有让用户返回上一页了,其中Tab页需要重载首页。

2. 页面登陆及页面路径保存:

//main.js 公共方法封装
......
//将当前页面路径及参数保存到缓存中(登陆失效自动登陆后relaunch())
my.getCurrentPageUrlWithArgs=function(options) {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const url = currentPage.route
  let urlWithArgs = `/${url}?`
  for (let key in options) {
    const value = options[key]
    urlWithArgs += `${key}=${value}&`
  }
  urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
  my.setStorage0("currentPageUrl",urlWithArgs)
}
//page.js
import http from "../../api/http" var app = getApp(); Page({ ...... onLoad(e) { my.getCurrentPageUrlWithArgs(e) this.autologin() }, autologin() { //未登陆首次访问 if (my.isEmpty(my.getStorageSync0("usertoken"))) { app.login() } else { this.getUserInfo() } }, ...... })

说明:

  • 页面onLoad的时候,调用 my.getCurrentPageUrlWithArgs() 方法保存当前页面的完整路径;
  • 关于登陆,如果页面作为首次登陆的入口,如果登陆过则直接初始化,否则调用登陆方法。

3. 网络请求封装:

接口请求新增了 clickRequest 参数,有此参数,则给出相关提示,否则静默登陆不予提示:

......
const http = (params) => {
    return new Promise((resolve, reject) => {
        my.request({
            ......
            success: function(res) {
                //my.hideLoading()
                if (res.status == 200) {
                    //需要登录、后端返回登录失效代码,需要自动登录然后重新加载小程序
                    if (!params.noNeedLogin && res.data.s == "302") {
                        my.removeStorageSync({ key: "usertoken" })
                        //根据接口的调用是否是用户主动调用来确定是否给出提示
                        if (params.clickRequest) {
                            my.toast("登陆失效,重新登陆中...", function() {
                                getApp().login(() => {
                                    my.toast("登陆成功")
                                })
                            })
                        } else {
                            getApp().login()
                        }
                        return;
                    }
                    ......
                } else {
                    errorToast();
                    console.error(res)
                }
            },
            fail: function(e) {
                errorToast();
                reject(e)
            }
        })
    })
}
......

后记:

每新做一个项目,都会尽可能的对现有框架进行提升优化,这样不仅对当前项目的开发有帮助,也有利于以后其他类似项目的复用。力求精简代码,提升效率!有感兴趣的小伙伴可以多多留言讨论,共同探索前端技术。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
最强整理:微信小程序的前世今生

微信小程序  一、小程序介绍   背景与趋势  小程序技术方案  公众平台注册及配置  开发工具的使用  MINA框架架构剖析  应用程序配置详解  逻辑与界面分离架构  单向数据流  二、U...

Android进阶开发
04/21
0
0
小程序条形码插件wxbarcode的使用及改进

官方推荐用法 条形码插件单独调用 多个条形码生成实例 组件封装 注意事项 前言: 适用于小程序的条形码插件不多,目前只找到这一个能用的,工期限制,暂时就先用这一个了。 在使用插件的过程...

逍遥云天
03/24
0
0
付宝小程序很着急

付宝小程序很着急,宣布开放“附近的小程序”等多个入口 微信小程序这一年的发展并不快,每一步仿佛都是精心设计一般,所以,现在才有了稳步上升的微信小程序。而支付宝小程序一出现就实现了...

湃点科技
2018/01/23
0
0
微信原生小程序转其他平台的小程序实践

如何将现有的微信原生小程序转其他平台的小程序?我想如果打算做这么一件事,或许大多数同学和我一样可能没什么思路。我第一次听说是在一次小程序生态技术大会上,一公司的一位前端技术人员谈...

快狗打车前端团队
04/23
0
0
微信(公众号、小程序)开发

一、开发前准备 1)准备一个服务器,一个已经备案的域名(小程序开发必须使用:https) 2)涉及到微信支付的,需提前在微信支付商户平台,申请商户号和秘钥 3)如果需要将微信公众号或微信小...

osc_t4d5tw3o
2018/03/12
3
0

没有更多内容

加载失败,请刷新页面

加载更多

macz技巧分享—macOS高端使用技巧

Macos 的占有量不如 Windows,两者之间当操作方式也有很大的不同,当很多人熱悉 Windows 的操作之后,再接触 macos,觉得难上手,其实是习惯问题。如果你学习一些技巧,会觉得 macos 其实也不...

mac小叮当
11分钟前
11
0
手把手教你如何用黑白显示器显示彩色!

来源:大数据文摘 本文约1000字,建议阅读6分钟。 本文为你介绍如何通过黑白显示器上也能显示出彩色。 原来在黑白显示器上也能显示出彩色啊!通过在监视器上覆盖拜耳滤色镜,并拼接彩色图像,...

osc_jklrr90y
12分钟前
13
0
key-value结构排序:给定一个字符串,统计每个字符出现频率,先按value降序,再按key升序

对于key-value结构的排序 第一种:lambda表达式 第二种:函数 第三种:类对()的重载,仿函数形式 #include <iostream>#include <vector>#include <unordered_map>#include <string>#in......

osc_gwtkg2dc
12分钟前
0
0
BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛——2020全球区块链创新50强》

BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛——2020全球区块链创新50强》 目录 世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛——2020全球...

osc_vew1u0h0
14分钟前
0
0
BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》(三)

BlockChain:2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》(三) 目录 2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》 演讲嘉宾 演讲内容 ...

osc_8o71811p
15分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部