jigesi/pages/my/index.vue

<template>
	<view class="container">
		<navBar title="我的" :back="false" color="white" background="green" />


		<u-button text="测试获取用户信息" @click="testGetUserInfo" type="primary"></u-button>
		<u-button text="测试二维码生成" @click="genQr" type="primary"></u-button>

		<!-- 选择头像 -->
		<view class="choose-avatar-row">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
				style="border-radius: 100rpx;">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
			<text>点击选择头像</text>
		</view>

		<!-- 选择昵称 -->
		<view class="choose-nickname-row">
			<text>昵称</text>
			<input v-model="nickName" @input="inputName" type="nickname" placeholder="请输入昵称" />
		</view>


		<button open-type="getPhoneNumber" @getphonenumber="getphonenumber">获取用户手机号</button>
		<button @click="get_user">获取用户头像昵称等信息</button>

		<view class="">
			头像
		</view>
		<image :src="user_img" mode=""></image>
		<view class="">
			昵称：{{user_name}}
		</view>
	</view>
</template>

<script>
	// import navBar from '@/components/navBar/index.vue'
	import uploadUrl from '@/common/config.js'
	export default {
		// components: {
		// 	navBar
		// },
		data() {
			return {
				avatarUrl: '',
				nickName: '',
				PhoneCode: '',
				imgUrl: '',
				isPhone: false,

				user_img: '', //微信头像
				user_name: ''
			}
		},
		methods: {
			genQr() {
				uni.navigateTo({
					url: '/pages/qrPage/index'
				})
			},
			get_user() { // 获取用户信息
				let _this = this
				// uni.getUserProfile({
				// 	desc: '用户登录',
				// 	success: res => {
				// 		console.log(res) // 用户的信息
				// 		this.user_img = res.userInfo.avatarUrl //微信头像
				// 		this.user_name = res.userInfo.nickName // 微信昵称
				// 	}
				// })

				uni.getUserInfo({
					provider: 'weixin',
					success: infoRes => {
						console.log('getUserInfo返回值：', infoRes);
						console.log('用户昵称为：' + infoRes.userInfo.nickName, infoRes.userInfo.avatarUrl);
						this.user_img = infoRes.userInfo.avatarUrl //微信头像
						this.user_name = infoRes.userInfo.nickName // 微信昵称

						// _this.upImg(infoRes.userInfo.avatarUrl)
					}
				});
			},

			onChooseAvatar(e) {
				console.log('onChooseAvatar返回值：', e);
				// this.avatarUrl = e.detail.avatarUrl
				this.upImg(e.detail.avatarUrl)
			},
			upImg(file) {
				console.log('upImg的file', file)
				let _this = this
				uni.uploadFile({
					url: uploadUrl.baseUrl, // 上传的 URL 地址
					filePath: file, // 要上传的图片本地路径
					name: 'file', // 上传图片时使用的字段名
					header: { // 自定义请求头
						'Content-Type': 'multipart/form-data'
					},
					formData: {
						'fileType': 'images',
						'dirName': 'cert'
					},
					success: function(uploadRes) {
						let result = JSON.parse(uploadRes.data)
						// localStorage.set('imgUrl', result.data.fileUrl)
						if (result.code == 0) {
							_this.avatarUrl = result.data.url
							// _this.user_img = result.data.url
							console.log('上传后的头像url地址', result.data.url)
						}
					},
					fail: function(err) {
						console.log('upload failed:', err)
					}
				})
			},

			inputName(e) {
				this.nickName = e.detail.value
			},

			testGetUserInfo() {
				console.log('testGetUserInfo()------------');
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log('uni.login返回值：', res)
						if (res.errMsg == 'login:ok') {
							// 获取密钥 === 需要登录才可以获取密钥
							// return
							uni.request({
								url: 'https://api.weixin.qq.com/sns/jscode2session', // 请求微信服务器
								method: 'GET',
								data: {
									appid: 'wx98ab2939999e13de', //你的小程序的APPID
									secret: '29bad412d9cc5a7f48ca88d2848db8d3', //你的小程序秘钥secret,  
									js_code: res.code, //wx.login 登录成功后的code
									grant_type: 'authorization_code' //此处为固定值
								},
								success: (res1) => {
									console.log('uni.request获取信息', res1);

									if (res1.errMsg == 'request:ok') {
										console.log('openid和session_key', res1.data);
									}
								}
							});
						}

					}
				});
			},
			getphonenumber(e) {
				console.log('getphonenumber返回值', e);
				if (e.errMsg = 'getPhoneNumber:ok') {
					console.log('getphonenumber需要传给后端的参数：', {
						encryptedData: e.encryptedData,
						iv: e.iv
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>