小程序个人中心页面如何制作

本文小编为大家详细介绍“小程序个人中心页面如何制作”，内容详细，步骤清晰，细节处理妥当，希望这篇“小程序个人中心页面如何制作”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

个人中心制作

1. mine.js

// pages/mine/mine.jsvar app = getApp()
Page({
  data: {
    userInfo: {},
    motto: 'Hello World',// orderItemsorderItems: [
      {
        typeId: 0,
        name: '待付款',
        url: 'bill',
        imageurl: '../../images/person/personal_pay.png',
      },
      {
        typeId: 1,
        name: '待发货',
        url: 'bill',
        imageurl: '../../images/person/personal_shipped.png',
      },
      {
        typeId: 2,
        name: '待收货',
        url: 'bill',
        imageurl: '../../images/person/personal_receipt.png'  },
      {
        typeId: 3,
        name: '待评价',
        url: 'bill',
        imageurl: '../../images/person/personal_comment.png'  }
    ],
  },  //事件处理函数
  toOrder: function () {wx.navigateTo({
      url: '../order/order'})
  },
  onLoad: function () {console.log('onLoad')var that = this//调用应用实例的方法获取全局数据app.getUserInfo(function (userInfo) {  //更新数据  that.setData({
        userInfo: userInfo
      })
    })
  }
})

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

• 13

• 14

• 15

• 16

• 17

• 18

• 19

• 20

• 21

• 22

• 23

• 24

• 25

• 26

• 27

• 28

• 29

• 30

• 31

• 32

• 33

• 34

• 35

• 36

• 37

• 38

• 39

• 40

• 41

• 42

• 43

• 44

• 45

• 46

• 47

• 48

• 49

• 50

• 51

• 52

toOrder :事件监听，跳转到我的订单界面  onLoad：在加载过程中，获取用户的信息

2. mine.wxml

<!--pages/mine/mine.wxml--><view class="container">

  <view class="userinfo"><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text><image src="../../images/person/account_bg.png" class="account-bg"></image>
  </view>

  <view class="separate"></view>

  <view class="order" catchtap="toOrder"><text class="myorder-text">我的订单</text><text class="myorderlook-text">查看全部订单</text><image class="next-image" src="../../images/person/next.png"></image>
  </view>
  <view class="line"></view>

  <view class="navs"><block wx:for-items="{{orderItems}}" wx:key="name">  <view class="nav-item" catchtap="toOrder" data-type="{{item.name}}" data-typeid="{{item.typeId}}"><image src="{{item.imageurl}}" class="nav-image" /><text>{{item.name}}</text>  </view></block>
  </view>

  <view class="separate"></view>
  <view class="person-list"><view class="list-item">  <image class="item-image" src="../../images/person/personal_favorite.png"></image>  <text class="item-text">我的收藏</text></view><view class="person-line"></view><view class="list-item">  <image class="item-image" src="../../images/person/personal_site.png"></image>  <text class="item-text">收货地址</text></view><view class="person-line"></view><view class="list-item">  <image class="item-image" src="../../images/person/personal_sale_record.png"></image>  <text class="item-text">售后记录</text></view><view class="person-line"></view><view class="list-item">  <image class="item-image" src="../../images/person/personal_evaluated.png"></image>  <text class="item-text">我的评价</text></view><view class="person-line"></view><view class="list-item">  <image class="item-image" src="../../images/person/personal_share.png"></image>  <text class="item-text">推广邀请</text></view>
  </view>
  <view class="separate"></view></view>

读到这里，这篇“小程序个人中心页面如何制作”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。