微信小程序获取用户的头像和昵称

浅浅的花香味﹌ 2022-05-15 02:05 300阅读 0赞

// 获取小程序实例

var app = getApp()

var sourceType = \[\['camera'\], \['album'\], \['camera', 'album'\]\]

var sizeType = \[\['compressed'\], \['original'\], \['compressed', 'original'\]\]

Page(\{

// 数据

data: \{

hasNetworkType: false,

systemInfo: \{\},

/\* 图片数据 \*/

sourceTypeIndex: 2,

sourceType: \['拍照', '相册', '拍照或相册'\],

sizeTypeIndex: 2,

sizeType: \['压缩', '原图', '原图或压缩'\],

countIndex: 8,

// 获取缓存API

imageList: wx.getStorageSync('imageList'),

/\* 音乐数据 \*/

// src: "http://dl.stream.qqmusic.qq.com/C200000NU7383cWdmL.m4a?vkey=E31E70383485A0459D7205BB83D038F37F75AF304BCEA8EF9CBAFB894A6DF31637EAB85BD4DBF49345768B96F6DBF709971AF5AA97D17B9F&guid=5261462800&fromtag=30",

poster: 'http://y.gtimg.cn/music/photo\_new/T002R300x300M000002dvsSx27UO6o.jpg?max\_age=2592000',

author: 'Shayne Ward',

hidden: true

\},

changeHidden: function () \{

this.setData(\{

hidden: !this.data.hidden

\});

\},

onLoad: function () \{

this.setData(\{

hasLogin: app.globalData.hasLogin

\})

\},

/\* 获取 网络类型函数 \*/

getNetworkType: function () \{

var that = this;

// 调取 网络类型API

wx.getNetworkType(\{

success: function (res) \{

console.log(res)

that.setData(\{

hasNetworkType: true,

networkType: res.networkType

\})

\},

// 清除 网络状态的数据

clear: function () \{

this.setData(\{

hasNetworkType: false,

networkType: ''

\})

\},

/\* 获取 系统信息函数 \*/

getSystemInfo: function () \{

var that = this;

// 调取 系统信息API

wx.getSystemInfo(\{

success: function (res) \{

console.log(res)

that.setData(\{

systemInfo: res

\})

\});

// 3秒后 清空系统信息

setTimeout(function () \{

that.setData(\{

systemInfo: \{\}

\});

// 消息提示框API

wx.showToast(\{

title: "持续30秒,数据已清空",

duration: 2000,

success: function () \{

console.log("消息提示框API调用成功,持续2秒")

\});

\}, 30000)

\},

/\* 选择图片函数 \*/

sourceTypeChange: function (e) \{

console.log(e);

this.setData(\{

sourceTypeIndex: e.detail.value

\});

\},

sizeTypeChange: function (e) \{

console.log(e);

this.setData(\{

sizeTypeIndex: e.detail.value

\});

\},

countChange: function (e) \{

console.log(e);

this.setData(\{

countIndex: e.detail.value

\});

\},

// 选择函数

chooseImage: function () \{

var that = this;

// 选择图片API

wx.chooseImage(\{

sourceType: sourceType\[this.data.sourceTypeIndex\],

sizeType: sizeType\[this.data.sizeTypeIndex\],

success: function (res) \{

console.log(res);

console.log(res.tempFilePaths)

//数据缓存API

wx.setStorageSync('imageList', res.tempFilePaths);

that.setData(\{

imageList: res.tempFilePaths

\})

//模态弹窗API

wx.showModal(\{

title: "上传成功",

content: "下次进入应用时，图片仍存在",

cancelColor: "red"

\})

\},

// 预览图片API

previewImage: function (e) \{

console.log(e)

var current = e.target.dataset.src;

// 预览图片API

wx.previewImage(\{

current: current,

urls: this.data.imageList

\})

\},

// 清除图片

clearFile: function () \{

// 清除缓存API

wx.removeStorageSync("imageList")

this.setData(\{

imageList: \[\]

\})

console.log("点击了清除图片按钮")

\},

/\* 登录函数 \*/

var that = this;

// 登录API

wx.login(\{

success: function (res) \{

console.log(res)

// 改变全局属性

app.globalData.hasLogin = true;

that.setData(\{

hasLogin: app.globalData.hasLogin

\})

\},

/\* 获取用户信息函数 \*/

getUserInfo: function () \{

var that = this;

if (app.globalData.hasLogin === false) \{

// 模态框API

wx.showModal(\{

title: "还未登录",

content: "请先登录..."

\})

\} else \{

// 调用获取信息函数

\_getUserInfo()

// 获取信息函数

function \_getUserInfo() \{

// 获取用户信息API

wx.getUserInfo(\{

success: function (res) \{

console.log(res)

that.setData(\{

userInfo: res.userInfo

\})

\},

// 预览用户头像

previewUser: function (res) \{

var userImage = res.target.dataset.userImage

var urls = \[\]

// 追加元素到数组

urls.push(userImage)

// 预览图片API

wx.previewImage(\{

current: userImage,

urls: urls,

\})

\},

// 清除用户信息

clearUserInfo: function () \{

this.setData(\{

userInfo: \{\}

\})

\},

/\* 支付函数 \*/

payment: function (res) \{

console.log(res)

var that = this;

console.log('时间戳：' + that.createTimeStamp())

console.log("随机字符串：" + that.createNonceStr())

// 支付API

wx.requestPayment(\{

timeStamp: new Date().getTime(),

nonceStr: that.createNonceStr(),

package: "prepay\_id=u802345jgfjsdfgsdg888",

signType: "MD5",

paySign: "70EA570631E4BB79628FBCA90534C63FF7FADD89",

success: function (res) \{

console.log("支付成功")

\},

fail: function (res) \{

console.log("支付失败")

\},

complete: function () \{

console.log("支付结束")

\})

console.log("支付...")

\},

// 随机字符串

createNonceStr: function () \{

var nonceStr = Math.random().toString(36).substr(2, 15);

return nonceStr;

\},

// 时间戳

createTimeStamp: function () \{

var timeStamp = parseInt(new Date().getTime() / 1000) + ''

return timeStamp;

\})

WXML

<view id="api\_title">微信小程序API</view>

<view class="network\_info\_title">获取网络状态</view>

<text class="network\_info\_prompt">点击获取按钮可获取网络状态</text>

</block>

<text class="info\_network\_type">\{ \{ networkType \}\}</text>

</block>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

<button type="primary" plain bindtap="getSystemInfo">获取手机系统信息</button>

</view>

</block>

</block>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

<button type="primary" plain bindtap="getUserInfo">获取用户信息</button>

<button type="warn" plain bindtap="clearUserInfo" style="margin-top: 10rpx;">清除用户信息</button>

</view>

</view>

<view>

加载中...

</loading>

<button bindtap="changeHidden">show/hidden</button>

</view>

WXSS

\#api\_title \{

color: black;

font-weight: bold;

text-align: center;

margin: 10px 0;

/\*网络类型样式\*/

.network\_info\_area \{

height: 250rpx;

display: flex;

flex-direction: column;

align-items: center;

background: \#F8F8F8;

.network\_info\_title \{

margin-top: 10rpx;

margin-bottom: 50rpx;

font-size: 32rpx;

.network\_info\_prompt \{

font-size: 30rpx;

margin-top: 20rpx;

color: \#ccc;

.info\_network\_type \{

font-size: 80rpx;

font-weight: bold;

.network\_info\_btn \{

margin-top: 10rpx;

display: flex;

/\*系统信息样式\*/

.system\_info\_body \{

margin-top: 20rpx;

.system\_info\_area \{

background: \#F8F8F8;

.system\_info\_single \{

display: flex;

align-items: center;

margin-left: 30rpx;

border-bottom: 1px solid \#eee;

height: 88rpx;

font-size: 34rpx;

.system\_info\_title \{

width: 180rpx;

color: \#000;

.system\_info\_value \{

flex-grow: 1

.system\_info\_btn \{

margin-top: 10rpx;

padding: 0 20rpx;

/\*图片样式\*/

.image\_body \{

margin-top: 20rpx;

.image\_area \{

background: \#F8F8F8;

.single\_picker \{

display: flex;

justify-content: space-between;

height: 100rpx;

align-items: center;

font-size: 36rpx;

margin-left: 20rpx;

padding-right: 20rpx;

border-bottom: 1px solid \#eee;

.\_source \{

color: \#ccc;

.images\_select \{

padding: 20rpx;

margin-top: 10rpx;

.images\_list \{

display: flex;

margin-top: 20rpx;

flex-wrap: wrap;

\#images\_image \{

width: 150rpx;

height: 150rpx;

margin: 10rpx;

.image\_plus \{

width: 150rpx;

height: 150rpx;

margin: 10rpx;

border: 1px dashed \#999;

position: relative;

\#image\_plus\_horizontal \{

position: absolute;

width: 80rpx;

height: 4rpx;

background-color: \#d9d9d9;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

\#image\_plus\_vertical \{

position: absolute;

width: 4rpx;

height: 80rpx;

background-color: \#d9d9d9;

top: 50%;

left: 50%;

transform: translate(-50%, -50%)

\#image\_btn \{

padding: 0 20rpx;

/\*音乐样式\*/

.music\_body \{

margin-top: 20rpx;

padding-left: 20rpx;

/\*登录样式\*/

.login\_body \{

margin-top: 20rpx;

.login\_area \{

height: 150rpx;

display: flex;

justify-content: center;

align-items: center;

background: \#F8F8F8;

.login\_cont \{

margin: auto;

.login\_title \{

font-size: 60rpx;

\#login\_btn \{

margin-top: 10rpx;

padding: 0 20rpx;

/\*用户信息样式\*/

.userInfo\_body \{

margin-top: 20rpx;

.userInfo\_area \{

background-color: \#F8F8F8;

.userInfo \{

display: flex;

align-items: center;

height: 88rpx;

font-size: 35rpx;

border-bottom: 1px solid \#eee;

margin-left: 20rpx;

\#userImage \{

width: 80rpx;

height: 80%;

.userInfo\_title \{

width: 150rpx;

color: \#000;

.userInfo\_value \{

flex-grow: 1;

\#getUserInfo \{

margin-top: 10rpx;

padding: 0 20rpx;

/\*支付样式\*/

.payment\_body \{

margin: 40rpx 0;

padding: 0 20rpx;

微信小程序获取用户的头像和昵称

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 uniapp微信小程序头像昵称获取方法

相关微信小程序调整头像和昵称获取规则后，开发者该怎样应对？

相关小程序登录获取用户头像和昵称

相关微信小程序 - 获取用户头像昵称等信息（带授权检测）

相关 uniapp获取微信头像和昵称

相关微信小程序获取头像和昵称等个人信息wx.getUserProfile(Object object)

相关微信小程序获取用户的头像和昵称

相关微信小程序获得微信头像和昵称

相关微信开发,获取用户昵称,并将其存入数据库,微信昵称存入数据库出错

相关微信用户昵称特殊符号处理