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

目录

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

最终效果可扫码查看

遇到问题可通过公众号留言反馈

概述

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

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;
 }

布局

<block wx:if="{{login==true}}">
  <view class="mine-text">
    <text class="mine-text.text">15010563146 欢迎您</text>
  </view>
</block>
<block wx:else>
  <view class="mine-text" bindtap='userLogin'> 
    <text class="mine-text.text">您尚未登录，点击登录</text>
  </view>
</block>
<view class="content">
  <text class="content-text">提供集装箱、零担、专线运输的数据支持业务，定制开发服务，欢迎来电垂询。</text>
</view>
<view class="content" bindtap='call'>
  <text class="content-text">联系电话<text class="content-text-mobile">15010563146</text>，微信同号</text>
</view>

<ad style="padding-top:40px" unit-id="adunit-6b070048c763394d" ad-type="video" ad-theme="white"></ad>