目录

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

最终效果可扫码查看

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

概述

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

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>