UniappDay04 - 技术栈

1.登录模块-小程序快捷登录

定义接口，封装

import { http } from '@/utils/http'

type loginParams = {
code: string
encryptedData: string
iv: 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()
复制代码
```
 // 保存会员信息，登录时使用
 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页面要用switchtab
uni.switchTab({ url: '/pages/my/my' })
}, 500)
}

小程序开发页面可以分为tabbar页面和普通页面，普通页面可以用navigateTo,tabbar页面要用switchtab

4.会员信息展示

静态结构

自定义导航

复制代码

 {
 		"path": "pages/my/my",
 		"style": {
     "navigationStyle": "custom",
     "navigationBarTextStyle": "white",
 			"navigationBarTitleText": "我的"
 		}
 	},

渲染会员信息

const memberStore = useMemberStore()

复制代码

   <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>