小程序个人中心（我的页面）

1.点击我的，跳转到我的页面，有组件获取头像和名字，开放能力里的open-type标签，设置类名，直接调用头像或者地址和个人信息。
2.点击联系客服，触发绑定事件调用api： uni.makePhoneCall({ phoneNumber: “10086”, });
3.点击反馈，调用api,open-type=“feedback”
4.监听分享转发： onShareAppMessage()
页面：

  vue代码：

      <template><view class="wrapper"><!-- 个人资料 --><view class="profile"><view class="meta"><!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></image> --><open-data class="avatar" type="userAvatarUrl"></open-data><!-- <text class="nickname">孙悟空</text> --><open-data class="nickname" type="userNickName"></open-data></view></view><!-- 统计 --><view class="count"><view class="cell"> 8 <text>收藏的店铺</text> </view><view class="cell"> 14 <text>收藏的商品</text> </view><view class="cell"> 18 <text>关注的商品</text> </view><view class="cell"> 84 <text>我的足迹</text> </view></view><!-- 我的订单 --><view class="orders"><view class="title">我的订单</view><view class="sorts"><text class="icon-bill">待付款</text><text class="icon-car">待收货</text><text class="icon-money">退款/退货</text><text class="icon-list">全部订单</text></view></view><!-- 地址管理 --><view class="address icon-arrow">收货地址</view><!-- 其它 --><view class="extra"><view @click="makePhone" class="item icon-arrow">联系客服</view><button open-type="feedback" class="item icon-arrow">意见反馈</button></view></view>
</template><script>
export default {methods: {makePhone() {// 调用 API 拨打电话uni.makePhoneCall({phoneNumber: "10086",});},},
};
</script><style scoped lang="less">
.wrapper {position: absolute;top: 0;bottom: 0;width: 100%;background-color: #f4f4f4;
}.profile {height: 375rpx;background-color: #ea4451;display: flex;justify-content: center;align-items: center;.meta {.avatar {display: block;width: 140rpx;height: 140rpx;border-radius: 50%;border: 2rpx solid #fff;overflow: hidden;}.nickname {display: block;text-align: center;margin-top: 20rpx;font-size: 30rpx;color: #fff;}}
}.count {display: flex;margin: 0 20rpx;height: 100rpx;text-align: center;border-radius: 4rpx;background-color: #fff;position: relative;top: -27rpx;.cell {flex: 1;padding-top: 16rpx;font-size: 27rpx;color: #333;}text {display: block;font-size: 24rpx;}
}.orders {margin: -17rpx 20rpx 0 20rpx;padding: 20rpx 0;background-color: #fff;border-radius: 4rpx;.title {padding-left: 20rpx;font-size: 30rpx;color: #333;padding-bottom: 20rpx;border-bottom: 1rpx solid #eee;}.sorts {padding-top: 30rpx;text-align: center;display: flex;}[class*="icon-"] {flex: 1;font-size: 24rpx;&::before {display: block;font-size: 48rpx;margin-bottom: 8rpx;color: #ea4451;}}
}.address {line-height: 1;background-color: #fff;font-size: 30rpx;padding: 25rpx 0 25rpx 20rpx;margin: 10rpx 20rpx;color: #333;border-radius: 4rpx;
}.extra {margin: 0 20rpx;background-color: #fff;border-radius: 4rpx;.item {line-height: 1;padding: 25rpx 0 25rpx 20rpx;border-bottom: 1rpx solid #eee;font-size: 30rpx;color: #333;}button {text-align: left;background-color: #fff;&::after {border: none;border-radius: 0;}}
}.icon-arrow {position: relative;&::before {position: absolute;top: 50%;right: 20rpx;transform: translateY(-50%);}
}
</style>

小程序个人中心（我的页面）相关推荐

微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序个人中心、我的界面（示例一）
微信小程序使用button按钮实现个人中心.我的界面(示例一) 微信小程序个人中心.我的界面,使用button按钮实现界面布局,更好的将分享好友.获取头像等功能展现出来,更多示例界面,请前往我的主页哦 ...
关于小程序订单中心页设置的公告
为进一步规范小程序交易生态.提升用户购物体验.满足用户在有交易的小程序中便捷查看订单信息的诉求,自2022年12月31日起,对于有"选择商品/服务-下单-支付"功能的小程序,需按照 ...
微信小程序个人中心页下拉回弹效果实现
实现微信小程序个人中心页面的某个区域的下拉回弹效果.例如以下代码代表需要下拉回弹的区域: 给这个区域加上事件:手指触发的时候事件.手指移动的事件.手指松开的事件.同时加上动画的样式. <view ...
微信小程序基础1【本页面窗口配置、组件、布局】
视频地址: https://www.bilibili.com/video/BV1cW411T7t6 [2018]学做小程序- 清华大学 https://www.bilibili.com/video/ ...
微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案参考文章: (1)微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案 (2)https://www. ...
微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
前言在微信小程序中,用户回退页面触发更新数据的操作,一般都是在页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
微信小程序webview内嵌h5页面
微信官方文档web-view | 微信开放文档正式上线前准备(前期开发调试可以忽略) 首先登录小程序管理后台,把 web-view 直连的 h5 页面地添加到配置域名白名单中比如我想要小程序直连地 ...
uniApp和微信小程序好看的我的页面（有源码）
uniApp和微信小程序好看的我的页面(有源码) 1.先睹为快未登录状态以登录 uniapp源码 <template><view class="content" ...

小程序个人中心（我的页面）

小程序个人中心（我的页面）相关推荐

最新文章

热门文章