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.成功提示并跳转页面

相关推荐
笨笨狗吞噬者4 小时前
维护 uniapp 小程序端近一年,我想拉一个开发者交流群
前端·程序员·uni-app
你的眼睛會笑1 天前
uni-app 实战:使用 lime-painter 实现页面内容一键生成海报并下载
uni-app
一只程序熊1 天前
uniapp 高德地图 打开选择地址报错,也没有展示出附近的位置
android·uni-app
2501_915909062 天前
不用越狱就看不到 iOS App 内部文件?使用 Keymob 查看和导出应用数据目录
android·ios·小程序·https·uni-app·iphone·webview
万物得其道者成2 天前
uni-app Android 离线打包:多环境(prod/dev)配置
android·opencv·uni-app
学习3人组2 天前
Uniapp快速上手了解
uni-app
小鲤鱼ya2 天前
vue3 + ts + uni-app 移动端封装图片上传添加水印
前端·typescript·uni-app·vue3
2501_915921432 天前
常用iOS性能测试工具大全及使用指南
android·测试工具·ios·小程序·uni-app·cocoa·iphone
桐溪漂流2 天前
Uni-app H5 环境下 ResizeObserver 监听 mp-html 动态高度
前端·uni-app·html
芒果大胖砸2 天前
uniapp 在h5中预览pdf hybrid方法
pdf·uni-app