首页 > 小程序教程 > 微信小程序商城简单的个人中心信息页面设计制作开发教程

微信小程序商城简单的个人中心信息页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序商城简单的个人中心信息页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/user-detail/user-detail.wxml-->
<view class="user">
    <view class="list section">
        <view class="flex-con">
            <span class="icon icon-woman"></span>
            <text>头像</text>
            <image src="{{userImg}}" wx:if="{{userImg}}"></image>
            <image src="../../image/defaultuser.png" wx:else></image>
        </view>
        <navigator url="../editname/editname" >
            <view class="flex-con">
                <span class="icon icon-edit"></span>
                <text class="dec">用户名</text>
                <text class="detail">{{userName}}</text>
                <span class="icon icon-right"></span>
            </view>
        </navigator>
        <navigator url="../editphone/editphone" >
            <view class="flex-con">
                <span class="icon icon-phone2"></span>
                <text class="dec">绑定手机号</text>
                <text class="detail phone">{{userPhone}}</text>
                <span class="icon icon-right"></span>
            </view>
        </navigator>
    </view>
</view>
 
二、wxss样式文件代码如下:
/* pages/user-detail/user-detail.wxss */
.user {
	background-color: #fff;
    color: #222;
    -webkit-tap-highlight-color: transparent;
}
.section {
    background: #fff;
    padding: 0 20rpx;
}
.list .flex-con {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 30rpx 0;
    border-bottom: 1px solid #e8e8e8;
}
.list .flex-con image{
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;	   
}
.list .flex-con .icon {
    font-size: 28rpx;
}
.list .flex-con text{
    display: block;
    flex: 1;
    margin: 0 20rpx;
    font-size: 28rpx;
}
.list .flex-con .dec{
    display: inline-block;
    width: 160rpx;
}
.list .flex-con .detail{
    text-align: right;
}
.list .flex-con .phone{
    color: #e61773;
}
@import "../../css/font.wxss";
三、js页面代码如下:
// pages/user-detail/user-detail.js
//获取app实例
var appInstance = getApp();
var polyfill = require('../../utils/polyfill.js');
Page({
  data:{
    userImg: null,
    userName: null,
    userPhone: null,
    userInfo: {}
  },
  judge: function(){
        if(!appInstance.globalData.userInfo.hasData){
            wx.navigateBack({
              delta: 1
            });
        }
  },
  onLoad:function(options){
    this.judge();
    this.setData({
      userImg: appInstance.globalData.userInfo.avatar,
      userName: appInstance.globalData.userInfo.nickname,
      userPhone: appInstance.globalData.userInfo.phone,
      userInfo: appInstance.globalData.userInfo
    });
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
    if(!polyfill.object.isObjectValueEqual(appInstance.globalData.userInfo, this.data.userInfo)){
        this.setData({
          userImg: appInstance.globalData.userInfo.avatar,
          userName: appInstance.globalData.userInfo.nickname,
          userInfo: appInstance.globalData.userInfo
        });
    }
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

模板简介:该模板名称为【微信小程序商城简单的个人中心信息页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 24,757次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-20
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 自适应 微信图片 html5 表格式简历模板 微信素材 微信模板 企业网站 微信公众平台 单页式简历模板
您可能会喜欢的其他模板