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

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

个人中心制作

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

  {{userInfo.nickName}}      我的订单查看全部订单        {{item.name}}            我的收藏    收货地址    售后记录    我的评价    推广邀请    

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