UniApp design and development skills for personal center and settings page

UniApp is a development framework based on Vue.js, which can build Android, iOS and H5 applications at the same time. In UniApp, it is a very common requirement to realize the design and development of personal center and settings page. This article will introduce some tips on how to design and develop personal center and settings pages, and give corresponding code examples.

First of all, we need to design a simple and easy-to-use personal center and settings page. The personal center usually includes user avatar, user name, personal information, orders, settings and other modules. The settings page usually includes account settings, notification settings, privacy settings, help and feedback and other modules. When designing these two pages, user habits and interface aesthetics need to be considered.

Next, we will implement the functions of the personal center and settings page through code.

First, create two pages, personal-center and settings.

In the personal-center page, we can implement a simple personal center interface through the following code:

<template>
  <view class="personal-center">
    <view class="avatar">
      <image :src="userInfo.avatar"></image>
    </view>
    <view class="username">{{userInfo.username}}</view>
    <view class="info">
      <text>性别：{{userInfo.gender}}</text>
      <text>年龄：{{userInfo.age}}</text>
    </view>
    <view class="orders">
      <text>订单：</text>
      <text v-for="order in orders" :key="order.id">{{order.name}}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'xxx',
        username: '小明',
        gender: '男',
        age: 18
      },
      orders: [
        { id: 1, name: '订单1' },
        { id: 2, name: '订单2' },
        { id: 3, name: '订单3' }
      ]
    };
  }
};
</script>

<style>
.personal-center {
  padding: 20px;
}

.avatar {
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.username {
  font-size: 16px;
  margin-bottom: 20px;
}

.info {
  margin-bottom: 20px;
}

.orders {
  font-size: 16px;
}
</style>

In the settings page, We can implement a simple settings page interface through the following code:

<template>
  <view class="settings">
    <view class="item" @click="goToAccountSettings">账号设置</view>
    <view class="item">通知设置</view>
    <view class="item">隐私设置</view>
    <view class="item">帮助与反馈</view>
  </view>
</template>

<script>
export default {
  methods: {
    goToAccountSettings() {
      uni.navigateTo({
        url: '/pages/account-settings'
      });
    }
  }
};
</script>

<style>
.settings {
  padding: 20px;
}

.item {
  font-size: 16px;
  margin-bottom: 20px;
}
</style>

Then, add the corresponding routing configuration in uni-pages.json:

{
  "pages": [
    {
      "path": "pages/personal-center",
      "style": {
        "navigationBarTitleText": "个人中心"
      }
    },
    {
      "path": "pages/settings",
      "style": {
        "navigationBarTitleText": "设置"
      }
    }
  ]
}

Finally, On the main page, the following code is used to realize the function of navigating to the personal center and settings page:

<template>
  <view class="index">
    <view class="navigate" @click="goToPersonalCenter">个人中心</view>
    <view class="navigate" @click="goToSettings">设置</view>
  </view>
</template>

<script>
export default {
  methods: {
    goToPersonalCenter() {
      uni.navigateTo({
        url: '/pages/personal-center'
      });
    },
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings'
      });
    }
  }
};
</script>

<style>
.index {
  padding: 20px;
}

.navigate {
  font-size: 16px;
  margin-bottom: 20px;
}
</style>

Through the above code example, we can realize the basic functions of the personal center and settings page. Of course, according to different needs, we can also expand the page according to specific circumstances.

To sum up, UniApp is a powerful development framework that can be used to build cross-platform applications. When designing and developing the personal center and settings page, we need to consider the user's needs and the aesthetics of the interface, and implement the corresponding interface and functions through code.

I hope this article has provided some help for you to implement the design and development of the personal center and settings page in UniApp.

The above is the detailed content of UniApp design and development skills for personal center and settings page. For more information, please follow other related articles on the PHP Chinese website!