小程序個人中心頁面如何制作

本文小編為大家詳細介紹“小程序個人中心頁面如何制作”，內容詳細，步驟清晰，細節處理妥當，希望這篇“小程序個人中心頁面如何制作”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

個人中心制作

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>

讀到這里，這篇“小程序個人中心頁面如何制作”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。