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

JS

 

 

// 获取小程序实例

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,

count: [1, 2, 3, 4, 5, 6, 7, 8, 9],

// 获取缓存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',

name: 'Until You',

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],

count: this.data.count[this.data.countIndex],

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("点击了清除图片按钮")

 

},

/* 登录函数 */

login: function () {

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 class="container">

<view id="api_title">微信小程序API</view>

 

<!--获取网络类型API-->

<view class="network_info_body">

<view class="network_info_area">

<view class="network_info_title">获取网络状态</view>

<block wx:if="{{ hasNetworkType == false }}">

<text class="network_info_prompt">未获取</text>

<text class="network_info_prompt">点击获取按钮可获取网络状态</text>

</block>

<block wx:if="{{ hasNetworkType == true }}">

<text class="info_network_type">{{ networkType }}</text>

</block>

</view>

<view class="network_info_btn">

<button size="mini" type="primary" plain bindtap="getNetworkType">获取</button>

<button size="mini" type="warn" plain bindtap="clear">清空</button>

</view>

</view>

<!--获取系统信息API-->

<view class="system_info_body">

<view class="system_info_area">

<view class="system_info_single">

<text class="system_info_title">手机型号</text>

<input class="system_info_value" disabled="{{ true }}" type="text" placeholder="未获取" value="{{ systemInfo.model }}"/>

</view>

<view class="system_info_single">

<text class="system_info_title">微信版本</text>

<input class="system_info_value" disabled="{{ true }}" type="text" placeholder="未获取" value="{{ systemInfo.version }}"/>

</view>

<view class="system_info_single">

<text class="system_info_title">微信语言</text>

<input class="system_info_value" disabled="{{ true }}" type="text" placeholder="未获取" value="{{ systemInfo.language }}"/>

</view>

<view class="system_info_single">

<text class="system_info_title">屏幕宽度</text>

<input class="system_info_value" disabled="{{ true }}" type="text" placeholder="未获取" value="{{ systemInfo.windowWidth }}"/>

</view>

<view class="system_info_single">

<text class="system_info_title">屏幕高度</text>

<input class="system_info_value" disabled="{{ true }}" type="text" placeholder="未获取" value="{{ systemInfo.windowHeight }}"/>

</view>

<view class="system_info_single">

<text class="system_info_title">设备像素</text>

<input class="system_info_value" disabled="{{ true }}" type="text" placeholder="未获取" value="{{ systemInfo.pixelRatio }}"/>

</view>

</view>

<view class="system_info_btn">

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

</view>

</view>

 

<!--用户登录API-->

<view class="login_body">

<view class="login_area">

<block wx:if="{{ hasLogin === true }}">

<text class="login_title">登录成功</text>

</block>

<block wx:if="{{ hasLogin === false}}">

<text class="login_title">未登录</text>

</block>

</view>

<view id="login_btn">

<button type="primary" plain bindtap="login">微信登录</button>

</view>

</view>

<!--用户信息API-->

<view class="userInfo_body">

<view class="userInfo_area">

<view class="userInfo">

<text class="userInfo_title">头像:</text>

<image src="{{ userInfo.avatarUrl }}" id="userImage" data-user-image="{{ userInfo.avatarUrl }}" catchtap="previewUser"></image>

</view>

<view class="userInfo">

<text class="userInfo_title">网名:</text>

<input class="userInfo_value" disabled="{{ true }}" type="text" placeholder="暂未获取" value="{{ userInfo.nickName }}"></input>

</view>

<view class="userInfo">

<text class="userInfo_title">省份:</text>

<input class="userInfo_value" disabled="{{ true }}" type="text" placeholder="暂未获取" value="{{ userInfo.province == 'Sichuan' ? '四川' : userInfo.province }}"></input>

</view>

<view class="userInfo">

<text class="userInfo_title">城市:</text>

<input class="userInfo_value" disabled="{{ true }}" type="text" placeholder="暂未获取" value="{{ userInfo.city == 'Guangyuan' ? '广元' : userInfo.city}}"></input>

</view>

<view class="userInfo">

<text class="userInfo_title">性别:</text>

<input class="userInfo_value" disabled="{{ true }}" type="text" placeholder="暂未获取" value="{{ userInfo.gender == 1 ? '男' : userInfo.genger }}"></input>

</view>

</view>

<view id="getUserInfo">

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

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

</view>

</view>

<!--支付API-->

 

</view>

 

<view>

<loading hidden="{{hidden}}">

加载中...

</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;

}

展开阅读全文

没有更多推荐了,返回首页