小程序個(gè)人中心頁面如何制作

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

個(gè)人中心制作

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: '待發(fā)貨',
        url: 'bill',
        imageurl: '../../images/person/personal_shipped.png',
      },
      {
        typeId: 2,
        name: '待收貨',
        url: 'bill',
        imageurl: '../../images/person/personal_receipt.png'  },
      {
        typeId: 3,
        name: '待評價(jià)',
        url: 'bill',
        imageurl: '../../images/person/personal_comment.png'  }
    ],
  },  //事件處理函數(shù)
  toOrder: function () {wx.navigateTo({
      url: '../order/order'})
  },
  onLoad: function () {console.log('onLoad')var that = this//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)app.getUserInfo(function (userInfo) {  //更新數(shù)據(jù)  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 :事件監(jiān)聽，跳轉(zhuǎn)到我的訂單界面  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">我的評價(jià)</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>

讀到這里，這篇“小程序個(gè)人中心頁面如何制作”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。