微信小程式獲取使用者的頭像和暱稱
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;
}