微信小程序 - 实现简单登录和个人信息页面
接上节简单介绍完wxml，这节实际运用小程序的wxml来实现一套简单登录和个人信息展示。
登录页面
创建好项目后，在pages下新建一个login目录，右键login文件夹，选择新建page，创建login的page，如下图：
创建后的page如下图：
创建好login page后，项目会自动在app.js中添加login的page路劲，新增的page会顺序加在后边，小程序打开默认加载第一个路径，我们将login的路径移到最前边，这样每次编译后，初始化页面就为登录的页面了，如下：
打开login.wxml，看到ide自动生成的代码如下：
<!--pages/login/login.wxml-->
<text>pages/login/login.wxml</text>我们不需要这行代码，直接删掉，自己实现登录界面的代码如下：
login.wxml
<view class="login-container">
<view class="title">微信小程序App</view>
<view class="login-box">
<label>用户名</label>
<input placeholder="请输入用户名"/>
<label>密码</label>
<input placeholder="请输入密码"/>
<button class="login-btn">立即登录</button>
<view class="three-line">一一一一一第三方登录一一一一一</view>
<button class="login-btn" style="background-color:green;">微信登录</button>
</view>
</view>login.wxss
/* pages/login/login.wxss */
page{
height: 100%; /* 使用page的height可以使页面占全屏 */
background-color: #fafafa;
}
.login-container{
padding: 0 10%;
height: 100%;
}
.title{
font-size: large;
text-align: center;
padding-top: 10%;
font-weight: bold;
}
.login-box{
margin-top: 10%;
padding: 10% 5%;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 4px #888888;
}
.login-box>input{
margin: 5% 0 8% 0;
border-bottom: 1rpx solid lightgray;
}
.login-btn{
width: 100%!important;
background-color: #2f6afd;
color: white;
font-weight: normal;
}
.three-line{
margin: 8% 0;
text-align: center;
font-size: 12px;
color: gray;
}
效果如下：（微信登录可以用图标更好看些，我这里比较懒就先用按钮代替）
个人信息页面
以同样的方式，在pages文件夹下创建个人信息page，如下：
编辑personinfo.wxml如下：
<!--pages/personinfo/personinfo.wxml-->
<view class="container">
<view class="info-box">
<view style="text-align: center;margin-bottom:10%;">
<image class="avatar-img" src="{{avatarUrl}}" />
</view>
<text>昵称： {{nickName}}</text>
<text>性别： {{gender}}</text>
<text>国家： {{country}}</text>
<text>省份： {{province}}</text>
</view>
<view style="margin-top:20%">
<button open-type="getUserInfo" bindtap="showUserInfoTap">获取个人信息</button>
</view>
</view>personinfo.wxss如下：
.info-box{
width: 80%;
}
.avatar-img {
width: 100px;
height: 100px;
border: 1px solid gray;
}
.info-box>text{
display: block;
margin-left: 20%;
margin-top: 4%;
}页面效果如图：
实现点击‘获取个人信息’按钮显示个人信息，bindtap="showUserInfoTap" 类似于H5中的onclick点击事件，在js文件中添加函数，调用微信小程序的开放接口 wx.getUserInfo(Object object) 获取微信个人信息。使用setDate()的方式动态显示数据，详见官方文档用法：WXML模板
personinfo.js如下：
// pages/personinfo/personinfo.js
Page({
/**
* 页面的初始数据
*/
data: {
nickName : "",
avatarUrl : "",
gender : "",
province : "",
city : "",
country : ""
},
showUserInfoTap:function(){
var that = this;
wx.getUserInfo({
success: function(res) {
console.log(res);
var userInfo = res.userInfo
console.log(userInfo);
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
if(gender==1){
gender = '男'
}else if(gender==2){
gender='女'
}else{
gender = '未知'
}
that.setData({
nickName : nickName,
avatarUrl : avatarUrl,
gender : gender,
country : country,
province : province
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})点击获取微信个人信息效果：
有兴趣的朋友可以加我的qq群交流学习，群里有更多源码，学习资料
QQ群：741909960
