ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

小程序获取用户信息、手机号、定位

2021-10-16 09:00:34  阅读:145  来源: 互联网

标签:function 定位 手机号 res 获取 userInfo var data wx


示例代码

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 () {
    }
})

 

标签:function,定位,手机号,res,获取,userInfo,var,data,wx
来源: https://www.cnblogs.com/L-xjco/p/15413367.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有