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

最终效果可扫码查看

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

概述

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

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

一些技术总结包括

条件渲染的使用wx:if等，官方链接https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html
拨打电话功能 wx.makePhoneCall
页面跳转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>

微信小程序个人中心页面开发相关推荐

微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序个人中心页面案例
微信小程序开发,经常会遇到个人中心页面的需求,为了方便大家使用,决定将个人总想页面进行开源,以供大家参考交流. 一.效果预览二.源代码 abouthe.json文件 {"usingCo ...
【uni-app微信小程序】搜索页面开发，可以保存用户搜索历史，删除历史（简单解释）
目录前言效果展示主体内容前言此篇文章纯代码较多,细节解释,今后会出更加详细的解释效果展示保存的内容,可以长按删除,视频时长原因就不一一展示,具体效果如下视频主体内容这里one-adv ...
微信小程序个人中心页下拉回弹效果实现
实现微信小程序个人中心页面的某个区域的下拉回弹效果.例如以下代码代表需要下拉回弹的区域: 给这个区域加上事件:手指触发的时候事件.手指移动的事件.手指松开的事件.同时加上动画的样式. <view ...
微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
微信小程序用什么软件开发
微信小程序用什么软件开发?要花你多少钱呢! 现在是Z世代,新能源车.芯片.AI的时代了,不会还有企业.店铺,想通过聘请程序员,或者花个大几万去开发一个微信小程序吧. 不会吧,这不会是真的吧. 今天珍奶 ...
微信小程序网悦新闻开发--我的模块开发（五）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
微信小程序购物商城系统开发系列-工具篇
微信小程序购物商城系统开发系列-工具篇微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操 ...
微信小程序嵌套h5页面+发布微信小程序（超级简单）
将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!!! 使用到的技术为uniapp和web-view 首先,我们先来了解一下web-view是什么: 简单的一句话来讲:web-view 是 ...

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

目录

概述

数据

样式

布局

微信小程序个人中心页面开发相关推荐

最新文章

热门文章