html简单的网站,php旅游类网站开发,漂亮的网站设计,ppt 如何做网站交互式目录
微信登录
登录方式
静态结构
获取登录凭证
获取手机号码
微信登录接口(生产环境)
模拟手机登录(开发环境)
用户信息持久化存储 涉及知识点#xff1a;微信授权登录#xff0c;文件上传#xff0c;Store 状态管理等。
微信登录
微信小程序的开放…目录
微信登录
登录方式
静态结构
获取登录凭证
获取手机号码
微信登录接口(生产环境)
模拟手机登录(开发环境)
用户信息持久化存储 涉及知识点微信授权登录文件上传Store 状态管理等。
微信登录
微信小程序的开放能力允许开发者获取微信用户的基本信息昵称、性别、手机号码等开发者常用来实现注册/登录的功能。
登录方式
常见登录/注册方式
用户名/手机号 密码手机号 验证码授权登录
实际开发过程中常常需要实现以上的一种或多种方式我们的项目主要实现授权登录。
微信授权登录
用户在使用小程序时其实已登录微信其本质上就是微信授权给小程序读取微信用户信息。 开放接口 / 登录 / wx.login (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
开放能力 / 用户信息 / 手机号快速验证组件 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html 传统登录方式
传统登录方式一般是通过输入密码或者手机验证码实现登录。 温馨提示接口文档中提供练习使用的登录接口大家可在课后自行完成。
静态结构
登录页
// src/pages/login/login.vuescript setup langts
//
/scripttemplateview classviewportview classlogoimagesrchttps://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/logo_icon.png/image/viewview classlogin!-- 网页端表单登录 --!-- input classinput typetext placeholder请输入用户名/手机号码 / --!-- input classinput typetext password placeholder请输入密码 / --!-- button classbutton phone登录/button --!-- 小程序端授权登录 --button classbutton phonetext classicon icon-phone/text手机号快捷登录/buttonview classextraview classcaptiontext其他登录方式/text/viewview classoptions!-- 通用模拟登录 --buttontext classicon icon-phone模拟快捷登录/text/button/view/viewview classtips登录/注册即视为你同意《服务条款》和《小兔鲜儿隐私协议》/view/view/view
/templatestyle langscss
page {height: 100%;
}.viewport {display: flex;flex-direction: column;height: 100%;padding: 20rpx 40rpx;
}.logo {flex: 1;text-align: center;image {width: 220rpx;height: 220rpx;margin-top: 15vh;}
}.login {display: flex;flex-direction: column;height: 60vh;padding: 40rpx 20rpx 20rpx;.input {width: 100%;height: 80rpx;font-size: 28rpx;border-radius: 72rpx;border: 1px solid #ddd;padding-left: 30rpx;margin-bottom: 20rpx;}.button {display: flex;align-items: center;justify-content: center;width: 100%;height: 80rpx;font-size: 28rpx;border-radius: 72rpx;color: #fff;.icon {font-size: 40rpx;margin-right: 6rpx;}}.phone {background-color: #28bb9c;}.wechat {background-color: #06c05f;}.extra {flex: 1;padding: 70rpx 70rpx 0;.caption {width: 440rpx;line-height: 1;border-top: 1rpx solid #ddd;font-size: 26rpx;color: #999;position: relative;text {transform: translate(-40%);background-color: #fff;position: absolute;top: -12rpx;left: 50%;}}.options {display: flex;justify-content: center;align-items: center;margin-top: 70rpx;button {padding: 0;background-color: transparent;}}.icon {font-size: 24rpx;color: #444;display: flex;flex-direction: column;align-items: center;::before {display: flex;align-items: center;justify-content: center;width: 80rpx;height: 80rpx;margin-bottom: 6rpx;font-size: 40rpx;border: 1rpx solid #444;border-radius: 50%;}}.icon-weixin::before {border-color: #06c05f;color: #06c05f;}}
}.tips {position: absolute;bottom: 80rpx;left: 20rpx;right: 20rpx;font-size: 22rpx;color: #999;text-align: center;
}
/style
获取登录凭证
前端调用 wx.login() 接口获取登录凭证code。
后端通过凭证code向微信服务器换取用户登录态信息。
script setup langts
import { onLoad } from dcloudio/uni-app// 获取 code 登录凭证
let code
onLoad(async () {const res await wx.login()code res.code
})
/script 注意 code 的获取不要在 getphonenumber 事件回调函数调用否则可能会出现错误 温馨提示 用户登录态信息不包含用户昵称、性别、手机号码等信息作用是用于后端服务器与微信服务器通讯。 获取手机号码
出于安全限制小程序【规定】想获取用户的手机号必须由用户主动【点击按钮】并【允许申请】才可获取加密的手机号信息。 前端提供 open-type 按钮在事件处理函数中获取加密的手机号信息。
后端解密手机号信息把手机号和用户登录态关联在一起。
script setup langts
// 获取用户手机号码
const onGetphonenumber: UniHelper.ButtonOnGetphonenumber (ev) {console.log(ev)
}
/scripttemplateview classviewportview classloginbutton classbutton phone open-typegetPhoneNumber getphonenumberonGetphonenumbertext classicon icon-phone/text手机号快捷登录/button/view/view
/template 常见问题 Q为什么我无法唤起获取手机号的界面 A获取手机号功能目前针对非个人开发者所以个人开发者无法唤起获取手机号界面详见文档。 为方便开发者开发和体验小程序、小游戏的各种能力开发者可以申请小程序或小游戏的 测试号并使用此帐号在开发者工具创建项目进行开发测试以及真机预览体验。申请测试号的过程非常简单。只需访问 申请地址 并使用微信扫描二维码即可获得为自己分配好的小程序和小游戏测试账号。
项目提供了模拟登录 API 用于练习。
微信登录接口(生产环境)
接口调用
接口地址/login/wxMin
请求方式POST
请求参数
Body
字段名称是否必须默认值备注code是无wx.login 获取iv是无getphonenumber 事件回调获取encryptedData是无getphonenumber 事件回调获取
// src/services/login.tsimport type { LoginResult } from /types/member
import { http } from /utils/httptype LoginParams {code: stringencryptedData: stringiv: string
}
/*** 小程序登录* param data 请求参数*/
export const postLoginWxMinAPI (data: LoginParams) {return httpLoginResult({method: POST,url: /login/wxMin,data,})
} 类型声明
// src/types/member.d.ts/** 小程序登录 登录用户信息 */
export type LoginResult {/** 用户ID */id: number/** 头像 */avatar: string/** 账户名 */account: string/** 昵称 */nickname?: string/** 手机号 */mobile: string/** 登录凭证 */token: string
}
参考代码 小兔鲜儿项目采用常见的 登录凭证 手机号 实现授权登录。
// src/pages/login/login.vuescript setup langts
import { postLoginWxMinAPI } from /services/login
import { onLoad } from dcloudio/uni-app// 获取 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!// 登录请求await postLoginWxMinAPI({ code, encryptedData, iv })// 成功提示uni.showToast({ icon: none, title: 登录成功 })
}
/scripttemplateview classviewportview classloginbutton classbutton phone open-typegetPhoneNumber getphonenumberonGetphonenumbertext classicon icon-phone/text手机号快捷登录/button/view/view
/template
模拟手机登录(开发环境) 获取手机号功能目前针对非个人开发者且完成了认证的小程序开放详见文档。 温馨提示 为了更好实现登录后续的业务后端提供了一个内部测试用的接口只需要传手机号即可实现快捷登录。 请求接口
接口地址/login/wxMin/simple
请求方式POST
请求参数
Body
字段名称是否必须默认值备注phoneNumber是无模拟的手机号
该接口跟微信登录接口返回的数据格式是相同的。
/*** 小程序登录_内测版* param phoneNumber 模拟手机号码*/
export const postLoginWxMinSimpleAPI (phoneNumber: string) {return httpLoginResult({method: POST,url: /login/wxMin/simple,data: {phoneNumber,},})
} 参考代码 button taponGetphonenumberSimpletext classicon icon-phone模拟快捷登录/text/button
const onGetphonenumberSimple async () {const res await postLoginWxMinSimpleAPI(13123456789);console.log(res);uni.showToast({ icon: success, title: 登录成功 });
};
用户信息持久化存储
Pinia 的持久化存储插件在 项目起步 模块已经搭建完成现在只需要在用户登录成功后补充 TS 类型声明并保存用户信息即可。 参考代码
Store
// src/stores/modules/member.tsimport type { LoginResult } from /types/member
import { defineStore } from pinia
import { ref } from vue// 定义 Store
export const useMemberStore defineStore(member,() {// 会员信息const profile refLoginResult() // 保存会员信息登录时使用const setProfile (val: LoginResult) {profile.value val}// 清理会员信息退出时使用const clearProfile () {profile.value undefined}// 记得 returnreturn { profile, setProfile, clearProfile }},{// 小程序端配置persist: {storage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {uni.setStorageSync(key, value)},},},},
) 登录页
script setup langts
import { postLoginWxMinAPI, postLoginWxMinSimpleAPI } from /services/login
import { useMemberStore } from /stores
import type { LoginResult } from /types/member
import { onLoad } from dcloudio/uni-app// 获取 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 })loginSuccess(res.result)
}// 模拟手机号码快捷登录开发练习
const onGetphonenumberSimple async () {const res await postLoginWxMinSimpleAPI(13123456789)loginSuccess(res.result)
}const loginSuccess (profile: LoginResult) {// 保存会员信息const memberStore useMemberStore() memberStore.setProfile(profile) // 成功提示uni.showToast({ icon: success, title: 登录成功 })setTimeout(() {// 页面跳转uni.switchTab({ url: /pages/my/my })}, 500)
}
/script
