做网站界面设计大小/外链提交

<template><view><button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一键登录</button><view><!-- 提示窗示例 --><u-popup :show="show" background-color="#fff"><view class="infoBox"><view class="title">邀请您补全个人信息</view><br><br><br><form catchsubmit="getUserName"><view style="width: 100%;"><view class="popup-info"><view class="popup-info-left">头像</view><view class="popup-info-right"><button class="avatar-wrapper" open-type="chooseAvatar"@chooseavatar="onChooseAvatar" slot="right"><img class="avater" :src="avatarUrl" alt="用户头像"></button></view></view><br><br><view class="popup-info"><view class="popup-info-left">昵称</view><view class="popup-info-right"><input type="nickname" class="nickName-input" @blur="userNameInput"placeholder="请输入昵称" /></view></view></view><view class="buttonSum"><view class="button"><button @click="dialogClose">取消</button></view><view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;"><button @click="submitSure" style="color: #0081ff;" form-type="submit">确定</button></view></view></form></view></u-popup></view><view class="text-center margin-top-sm" @tap="back">暂不登录</view></view></view>
</template><script>import avatarUrl from "@/static/logo.png"export default {data() {return {avatarUrl: avatarUrl,nickName: '',token: '',imgList: [],show: false,}},methods: {back() {uni.navigateBack({delta: 1,})},wxGetUserInfo(e) {// 1、授权必须要在用户点击事件之后进行// 2、uni老的方法getUserInfo已经拿不到用户信息了// uni.getUserProfile高版本的也停用了，2.21以下的版本还可以用// #ifdef MP-WEIXINuni.getUserProfile({desc: 'get_name', // 这个参数是必须的success: user => {console.log('用户信息', user)uni.setStorageSync("user_info", user.userInfo)//由于低版本需要使用getUserProfile方法，高版本使用头像昵称填写功能，所以先使用getUserProfile，如果得到的nickName是微信用户，则说明获取失败，再使用头像昵称填写功能获取if (user.userInfo.nickName == '微信用户') {this.show = true} else {uni.navigateBack({delta: 1})}}})// #endif// #ifdef MP-ALIPAY// uni.getUserInfo({// 	desc: 'get_name', // 这个参数是必须的// 	success: user => {// 		console.log(user)// 		uni.setStorageSync("user_info", user.userInfo)// 		// 虚假的openid// 		getApp().globalData.openId = user.ariverRpcTraceId;// 		uni.navigateBack({// 			delta: 1// 		})// 	}// })// #endif},// 点击头像async onChooseAvatar(e) {// 获取到的图片是临时图片，只能在本地访问，不能在浏览器访问，所以要把这个图片转成base64或者上传七牛服务器换成网络地址，再存储起来this.avatarUrl = e.detail.avatarUrl;console.log(e.detail.avatarUrl, 'e.detail.avatarUrl'),// 临时图片转为base64uni.getImageInfo({src: this.avatarUrl,success: function(res) {// 获取到图片的临时地址var tempFilePath = res.path;// 将图片转为base64格式uni.getFileSystemManager().readFile({filePath: tempFilePath,encoding: 'base64',success: function(res) {var base64Img = 'data:image/png;base64,' + res.data;let userInfo = uni.getStorageSync("user_info")userInfo.avatarUrl = base64Imguni.setStorageSync("user_info", userInfo)}});}});},// 点击昵称userNameInput(e) {console.log(e.detail);this.nickName = e.detail.valuelet userInfo = uni.getStorageSync("user_info")userInfo.nickName = e.detail.valueuni.setStorageSync("user_info", userInfo)console.log('点昵称', this.nickName, e.detail.value, uni.getStorageSync("user_info"));},getUserName(e) {console.log('提交getUserName', e);},submitSure(e) {console.log('确定submitSure', e);},dialogClose(e) {console.log('dialogClose取消', e);this.show = false}},onLoad() {// this.show = true},}
</script><style lang="scss" scoped>.cu-btn {margin-top: 20px;margin-left: 20px;margin-right: 20px;}.infoBox {width: 80vw;height: 180px;position: relative;.title {font-size: 18px;text-align: center;margin-top: 15px;margin-bottom: 15px;font-weight: 500;}.popup-info {width: 100%;height: 40px;display: flex;justify-content: space-around;line-height: 40px;.popup-info-left {text-align: center;width: 50%;}.popup-info-right {width: 50%;display: flex;align-items: center;justify-content: center;button::after {border: none;}.nickName-input {display: inline-block;width: 100%;top: -5px;}.avatar-wrapper {border: none !important;width: 40px;height: 40px;padding: 0 !important;background: none;.avater {width: 40px;height: 40px;}}}}.buttonSum {width: 100%;display: flex;justify-content: space-around;position: absolute;bottom: 0;.button {width: 50%;border-top: 1px solid #e2e1e1;}button {width: 50%;background-color: #ffffff;font-size: 16px;outline: none;}button::after {border: none;border-radius: 0;}}}.u-popup__wrapper {border-radius: 10px;}
</style></style>

 效果

 

 参考的这个

 微信小程序头像昵称填写能力-CSDN博客

因为之前用的getUserProfile，有一天发现它获取到的头像是灰色，昵称是微信用户，一看官网说是不用了，低版本的还能用，高版本的要用头像昵称填写来实现。

如下是我的小程序登录页面代码：

逻辑：当小程序判断到没有登陆时把用户弹到登录页面，引导用户登录，用户点击一键登录后弹出弹框引导用户填写昵称和头像，将信息存储起来，方便在其他地方使用。

注意：

1、头像获取到的是临时地址，需要处理，才能在浏览器展示，我采用的是将其转化为base64的方式，具体请看：onChooseAvatar

2、昵称获取需要使用button的form-type="submit"属性，触发form提交来收集昵称
 

<template><button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一键登录</button><view><!-- 提示窗示例 --><uni-popup ref="alertDialog" background-color="#fff"><view class="infoBox"><view class="title">邀请您补全个人信息</view><br><br><br><form catchsubmit="getUserName"><view style="width: 100%;"><view class="popup-info"><view class="popup-info-left">头像</view><view class="popup-info-right"><button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right"><img class="avater" :src="avatarUrl" alt="用户头像"></button></view></view><br><br><view class="popup-info"><view class="popup-info-left">昵称</view><view class="popup-info-right"><input type="nickname" class="nickName-input" @blur="userNameInput" placeholder="请输入昵称" /></view></view></view><view class="buttonSum"><view class="button"><button @click="dialogClose">取消</button></view><view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;"><button @click="submitSure" style="color: #0081ff;" form-type="submit">确定</button></view></view></form></view></uni-popup></view><view class="text-center margin-top-sm" @tap="back">暂不登录</view></view>
</template><script src="path/to/canvas/library.js"></script>
<script>import qiniuUploader from '../../util/qiniuUploader.js'import {RequestConstant} from '../../util/constant.js'export default {data() {return {avatarUrl: '../../static/icon-avatar.png',nickName: '',token: '',imgList: []}},methods: {back() {uni.navigateBack({delta: 1,})},wxGetUserInfo(e) {// 1、授权必须要在用户点击事件之后进行// 2、uni老的方法getUserInfo已经拿不到用户信息了// uni.getUserProfile高版本的也停用了，2.21以下的版本还可以用// #ifdef MP-WEIXINuni.getUserProfile({desc: 'get_name', // 这个参数是必须的success: user => {console.log('用户信息', user)uni.setStorageSync("user_info", user.userInfo)//由于低版本需要使用getUserProfile方法，高版本使用头像昵称填写功能，所以先使用getUserProfile，如果得到的nickName是微信用户，则说明获取失败，再使用头像昵称填写功能获取if (user.userInfo.nickName == '微信用户') {this.$refs.alertDialog.open()} else {uni.navigateBack({delta: 1})}}})// #endif// #ifdef MP-ALIPAYuni.getUserInfo({desc: 'get_name', // 这个参数是必须的success: user => {console.log(user)uni.setStorageSync("user_info", user.userInfo)// 虚假的openidgetApp().globalData.openId = user.ariverRpcTraceId;uni.navigateBack({delta: 1})}})// #endif},// 打开弹框dialogToggle() {this.$refs.alertDialog.open()},// 点击头像async onChooseAvatar(e) {// 获取到的图片是临时图片，只能在本地访问，不能在浏览器访问，所以要把这个图片转成base64或者上传七牛服务器换成网络地址，再存储起来this.avatarUrl = e.detail.avatarUrl;console.log(e.detail.avatarUrl,'e.detail.avatarUrl'),// 临时图片转为base64uni.getImageInfo({src: this.avatarUrl,success: function(res) {// 获取到图片的临时地址var tempFilePath = res.path;// 将图片转为base64格式uni.getFileSystemManager().readFile({filePath: tempFilePath,encoding: 'base64',success: function(res) {var base64Img = 'data:image/png;base64,' + res.data;let userInfo = uni.getStorageSync("user_info")userInfo.avatarUrl = base64Imguni.setStorageSync("user_info", userInfo)}});}});},// 点击昵称userNameInput(e) {console.log(e.detail);this.nickName = e.detail.valuelet userInfo = uni.getStorageSync("user_info")userInfo.nickName = e.detail.valueuni.setStorageSync("user_info", userInfo)console.log('点昵称', this.nickName, e.detail.value, uni.getStorageSync("user_info"));},getUserName(e) {console.log('提交getUserName', e);},submitSure(e) {console.log('确定submitSure', e);uni.navigateBack({delta: 1})},dialogClose(e) {console.log('dialogClose取消', e);this.$refs.alertDialog.close()}},onLoad() {},}
</script><style lang="less" scoped>.cu-btn {margin-top: 20px;margin-left: 20px;margin-right: 20px;}.infoBox {width: 80vw;height: 180px;position: relative;.title {font-size: 18px;text-align: center;margin-top: 15px;margin-bottom: 15px;font-weight: 500;}.popup-info {width: 100%;height: 40px;display: flex;justify-content: space-around;line-height: 40px;.popup-info-left {text-align: center;width: 50%;}.popup-info-right {width: 50%;display: flex;align-items: center;justify-content: center;button::after {border: none;}.nickName-input {display: inline-block;width: 100%;top: -5px;}.avatar-wrapper {border: none !important;width: 40px;height: 40px;padding: 0 !important;background: none;.avater {width: 40px;height: 40px;}}}}.buttonSum {width: 100%;display: flex;justify-content: space-around;position: absolute;bottom: 0;.button {width: 50%;border-top: 1px solid #e2e1e1;}button {width: 50%;background-color: #ffffff;font-size: 16px;outline: none;}button::after {border: none;border-radius: 0;}}}.uni-popup__wrapper {border-radius: 10px;}
</style></style>