| 微信小程序 | 您所在的位置：网站首页 › 微信小程序怎么不能用手机登录 › 微信小程序 |
微信小程序
|
接上节简单介绍完wxml，这节实际运用小程序的wxml来实现一套简单登录和个人信息展示。 登录页面创建好项目后，在pages下新建一个login目录，右键login文件夹，选择新建page，创建login的page，如下图：
创建后的page如下图：
创建好login page后，项目会自动在app.js中添加login的page路劲，新增的page会顺序加在后边，小程序打开默认加载第一个路径，我们将login的路径移到最前边，这样每次编译后，初始化页面就为登录的页面了，如下：
打开login.wxml，看到ide自动生成的代码如下： pages/login/login.wxml我们不需要这行代码，直接删掉，自己实现登录界面的代码如下： login.wxml 微信小程序App 用户名 密码 立即登录 一一一一一第三方登录一一一一一 微信登录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如下： 昵称： {{nickName}} 性别： {{gender}} 国家： {{country}} 省份： {{province}} 获取个人信息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 点我进群
|
【本文地址】
公司简介
联系我们