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>
相关推荐
我的div丢了肿么办1 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
shykevin1 小时前
uni-app x导航区域跳转
windows·uni-app
武天1 小时前
一个项目有多个后端地址,每个后端地址的请求拦截器和响应拦截器都不一样,该怎么封装
vue.js
2501_915106321 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
潜心编码2 小时前
基于vue的停车场管理系统
前端·javascript·vue.js
三小河2 小时前
React Vite 中动态批量导入路由
前端·vue.js
拉不动的猪3 小时前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
jason_yang3 小时前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element
泉城老铁3 小时前
vue实现前端excel的导出
前端·vue.js