UniappDay04

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

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,
   })
   }

2. 获取登录凭证和手机号并登录

   // 获取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.模拟快捷登录

1. 封装模拟手机号,小程序内测版

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

2. 模拟手机号快捷登录

   // 模拟手机号快捷登录
   const postLoginWxMinSimple = async () => {
   const res = await postLoginWxMinSimpleAPI('13815869691')
   uni.showToast({
   icon: 'none',
   title: '登录成功',
   })
   }

3.保存登录信息

1. 类型声明

   /** 小程序登录 登录用户信息 /
   export type LoginResult = {
   /* 用户ID /
   id: number
   /* 头像 /
   avatar: string
   /* 账户名 /
   account: string
   /* 昵称 /
   nickname?: string
   /* 手机号 /
   mobile: string
   /* 登录凭证 */
   token: string
   }

2. 状态管理

   // 定义 Store
   export const useMemberStore = defineStore(
   'member',
   () => {
   // 会员信息
   const profile = ref<LoginResult>()

    // 保存会员信息，登录时使用
    const setProfile = (val: LoginResult) => {
      profile.value = val
    }

   )

3. 成功提示

4. 页面跳转

   // 获取用户手机号码
   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.会员信息展示

1. 静态结构

2. 自定义导航

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

3. 渲染会员信息

   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>