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;

}

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

  1. 微信小程序获取用户信息-头像、昵称......

    微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权 目录 微信小程序获取用户信息-头像.昵称等,并出现弹窗提示授权 1.wx.getUserProfile文档 2.代码演示 3.演示过程(图示) ...

  2. 微信小程序获取用户信息

    微信小程序获取用户信息 微信小程序获取用户信息接口做了调整: 2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与获取用户个人信息(头像.昵称.性别与地区),将直接获 ...

  3. 微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ

    微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ 一.获取用户信息 1.首先我们需要了解什么是微信用户的OpenID 在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密 ...

  4. 微信小程序获取用户信息更新解决方案

    微信小程序获取用户头像和昵称更新了,以下代码是兼容旧版本微信和新版本微信的解决方案,仅供参考 直接上代码 <template><!-- 顶部用户信息显示 --><view ...

  5. 微信小程序获取用户信息流程(2022年版)

     开门见山地说,本文主要讲述微信小程序在2022年以后获取用户信息的主要方法,如果想要了解2022年之前微信小程序获取用户信息的相关知识或者是微信小程序之前这部分的设计思想的话,推荐博主的下面这篇博客 ...

  6. 微信小程序获取用户信息(纯前端)

    特别说明 2022年10月25日起,小程序 wx.getUserProfile 接口将被收回. 微信官方不希望开发者直接拿用户的昵称和头像,若小程序需要设置昵称和头像,可以单独开发一个设置页,由用户手 ...

  7. 微信小程序获取用户手机号授权方法

    微信小程序获取用户手机号方法 首先在 app.json 页面添加一个新的用户授权页面,放在首页index的后面即可 在 app.js 页面中编写如下代码: 这里包含了获取用户信息的相关代码 //app ...

  8. 微信小程序获取用户信息,得到是匿名信息,微信用户,问题解决

    文章目录 微信小程序获取用户信息,得到是匿名信息,微信用户,问题解决 1.官方声明 2.究其原因 3.登陆流程变更 4.实际情况 5.PC 端兼容注意点 微信小程序获取用户信息,得到是匿名信息,微信用 ...

  9. 微信小程序获取用户手机号--官方示例

    微信小程序获取用户手机号–官方示例 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNu ...

最新文章

  1. 从实习被劝退,到收获阿里腾讯的offer,谈谈读研给我带来的转变
  2. 理解Spark的核心RDD
  3. Unity教程:如何使用枚举来帮助简化游戏开发
  4. Android利用RecognizerIntent识别语音并简单实现打电话动作
  5. 带你理解 只读事务(@Transactional(readOnly = true)
  6. 检查可执行文件所需要的共享库
  7. 在标记的HREF属性中javascript:alert(this.innerHTML)会怎么样?
  8. vs2017怎么安装python包,vs2017安装pygame,vs2017安装python第三方包
  9. 数据结构算法入门--链表
  10. mysql属于数据库三级模式_数据库系统的三级模式指的是什么
  11. maven nexus 说明
  12. python中stripped string_【Python爬虫学习笔记(3)】Beautiful Soup库相关知识点总结
  13. c语言运算符 ,C语言关于位和运算符
  14. System.Windows.Forms.TreeView
  15. 所有程序员都应该知道的 6 个软件开发步骤
  16. SpringBoot 发送邮件功能(包含网易、QQ、Gmail邮箱)
  17. 软件测试面包屑什么意思,面包屑的用法面包屑有什么作用
  18. 俞一帆:5G边缘计算助力工业现场智能
  19. idea如何设置jvm大小
  20. Linux下批处理文件编写

热门文章

  1. JS 中 Date() 的其他操作集锦
  2. 关于DButil的使用几点思考
  3. 222 Count Complete Tree Nodes
  4. 深入分析linux内核源码
  5. 实现JNI的另一种方法:使用RegisterNatives方法传递和使用Java自定义类 (转)
  6. robotlegs框架吴秦大师续讲【转载】
  7. 流程管理系统成功实施的六个步骤
  8. UVA10719 Quotient Polynomial【多项式】
  9. Bailian4033 铺地毯【暴力】
  10. Bailian3254 约瑟夫问题No.2【模拟】