个人信息展示的微信小程序

个人信息管理器是一个简洁而实用的微信小程序，旨在为用户提供一个方便查看和编辑个人信息的平台。通过这个小程序，用户可以轻松管理自己的基本资料，如姓名、年龄和职业等。

1. 创建项目

在微信开发者工具中创建一个新的小程序项目。

2. 项目结构

项目结构如下：

personal-info/
├── app.js
├── app.json
├── app.wxss
├── pages/
│   ├── index/
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── profile/
│       ├── profile.js
│       ├── profile.json
│       ├── profile.wxml
│       └── profile.wxss
├── project.config.json
└── sitemap.json

3. 编写代码

3.1 app.js

// app.js
App({
  onLaunch: function() {
    // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
    console.log('App Launch');
  },
  // ... 其他全局逻辑
});

3.2 app.json

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/profile/profile"
  ],
  "window": {
    "navigationBarTitleText": "个人信息"
  }
}

3.3 app.wxss

/* app.wxss */
/* 全局样式 */

3.4 pages/index/index.js

// pages/index/index.js
Page({
  data: {
    // 这里可以定义一些全局数据
  },
  onLoad: function(options) {
    // 页面加载时执行
  },
  // ... 其他页面逻辑
});

3.5 pages/index/index.json

// pages/index/index.json
{
  "navigationBarTitleText": "首页"
}

3.6 pages/index/index.wxml

<!-- pages/index/index.wxml -->
<view class="container">
  <button bindtap="navigateToProfile">查看个人信息</button>
</view>

3.7 pages/index/index.wxss

/* pages/index/index.wxss */
.container {
  padding: 20px;
}

button {
  margin-top: 20px;
}

3.8 pages/profile/profile.js

// pages/profile/profile.js
Page({
  data: {
    profile: {
      name: '张三',
      age: 28,
      job: '前端开发工程师'
    }
  },
  onLoad: function(options) {
    // 页面加载时执行
  },
  // ... 其他页面逻辑
});

3.9 pages/profile/profile.json

// pages/profile/profile.json
{
  "navigationBarTitleText": "个人信息"
}

3.10 pages/profile/profile.wxml

<!-- pages/profile/profile.wxml -->
<view class="profile-container">
  <view class="info-item">
    <text>姓名：</text>
    <text>{{profile.name}}</text>
  </view>
  <view class="info-item">
    <text>年龄：</text>
    <text>{{profile.age}}</text>
  </view>
  <view class="info-item">
    <text>职业：</text>
    <text>{{profile.job}}</text>
  </view>
</view>

3.11 pages/profile/profile.wxss

/* pages/profile/profile.wxss */
.profile-container {
  padding: 20px;
}

.info-item {
  margin-bottom: 10px;
  font-size: 16px;
}

.info-item text:first-child {
  font-weight: bold;
}

4. 运行和调试

1. 保存所有文件：确保所有文件都已保存。
2. 预览：点击微信开发者工具中的“编译”按钮，编译项目。
3. 调试：在模拟器中查看效果，点击“查看个人信息”按钮，跳转到个人信息页面。

5. 效果展示

运行后，你应该在模拟器中看到如下界面：

• 首页：一个按钮，点击后跳转到个人信息页面。
• 个人信息页面：显示用户的姓名、年龄和职业。