uniapp商城之登录模块

文章目录


一、小程序快捷登录

1.定义接口

2.获取登录凭证 code

3.获取手机号并登录


注意:获取手机号功能针对非个人开发者,且完成认证的小程序开放

工作场景:使用企业小程序appid,且把微信号添加到开发者列表中

二、模拟快捷登录

说明:获取手机号功能针对个人开发者不开放

1.封装模拟登录API

javascript 复制代码
import type { LoginResult } from "@/types/member"
import { http } from "@/utils/http"

export type LoginParams = {
    code:string
    encryptedData:string
    iv:string
}

// 小程序登录-内测版
// POST
// /login/wxMin/simple
export const postLoginWxMinSimpleAPI = (phoneNumber:string) => {
    return http<LoginResult>({
        method:'POST',
        url:'/login/wxMin/simple',
        data:{
            phoneNumber
        }
    })
}

2.调用模拟登录


三、保存登录信息

1.类型声明

2.状态管理

javascript 复制代码
  // 保存会员信息
  const memberStore = useMemberStore()
  memberStore.setProfile(profile)

3.成功提示并跳转页面

相关推荐
Swift社区7 小时前
H5 与 ArkTS 通信的完整设计模型
uni-app·harmonyos
小溪彼岸11 小时前
uni-app小白从0开发一款鸿蒙Next应用到上线
uni-app·harmonyos
一颗小青松12 小时前
uniapp app端使用uniCloud的unipush
uni-app
cngm11016 小时前
uniapp+springboot后端跨域以及webview中cookie调试
spring boot·后端·uni-app
iOS阿玮1 天前
“死了么”App荣登付费榜第一名!
uni-app·app·apple
wendycwb2 天前
uni-app 在真机中canvas绘制的元素悬浮,内容不随父组件滚动问题
uni-app
frontend_frank2 天前
脱离 Electron autoUpdater:uni-app跨端更新:Windows+Android统一实现方案
android·前端·javascript·electron·uni-app
三天不学习2 天前
UniApp三端实时通信实战:SignalR在H5、APP、小程序的差异与实现
微信小程序·uni-app·signalr
念你那丝微笑2 天前
uView Plus + Vue3 + TypeScript + UniApp 正确引入 UnoCSS(避坑版)
vue.js·typescript·uni-app
念你那丝微笑2 天前
vue3+ts在uniapp项目中实现自动导入 ref 和 reactive
vue.js·typescript·uni-app