微信登录流程

已于 2024-04-09 10:24:40 修改
阅读量17 收藏
点赞数
分类专栏： uni.app wx小程序 文章标签： 微信 前端 javascript
于 2022-07-10 22:49:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxdzi/article/details/125712475
版权
  1. 建立 vux store文件夹 index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import request,{PostHeader} from '@/pages/bbt_api/http.js'
Vue.use(Vuex)
// 本地存储中用户信息的 key
const USER_INFO = 'userInfo'
// 本地存储中确认订单信息的 key
const ORDER_INFO = 'orderInfo'
// 购物车信息的 key
const SHOPPING_INFO = 'shoppingCartInfo'
// 用户状态信息的 key
const USER_STATE_INFO = 'userstateinfo'
// 上级用户的id的 key
const PARENT_ID = 'parentid'
const store = new Vuex.Store({
    state: {
		// 用户信息
		userInfo: uni.getStorageSync(USER_INFO) ? JSON.parse(uni.getStorageSync(USER_INFO)) : { id: 22},
		// 确认订单信息
		orderInfo:uni.getStorageSync(ORDER_INFO) ? JSON.parse(uni.getStorageSync(ORDER_INFO)) : {},
		// 购物车订单信息
		shoppingCartInfo:uni.getStorageSync(SHOPPING_INFO) ? JSON.parse(uni.getStorageSync(SHOPPING_INFO)) : {},
		// 用户状态信息
		userStateInfo:uni.getStorageSync(USER_STATE_INFO) ? JSON.parse(uni.getStorageSync(USER_STATE_INFO)) : {},
		// 上级用户id
		parentId: uni.getStorageSync(PARENT_ID)
	},
    mutations: {
		// 更新用户信息
		updateUserInfo(state,userInfo){
			// 对数据做持久化处理
			uni.setStorageSync(USER_INFO,JSON.stringify(userInfo));
			// 更新 state 中的数据
			state.userInfo = {...state.userInfo,...userInfo}
		},
		// 更新确认订单信息
		updateOrderInfo(state,orderInfo){
			// 对数据做持久化处理
			uni.setStorageSync(ORDER_INFO,JSON.stringify(orderInfo));
			// 更新 state 中的数据
			state.orderInfo = {...state.orderInfo,...orderInfo}
		},
		// 更新购物车订单信息
		updateShoppingCartInfo(state,shoppingCartInfo){
			// 对数据做持久化处理
			uni.setStorageSync(ORDER_INFO,JSON.stringify(shoppingCartInfo));
			// 更新 state 中的数据
			state.shoppingCartInfo = {...shoppingCartInfo}
		},
		// 更新用户状态信息
		updateUserStateInfo(state,userStateInfo){
			// 对数据做持久化处理
			uni.setStorageSync(USER_STATE_INFO,JSON.stringify(userStateInfo));
			// 更新 state 中的数据
			state.userStateInfo = {...userStateInfo}
		},
		// 更新上级用户id
		updateParentId(state,parentId){
			// 如果没有上级用户的id
			if(parentId==='undefined') return uni.removeStorageSync(PARENT_ID)
			// 对数据做持久化处理
			uni.setStorageSync(PARENT_ID,parentId);
			// 更新 state 中的数据
			state.parentId = parentId
		},
		// 清空用户信息
		clearUserInfo(state){
			state.userInfo = {}
			state.userStateInfo = {}
			// 清空本地存储中的用户信息
			uni.clearStorageSync()
		}
	},
	actions:{
		// 绑定上级用户的方法
		async bindSuperiorUser(context){
			try{
				// 如果不是通过上级用户分享的小程序码进入的，则终止函数执行
				if(!context.state.parentId) return
				// 准备请求参数
				const requestPayload = {
					userid:context.state.userInfo.id,
					topid:context.state.parentId
				}
				// 发送请求
				await request('/UserResourcesWX/updateBd',PostHeader,requestPayload)
				// console.log(context)
			}catch(e){
				//TODO handle the exception
			}
		},
		// 提交上级用户的分享记录
		async submitRecords(context){
			try{
				// 如果没有绑定上级用户或者没有登录，则终止函数执行
				if(!context.state.parentId || !context.state.userInfo.id) return
				// 如果有绑定上级用户，则准备请求参数
				const requestPayload = {
					userid:context.state.userInfo.id,
					topid:context.state.parentId
				}
				// 发送请求
				await request('/UserResourcesWX/addBd',PostHeader,requestPayload)
			}catch(e){
				//TODO handle the exception
			}
		}
	}
})
export default store

