示例代码

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