瞎搞搞UI,凑合看吧
实例代码
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
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: 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 () {
}
})