微信小程序个人中心页面开发

目录

微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程序添加插屏广告 微信小程序添加激励式广告

最终效果可扫码查看 遇到问题可通过公众号留言反馈

概述

写一个非常简单的个人中心页面，包括以下内容

1. 登录区域，根据是否登录显示不同的内容
2. 文字显示区域，只是显示文本
3. 文字显示区域绑定事件，可以拨打电话

一些技术总结包括

1. 条件渲染的使用wx:if等，官方链接https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html
2. 拨打电话功能 wx.makePhoneCall
3. 页面跳转wx.navigateTo

样式图

数据

记录是否登录的判断标识，便于布局页使用。同时定义登录方法和拨打电话方法。为了方便，登录直接跳转到了日志页面进行测试。

Page({
  data: {
    login: false
  },
  onLoad: function (options) {
    var mobile = wx.getStorageSync('mobile');
    var openid = wx.getStorageSync('openid');
    var unionid = wx.getStorageSync('unionid');
    if(mobile && openid && unionid) {
       this.setData({login:true});
    } else {
      this.setData({login:false});
    }
  },
  
  call:function(){
    wx.makePhoneCall({
      phoneNumber: '15010563146'
    })
  },

  userLogin:function(){
    wx.navigateTo({
      url: '../logs/logs'
    })
  }

})

样式

设置文字居中显示等。

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}

.content { 
  width: 100%; 
  padding: 10px;
  padding-top: 25px;
  justify-content: space-around; 
 } 

 .content-text {
  width: 100%;
  display: flex;
  font-size: 16px;
  line-height: 26px;
}

.content-text-mobile {
  color: #2782D7;
}

.mine-text {
  width: 100%;
  height:120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
}
.mine-text.text{
  color: #fff;
   font-size: 44rpx;
   line-height: 51rpx;
 }

布局