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