小程序获取用户信息、手机号、定位
2021/10/16 9:09:41
本文主要是介绍小程序获取用户信息、手机号、定位,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
示例代码
wxml
<view class="form"> <view class="info"> <image class="avatar" src="{{userInfo.avatarUrl ? userInfo.avatarUrl : 'https://img1.baidu.com/it/u=3972952962,3272486892&fm=26&fmt=auto'}}" mode="aspectFill" alt="pic"></image> <view bindtap="getUserInfo" wx:if="{{!userInfo.avatarUrl}}">请先登录</view> </view> <view class="info"> 姓名:<text>{{userInfo.nickName}}</text> </view> <view class="info"> <!-- 注意点 --> 性别:<text>{{["未知", "男", "女"][userInfo.gender]}}</text> </view> <view class="info"> 手机:<text>{{userInfo.phone}}</text> <!-- 注意点 --> <button wx:if="{{!userInfo.phone}}" class="btn getPhoneBtn" open-type="getPhoneNumber" bindgetphonenumber="getphone">获取手机</button> </view> <view class="info"> 国家:<text>{{userInfo.country}}</text> </view> <view class="info"> 城市:<text>{{userInfo.city}}</text> </view> <view class="info"> <!-- 注意点 --> 地址:<text>{{userInfo.location}}</text> <button wx:if="{{!userInfo.location}}" class="btn getAddrBtn" bindtap="getLocation">获取地址</button> </view> </view>
JS
// pages/learn/login.js const app = getApp() var QQMapWX = require('../../utils/qqmap-wx-jssdk'); var qqmapsdk; var that; Page({ /** * 页面的初始数据 */ data: { userInfo: null }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { that = this; // 取出本地缓存的用户信息 var userinfo = wx.getStorageSync("userinfo"); that.setData({ userInfo: userinfo }); console.log(that.data.userInfo); }, // 点击进行登录 getUserInfo: function(e) { var that = this; // 获取用户登录 wx.getUserProfile({ lang: "zh_CN", desc: "用于完善会员信息", success: function(res) { that.setData({ userInfo: res.userInfo, hasUserInfo: true }); console.log(that.data.userInfo); // 本地缓存用户信息 wx.setStorageSync("userinfo", that.data.userInfo); } }); }, // 获取手机号 getphone: function(e) { that = this; that.getsessionKey(function(session_key) { that.getphoneEx(e, session_key); }); }, getsessionKey: function(callback) { wx.login({ success: function(res) { var code = res.code; var url = app.data.serverUrl + "LoginHandle.ashx"; wx.request({ url: url, data: { act: "GetOpenId", code: code }, complete: function(res) { if(res.data && res.data.Info) { var user = JSON.parse(res.data.Info); callback(user.session_key); } } }); } }); }, getphoneEx: function(e, session_key) { var data = { act: "GetPhone", encryptedData: e.detail.encryptedData, iv: e.detail.iv, session_key: session_key }; wx.request({ url: app.data.serverUrl + "/LoginHandle.ashx", data: data, complete: function(res) { that.setData({ "userInfo.phone": res.data.Info }); wx.setStorageSync("userinfo", that.data.userInfo); } }); }, // 获取定位 getLocation: function(e) { that = this; qqmapsdk = new QQMapWX({ key: 'DQSBZ-QGSKP-H52D5-LVIB5-EHIJF-5JF2V' }); wx.getLocation({ type: 'gcj02', success: function(res) { qqmapsdk.reverseGeocoder({ location: { latitude: res.latitude, longitude: res.longitude }, success: function(res) { var position = res.result.address_component; that.setData({ "userInfo.location": position.province + position.city + position.district + res.result.formatted_addresses.recommend }); wx.setStorageSync("userinfo", that.data.userInfo); }, }); } }); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
这篇关于小程序获取用户信息、手机号、定位的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享
- 2024-11-20微信小程序全栈教程:从零开始的全攻略
- 2024-11-19微信小程序全栈学习:从零开始的完整指南