登录页面代码

<template>
	<view class="Login_container" :style="'height:'+ screenHeight +'px !important;'">
		<view class="logo_box">
			<image src="../../static/login_banner.png" mode="" class="logo"></image>
		</view>
		<!-- <button class="phone_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号一键登录</button> -->
		<!-- <view class="other-login-methods_box">
			<view class="line"></view>
			<view class="other-login-methods_btn">其他登录方式</view>
			<view class="line"></view>
		</view> -->
		<button class="wx-login_box" @click="wxLogin">微信授权登录</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				//用户openid
				userOpenid: '',
				// 当前用户签名
				session_key: '',
				// 当前设备的可使用高度
				screenHeight: '',
				// 开关阀
				flag: true
			}
		},
		onLoad() {
			// 获取当前设备的可使用窗口高度
			this.screenHeight = uni.getSystemInfoSync().windowHeight;
			// 调用获取请求参数 code 的方法
			this.getCodeData()
		},
		// 页面卸载时触发（点击返回按钮）
		onUnload() {},
		methods: {
			...mapMutations(['updateUserInfo']),
			...mapActions(['submitRecords']),
			// 获取请求参数 code 的方法
			getCodeData() {
				// 调用微信提供的接口获取 code 
				uni.login({
					success: async (res) => {
						// 准备请求参数
						const requestPayload = {
							code: res.code
						}
						// 发送请求
						const result = await this.$request('/userLong/findOpenId', this.$PostHeader,
							requestPayload)
						// 如果请求失败，则终止函数执行
						if (result.status !== '200') return
						// 将响应的数据保存到data中
						this.userOpenid = result.data
						this.session_key = result.session_key
						// 调用 store 的方法将数据保存到 store 中，并在 store 中做持久化处理
						this.updateUserInfo({
							...this.userInfo,
							session_key: result.session_key,
							userOpenid: result.data
						})
					}
				})
			},
			// 处理函数，当手机号登录按钮被点击时触发，获取用户手机号
			async getPhoneNumber(e) {
				try {
					// 如果阀门关闭，则终止函数
					if (!this.flag) return
					// 进来后，关闭阀门，知道当前执行完毕后再开启
					this.flag = false
					// 如果用户不同意授权
					if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
						// 提示用户
						uni.showToast({
							icon: "none",
							title: '请允许获取手机号，否则功能不可用！',
						})
						// 开启阀门，并终止函数执行
						return this.flag = true
					}
					// 如果用户同意授权,准备获取手机号的请求参数
					const queryInfo = {
						// 加密数据
						encryptDataB64: e.detail.encryptedData,
						// 签名
						sessionKeyB64: this.session_key,
						// 初始向量
						ivB64: e.detail.iv
					}
					// 发送请求
					const result = await this.$request('/WechatDecryptDataUtil/jmphone', this.$PostHeader, queryInfo)
					// 如果请求失败，终止函数执行
					if (result.status !== '200') return
					// 如果请求成功，拿到当前用户的手机号
					const phone = JSON.parse(result.data).phoneNumber
					// 准备手机号登录的请求参数
					const requestPayload = {
						// 当前用户手机号
						phone: phone,
						// 当前用户的 openid
						openid: this.userOpenid
					}
					// 发送请求
					const res = await this.$request('/userLong/addUer2', this.$PostHeader, requestPayload)
					// 如果请求失败，终止函数执行
					if (res.status !== '200') return
					// 如果请求成功,调用 store 的方法保存数据到 store 中,并做持久化处理
					this.updateUserInfo({
						id: result.data
					})
					// 返回之前的页面
					uni.navigateBack()
					// 开启阀门
					this.flag = true
				} catch (e) {
					// 开启阀门
					this.flag = true
					//TODO handle the exception
				}
			},
			// 微信授权登录的方法
			wxLogin() {
				try {
					// 如果阀门关闭，则终止函数
					if (!this.flag) return
					// 进来后，关闭阀门，知道当前执行完毕后再开启
					this.flag = false
					// 获取用户基本信息
					uni.getUserProfile({
						// 不写不弹提示框
						desc: '正在获取',
						// 当用户同意授权的时候触发
						success: async (res) => {
							// 调用 store 的方法将数据保存到 store 中，并在 store 中做持久化处理
							this.updateUserInfo({
								...this.userInfo,
								...res.userInfo
							})
							// 准备请求参数
							const requestPayload = {
								openid: this.userOpenid,
								...res.userInfo,
								topid: 0
							}
							// 发送请求
							const result = await this.$request('/userLong/loginUers', this.$PostHeader,
								requestPayload)
							// 如果请求失败，则终止函数执行
							if (result.status !== '200') return
							// 调用 store 的方法保存数据到 store 中,并在 store 中做持久化处理
							this.updateUserInfo({
								...this.userInfo,
								id: result.data
							})
							// 调用提交分享记录的方法
							await this.submitRecords()
							// 返回之前的页面
							uni.navigateBack()
							// 开启阀门
							this.flag = true
						},
						// 当用户拒绝授权的时候触发
						fail: () => {
							// 开启阀门
							this.flag = true
						}
					})
				} catch (e) {
					// 开启阀门
					this.flag = true
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.Login_container {
		background-color: #fff;
		overflow: auto;

		// 登录图片盒子
		.logo_box {
			width: 750rpx;
			height: 252rpx;
			margin: 0 auto;
			margin-top: 220rpx;

			.logo {
				width: 100%;
				height: 100%;
			}
		}

		// 获取手机号按钮
		.phone_btn {
			width: 680rpx;
			height: 90rpx;
			color: #0B8495;
			font-size: 30rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 300rpx;
			border-radius: 45rpx;
			border: 1px solid #0B8495;
			line-height: 90rpx;
			background-color: #fff !important;
		}

		// 其它登录方式
		.other-login-methods_box {
			display: flex;
			justify-content: space-around;
			margin-top: 130rpx;

			.line {
				width: 220rpx;
				height: 2rpx;
				background-color: #F5F5F5;
			}

			.other-login-methods_btn {
				font-size: 20rpx;
				color: #999999;
				line-height: 0.2;
			}
		}

		// 微信登录盒子
		.wx-login_box {
			width: 300rpx;
			height: 90rpx;
			background-color: #fff !important;
			color: #09BB07;
			font-size: 30rpx;
			border-radius: 45rpx;
			border: 1px solid #09BB07;
			text-align: center;
			line-height: 90rpx;
			margin-top: 90rpx;
		}
	}
</style>

我的页面代码

<template>
	<view class="my_container">
		<view class="headBg_box">
			<!-- 页面标题 -->
			<view class="head_title">我的</view>
			<!-- 已登录状态 -->
			<view class="login-state_box" v-if="userInfo.id">
				<view class="left_box">
					<view class="avatar_box">
						<!-- <image :src="userInfo.avatarUrl" mode="" class="avatar"></image> -->
						<open-data type="userAvatarUrl" class="avatar"></open-data> 
					</view>
					<view class="info_box">
						<view class="name_box">
							<!-- <view class="name">{{userInfo.nickName}}</view> -->
							<open-data type="userNickName" class="name"></open-data> 
							<view class="icon_edit" v-if="userInfo.id">
								<image :src="require('../../static/icon_edit.png')" mode="" class="photo"
									@click="onServiceItemClick('user-info')"></image>
							</view>
						</view>
						<view class="level_box" v-if="userStateInfo.vips===0">普通用户</view>
						<view class="level_box" v-else-if="userStateInfo.vips===1">业务员</view>
						<view class="level_box" v-else-if="userStateInfo.vips===2">经销商</view>
					</view>
				</view>
				<!-- 成为经销商按钮 -->
				<!-- <view class="right_box" v-if="userStateInfo.vips !== 2">
					<button class="add_btn" plain :border="false"
						@click="onServiceItemClick('add-distributor')">成为经销商</button>
				</view> -->
				<!-- 二维码按钮 -->
				<view class="code_box" @click="onCodeClick" v-if="userStateInfo.vips===1 || userStateInfo.vips===2">
					<image :src="require('../../static/icon_code.png')" mode="" class="photo"></image>
					<view class="label_box">二维码</view>
				</view>
			</view>
			<!-- 未登录状态 -->
			<view class="logout-state_box" @click="onLoginClick" v-else>
				<view class="avatar_box">
					<image :src="require('../../static/default_avatar.png')" mode="" class="avatar"></image>
				</view>
				<view class="tip_box">未登录</view>
			</view>
		</view>
		<!-- 账户盒子 -->
		<view class="account_box">
			<view class="balance_box" @click="onServiceItemClick('my-balance')">
				<view class="number_box">{{userStateInfo.topupMoney}}</view>
				<view class="label_box">
					<image :src="require('../../static/icon_balance.png')" class="label_icon" mode=""></image>
					<text class="label_desc">账户余额</text>
				</view>
			</view>
			<!-- 分割线 -->
			<view class="line_box">
				<view class="line"></view>
			</view>
			<view class="balance_box" @click="onServiceItemClick('my-points')">
				<view class="number_box">{{userStateInfo.earningsMoney}}</view>
				<view class="label_box">
					<image :src="require('../../static/icon_integral.png')" class="label_icon" mode=""></image>
					<text class="label_desc">我的积分</text>
				</view>
			</view>
		</view>
		<!-- 我的服务盒子 -->
		<view class="service_box">
			<view class="head_box">
				<view class="head-title_box">我的服务</view>
			</view>
			<view class="list_box">
				<view class="list_item" @click="onServiceItemClick('my-collection')">
					<image :src="require('../../static/service_01.png')" mode="" class="photo"></image>
					<view class="label_box">我的收藏</view>
				</view>
				<view class="list_item" @click="onServiceItemClick('receiving-address')">
					<image :src="require('../../static/service_02.png')" mode="" class="photo"></image>
					<view class="label_box">收货地址</view>
				</view>
				<view class="list_item" @click="onServiceItemClick('my-comments')">
					<image :src="require('../../static/service_03.png')" mode="" class="photo"></image>
					<view class="label_box">我的评价</view>
				</view>
				<view class="list_item" @click="onServiceItemClick('my-info')">
					<image :src="require('../../static/service_04.png')" mode="" class="photo"></image>
					<view class="label_box">我的信息</view>
				</view>
				<view class="list_item" @click="onServiceItemClick('team-hotline')">
					<image :src="require('../../static/service_05.png')" mode="" class="photo"></image>
					<view class="label_box">团购热线</view>
				</view>
				<view class="list_item" @click="onServiceItemClick('resource-promotion')" v-if="userStateInfo.vips===2">
					<image :src="require('../../static/service_06.png')" mode="" class="photo"></image>
					<view class="label_box">资源推介</view>
				</view>
				<view class="list_item" @click="onServiceItemClick('my-team')"
					v-if="userStateInfo.vips===1 || userStateInfo.vips===2">
					<image :src="require('../../static/service_07.png')" mode="" class="photo"></image>
					<view class="label_box">我的团队</view>
				</view>
				<view class="list_item" @click="onServiceItemClick('about-us')">
					<image :src="require('../../static/service_08.png')" mode="" class="photo"></image>
					<view class="label_box">关于我们</view>
				</view>
			</view>
		</view>
		<!-- 二维码弹出层 -->
		<van-popup :show="isShowCodePopup" @close="onCloseCodePopup" round closeable>
			<image :src="userStateInfo.ewm" mode="" class="code-photo_box" v-if="userStateInfo.vips!==0"></image>
			<!-- <view class="code-photo_box"></view> -->
		</van-popup>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo', 'userStateInfo'])
		},
		data() {
			return {
				// 控制二维码弹出层的显示与隐藏
				isShowCodePopup: false,
			}
		},
		onShow() {
			// 调用获取用户状态的方法
			this.getUserState()
		},
		methods: {
			...mapMutations(['updateUserStateInfo']),
			// 获取用户状态的方法
			async getUserState() {
				try {
					// 如果没有登录或者已经获取过用户状态，则终止函数执行
					if (!this.userInfo.id) return
					// 准备请求参数
					const requestPayload = {
						id: this.userInfo.id
					}
					// 发送请求
					const res = await this.$request('/userLong/findId', this.$PostHeader, requestPayload)
					// 如果请求失败,则终止函数执行
					if (res.status !== '200') return
					// 如果请求成功，调用 store 的 mutation
					this.updateUserStateInfo(res.data)
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 处理函数，当登录按钮被点击时触发
			onLoginClick() {
				// 跳转到登录页面
				uni.navigateTo({
					url: '/pages/home/Login'
				})
			},
			// 处理函数，当服务项被点击时触发
			onServiceItemClick(address) {
				// 如果用户未登录
				if (!this.userInfo.id) {
					// 跳转到登录页面，并终止函数执行
					return uni.navigateTo({
						url: '/pages/home/Login'
					})
				}
				// 跳转到对应的页面
				uni.navigateTo({
					url: '/pages/my/' + address
				})
			},
			// 处理函数，当二维码被点击时触发
			onCodeClick() {
				// 显示二维码弹出层
				this.isShowCodePopup = true
			},
			// 处理函数，当关闭二维码弹出层时触发
			onCloseCodePopup() {
				// 隐藏二维码弹出层
				this.isShowCodePopup = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my_container {
		// 头部容器
		.headBg_box {
			width: 750rpx;
			height: 400rpx;
			background-image: linear-gradient(45deg, #7cba3f, #a8da78);
			padding-top: 60rpx;
			box-sizing: border-box;

			.head_title {
				display: flex;
				justify-content: center;
				font-size: 34rpx;
				font-weight: bold;
				color: #FFFCF0;
				letter-spacing: 5rpx;
			}

			.login-state_box,
				{
				display: flex;
				margin-top: 52rpx;
				margin-left: 60rpx;
				justify-content: space-between;

				.left_box {
					display: flex;
					flex-wrap: wrap;

					.avatar_box {
						overflow: hidden;
						margin-right: 19rpx;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						.avatar {
							width: 100%;
							height: 100%;
						}
					}

					.info_box {
						display: flex;
						flex-direction: column;

						.name_box {
							margin-bottom: 10rpx;
							font-size: 34rpx;
							font-weight: bold;
							color: #FFFCF0;
							margin-left: 10rpx;
							display: flex;

							.name {
								margin-right: 33rpx;
							}

							.icon_edit {
								width: 26rpx;
								height: 26rpx;

								.photo {
									width: 100%;
									height: 100%;
								}
							}
						}

						.level_box {
							width: 165rpx;
							height: 50rpx;
							background: url('~@/static/icon_level.png') no-repeat;
							background-size: 100% 100%;
							display: flex;
							align-items: center;
							padding-left: 55rpx;
							box-sizing: border-box;

							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}

				.right_box {
					margin: 20rpx;
					width: 160rpx;
					height: 60rpx;
					border: 1rpx solid #fff;
					border-radius: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.add_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						font-weight: 400;
						color: #fff;
						border: none;
					}
				}

				.code_box {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 47rpx;

					.photo {
						width: 65rpx;
						height: 57rpx;
					}

					.label_box {
						padding-top: 8rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}

			.logout-state_box {
				margin-top: 53rpx;
				margin-left: 60rpx;
				font-size: 34rpx;
				font-weight: bold;
				color: #FFFCF0;
				display: flex;

				.avatar_box {
					margin-right: 19rpx;
					width: 100rpx;
					height: 100rpx;

					.avatar {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.info_box {
					display: flex;
					flex-direction: column;

					.name_box {
						margin-bottom: 10rpx;
						font-size: 34rpx;
						font-weight: bold;
						color: #FFFCF0;
						margin-left: 10rpx;
						display: flex;

						.name {
							margin-right: 33rpx;
						}

						.icon_edit {
							width: 26rpx;
							height: 26rpx;

							.photo {
								width: 100%;
								height: 100%;
							}
						}
					}

					.level_box {
						width: 165rpx;
						height: 50rpx;
						background: url('~@/static/icon_level.png') no-repeat;
						background-size: 100% 100%;
						display: flex;
						align-items: center;
						padding-left: 55rpx;
						box-sizing: border-box;

						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.tip_box {
					margin-top: 10rpx;
					font-size: 50rpx;
					font-weight: bold;
					color: #ddd;
				}
			}
		}

		// 账户盒子
		.account_box {
			width: 710rpx;
			height: 148rpx;
			background: #FFFFFF;
			margin: -72rpx 20rpx 0;
			border-radius: 10px;
			display: flex;
			justify-content: space-between;
			padding: 0 115rpx;
			box-sizing: border-box;
			box-shadow: 8rpx 12rpx 10rpx rgba(0, 0, 0, 0.3);

			.balance_box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.number_box {
					margin-top: 30rpx;
				}

				.label_box {
					margin-bottom: 27rpx;
					display: flex;
					align-items: center;

					.label_icon {
						width: 34rpx;
						height: 29rpx;
						margin-right: 10rpx;
					}

					.label_desc {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						opacity: 0.8;
					}
				}
			}

			.line_box {
				display: flex;
				align-items: center;
				height: 100%;

				.line {
					width: 2rpx;
					height: 43rpx;
					background: #F0F0F0;
				}
			}
		}

		// 服务盒子
		.service_box {
			margin: 25rpx;
			display: flex;
			flex-direction: column;
			width: 710rpx;
			// height: 480rpx;
			background: #FFFFFF;
			border-radius: 10px;
			box-shadow: 8rpx 12rpx 10rpx rgba(0, 0, 0, 0.3);

			.head_box {
				display: flex;
				justify-content: center;

				.head-title_box {
					padding: 40rpx 0 16rpx;
					width: 690rpx;
					border-bottom: 2rpx solid #F5F5F5;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.list_box {
				display: flex;
				flex-wrap: wrap;


				.list_item {
					flex: 25% 0;
					display: flex;
					flex-direction: column;
					align-items: center;

					.photo {
						margin-top: 34rpx;
						margin-bottom: 20rpx;
						width: 75rpx;
						height: 75rpx;
						border-radius: 50%;
					}

					.label_box {
						margin-bottom: 60rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		// 二维码弹出层
		.code-photo_box {
			margin: 80rpx 50rpx 50rpx;
			width: 400rpx;
			height: 400rpx;
			// background-color: skyblue;
			// .
		}

		// 补丁样式（完成后的修修补补）
		.mt_22 {
			margin-top: 22rpx;
		}
	}
</style>
A 风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发(一) 微信登录流程详解
01-20
花了一点时间写了一个微信的登录流程，包括后端接口和小程序代码。 做过微信登录的都知道，我们需要一个标识来记录用户的身份的唯一性，在微信中unionId就是我们所需要的记录唯一ID，那么如何拿到unionId就成了关键...
微信小程序开发(一) 微信登录流程
03-29
花了一点时间写了一个微信的登录流程，包括后端接口和小程序代码。 做过微信登录的都知道，我们需要一个标识来记录用户的身份的唯一性，在微信中unionId就是我们所需要的记录唯一ID，那么如何拿到unionId就成了关键...
flutter中对接微信登录
01-03
如题，直接分析 本文重点讲解flutter中ios侧的微信登录对接。 fluter中对接微信分2侧，android侧很容易，而且基本没有说版本兼容性问题，很完美；ios侧就相当麻烦！ 1.微信flutter插件，我用的是 fluwx: ^1.2.1+1，...
uni.openSetting(OBJECT)用法以及获取收获地址权限小逻辑
gxdzi的博客
01-10 5711
uni.openSetting(OBJECT)用法以及获取收获地址权限小逻辑 1.当用户取消第一次的设置之后会产生一个bug，用户再次点击添加收货地址进入不了页面，因为没有权限，此时可以通过uni.openSetting(object）这个方法来解决，就是进入手机设置页面获取地址权限。 // 选择收货地址 async chooseAddress() { // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能 // 返回值是一个数组：第1项为错误对象
微信小程序 本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签。
gxdzi的博客
09-05 4913
微信小程序不能使用background-image问题解决 pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络 图片，或者base64，或者使用标签。 /* 片7 代码 */ .sprite_icon { display: block; width: 80px; height: 80px; /* 此处在wxss中，可以使用网络图片，不能使用本地图片 */ background: url("https://cdn.nlark.
组件化和模块化有什么区别？
gxdzi的博客
01-18 2461
组件化和模块化有什么区别？ 看图哈 关系以及映射关系 1、什么是组件和模块 1.1组件：把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。 1.2模块：分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。 组件和模块的区别
vue项目使用定时器每隔几秒请求一次接口
gxdzi的博客
09-27 2241
为啥要包装一个延时器，由于setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死网页。但是setTimeout是自带清除定时器的。
set集合如何变成数组
gxdzi的博客
01-08 1977
set集合如何变成数组 //法一： /*let set= new Set([1,2,3,4]); let result=Array.from(set); console.log(result);*/ //法二： let set= new Set([1,2,3,4]); let result=[]; // set.forEach(item=>{ // result.push(item); // }) // console.log(result); //法三： for(var key of set
x-www-form-urlencoded到底是什么？
gxdzi的博客
06-22 1933
x-www-form-urlencoded纸面翻译即所谓url格式的编码，是post的默认Content-Type，其实我觉得可以认为get和post的默认表单数据传递格式都一样，只是一个在url地址后面加 ？再加表单数据，另一个是把表单数据写在请求体內请求头內的Content-Type字段里，Content-Type:application/x-www-form-urlencodedget请求的请求体格式是什么？get请求是拼接在url后面请求的，一般如此username=tom&pwd=123，这样的格
uniapp使用支付宝小程序插件
gxdzi的博客
01-17 1749
第三步在页面挂载组件，这是放在page.json中的,需要注意的是usingComponents是放在style下面的，之前放在style的外面一直提示页面没有添加组件。第二步原本在app.json中添加插件在uniapp开发中需要换到manifest.json中(unapp项目根本下就有)准备工作：先按照上面的操作购买添加插件到指定的小程序。第四步在vue页面添加刚才挂载的组件和调用组件。js中把插件的方法引入以及触发。
uni-number-box插件的bug
gxdzi的博客
01-10 1357
uni-number-box插件的bug 如图计算 数量的插件 2.问题 当用户在 NumberBox 中输入字母等非法字符之后，会导致 NumberBox 数据紊乱的问题 解决： 代码如下: _onBlur(event) { // 官方的代码没有进行数值转换，用户输入的 value 值可能是非法字符： // let value = event.detail.value; // 将用户输入的内容转化为整数 let value = parseInt(event.detail.va
怎么动态跟新购物车的数量以及tabbar的动态显示微标
gxdzi的博客
01-10 1280
怎么动态跟新购物车的数量以及tabbar的动态显示微标 思路：1.首先怎么动态跟踪购物车数量的变化，一般情况下我们都是计算属性加上侦听器的， 2.工作中咱们，为了不刷新就可以实时处理，可以把数据放到本地存储中，这些公共的数据以及方法可以放到共享数据库vuex中，在vuex里面保存到本地中。 3.vuex是什么？ 复习下 store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象： 1.state – 存放状态 2.getters –
动态统计购物车中商品的总数量
gxdzi的博客
01-08 1276
动态统计购物车中商品的总数量 在 vuex 里的getters 节点下定义一个 total 方法，用来统计购物车中商品的总数量： // 模块的 getters 属性 getters: { // 统计购物车中商品的总数量 total(state) { let c = 0 // 循环统计商品的数量，累加到变量 c 中 state.cart.forEach(goods => c += goods.goods_count) return c
uniappQQ登录是如何实现的，请说明其流程
gxdzi的博客
02-22 1056
QQ登录功能的实现分成以下几个步骤：
uView picker第二次才能选中 延迟导致选中问题
gxdzi的博客
10-13 969
immediateChange:是否在手指松开时立即触发change事件。若不开启则会在滚动动画结束后触发change事件，只在微信2.21.1及以上有效。
节流阀的巧妙使用
gxdzi的博客
01-08 894
节流阀的巧妙使用 一、节流阀是什么？ 节流阀 我自已总结的 很简单的一句，事件多次触发的时候，我们可以通过设置一个true 和 false 来控制，相当于一道门，降低事件的执行频率 二、使用步骤 问题？ 在下拉刷新 或则上拉触底加载的时候 会一直发起请求，这样会增加服务器的压力。 解决：可以使用一个节流阀， 使用： 在data定义一个 isloading： false 默认关闭状态 在发起请求的时候 节流阀打开 在请求完的时候 节流阀关闭 在执行这个事件的时候 类如：上拉触底 获取新的下一页数据 代
uniapp地图围栏代码
最新发布
gxdzi的博客
03-06 670
UniApp 是一个使用 Vue.js 开发所有前端应用的框架，可以编译到 iOS、Android、H5、以及各种小程序等多个平台。在 UniApp 中实现地图围栏功能，通常需要使用地图服务API。首先，确保你已经安装了高德地图的 UniApp 插件，并且已经获得了 API 密钥。监听围栏事件（如进入、离开等）。
数组reduce()方法
gxdzi的博客
01-11 446
数组reduce()方法 reduce()函数接收的参数和map()类似，一个函数f，一个list，但行为和map()不同，reduce()传入的函数f必须接收两个参数，reduce()对list的每个元素反复调用函数f，并返回最终结果值。 例子 def f(x, y): return x + y reduce(f, [1, 3, 5, 7, 9]) # 返回结果为25 reduce()还可以接收第3个可选参数，作为计算的初始值。 也就是说 第一个参数是函数 第二个参数或者第三个参数都是第一个
"微信小程序登录流程与应用详解
总而言之，微信小程序登录是通过调用微信提供的登录接口，获取用户身份标识的流程。登录流程可以分为授权和登录两个步骤，其中授权是用户同意小程序获取身份标识的过程，登录是小程序使用这些标识建立用户体系的过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值