新闻资讯

    本文给大家带来的是微信小程序商城简单的个人中心信息页面设计制作开发教程,制作好以后效果图如下:

    一、wxml页面代码如下:

    
        
            
                
                头像
                
                
            
            
                
                    
                    用户名
                    {{userName}}
                    
                
            
    

    微信小程序商城入驻_微信小程序模板商城_微信小程序商城模板

    绑定手机号 {{userPhone}}

    二、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(){ // 页面关闭 } })

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

    相关搜索

网站首页   |    关于我们   |    公司新闻   |    产品方案   |    用户案例   |    售后服务   |    合作伙伴   |    人才招聘   |   

地址:北京市海淀区    电话:010-     邮箱:@126.com

备案号:冀ICP备2024067069号-3 北京科技有限公司版权所有