【微信小程序】个人信息页面/我的页面 |
您所在的位置：网站首页 › 微信小程序大鱼吃小鱼网页开发 › 【微信小程序】个人信息页面/我的页面 |
【微信小程序】个人信息页面/我的页面
|
制作个人信息页面/我的页面
hello，小伙伴们大家好，小编是后端开发，没有系统接触过前端学习，最近公司要求开发小程序，斗胆承接，其中有个人信息页面比较常用，现记录下来，供初学者参考，有不符合规范的地方，希望各位大佬包含，评论区指点！废话不多说，直接上代码。 效果图
样式使用了flex布局 js文件：my.js // pages/my/my.js Page({ /** * 页面的初始数据 */ data: { userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), canIUseGetUserProfile: false, canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false }, /** * 生命周期函数--监听页面加载 */ onLoad() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } }, getUserProfile(e) { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res) this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) }, getUserInfo(e) { // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 console.log(e) this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) } }) json文件：my.json { "usingComponents": {}, "navigationBarBackgroundColor": "#a7d3e8", "navigationBarTitleText": "我的" } wxml文件：my.wxml |
【本文地址】