1.登录模块-小程序快捷登录
- 定义接口，封装
import { http } from '@/utils/http'type loginParams = {code: stringencryptedData: stringiv: string
}
export const postLoginWxMinAPI = (data: loginParams) => {return http({method: 'POST',url: '/login/wxMin',data,})
}- 获取登录凭证和手机号并登录
// 获取code登录凭证
let code = ''
onLoad(async () => {const res = await wx.login()code = res.code
})
// 获取用户手机号码
const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {const encryptedData = ev.detail!.encryptedData!const iv = ev.detail!.iv!const res = await postLoginWxMinAPI({code,encryptedData,iv,})
}<!-- 小程序端授权登录 --><button class="button phone" @getphonenumber="onGetphonenumber"><text class="icon icon-phone"></text>手机号快捷登录</button>
注意：获取手机号功能针对非个人开发者，且完成认证 的小程序开放
2.模拟快捷登录
- 封装模拟手机号,小程序内测版
// 小程序内测版
export const postLoginWxMinSimpleAPI = (phoneNumber: string) => {return http({method: 'POST',url: '/login/wxMin/simple',data: {phoneNumber,},})
}- 模拟手机号快捷登录
// 模拟手机号快捷登录
const postLoginWxMinSimple = async () => {const res = await postLoginWxMinSimpleAPI('13815869691')uni.showToast({icon: 'none',title: '登录成功',})
}
3.保存登录信息
- 类型声明
/** 小程序登录 登录用户信息 */
export type LoginResult = {/** 用户ID */id: number/** 头像 */avatar: string/** 账户名 */account: string/** 昵称 */nickname?: string/** 手机号 */mobile: string/** 登录凭证 */token: string
}
- 状态管理
// 定义 Store
export const useMemberStore = defineStore('member',() => {// 会员信息const profile = ref<LoginResult>()// 保存会员信息，登录时使用const setProfile = (val: LoginResult) => {profile.value = val}
)
- 成功提示
- 页面跳转
// 获取用户手机号码
const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {const encryptedData = ev.detail!.encryptedData!const iv = ev.detail!.iv!const res = await postLoginWxMinAPI({code,encryptedData,iv,})loginSuccess(res.result)
}
// 模拟手机号快捷登录
const postLoginWxMinSimple = async () => {const res = await postLoginWxMinSimpleAPI('13815869691')loginSuccess(res.result)
}const loginSuccess = (profile: LoginResult) => {// 保存会员信息const memberStore = useMemberStore()memberStore.setProfile(profile)// 成功提示uni.showToast({icon: 'success',title: '登录成功',})setTimeout(() => {// 页面跳转//小程序开发页面可以分为tabbar页面和普通页面，普通页面可以用navigateTo,tabbar页面要用switchtabuni.switchTab({ url: '/pages/my/my' })}, 500)
}
小程序开发页面可以分为tabbar页面和普通页面，普通页面可以用navigateTo,tabbar页面要用switchtab
4.会员信息展示
- 静态结构
- 自定义导航
{"path": "pages/my/my","style": {"navigationStyle": "custom","navigationBarTextStyle": "white","navigationBarTitleText": "我的"}},
- 渲染会员信息
const memberStore = useMemberStore()<!-- 情况1：已登录 --><view class="overview" v-if="memberStore.profile"><navigator url="/pagesMember/profile/profile" hover-class="none"><image class="avatar" mode="aspectFill" :src="memberStore.profile.avatar"></image></navigator><view class="meta"><view class="nickname">{{ memberStore.profile.nickname || memberStore.profile.account }}</view><navigator class="extra" url="/pagesMember/profile/profile" hover-class="none"><text class="update">更新头像昵称</text></navigator></view></view>
)
✅)
