微信小程序名片代码 微信小程序名片代码怎么弄

微信小程序名片是一种在微信小程序中展示个人或企业信息的方式，它通常包含姓名、职位、公司名称、联系方式等信息，下面是一个简单的微信小程序名片页面的代码示例，包括了前端的WXML、WXSS和JavaScript代码，请注意，这只是一个基础的示例，实际开发中可能需要根据具体需求进行调整和优化。

1. WXML (页面结构)

<view class="container">
  <view class="avatar">
    <image src="{{user.avatar}}" mode="aspectFill"></image>
  </view>
  <view class="info">
    <text class="name">{{user.name}}</text>
    <text class="position">{{user.position}}</text>
    <text class="company">{{user.company}}</text>
    <view class="contact">
      <text class="phone">{{user.phone}}</text>
      <text class="email">{{user.email}}</text>
    </view>
  </view>
</view>

2. WXSS (样式)

.container {
  display: flex;
  align-items: center;
  padding: 20px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}
.avatar image {
  width: 100%;
  height: 100%;
}
.info {
  flex: 1;
}
.name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
.position {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}
.company {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.contact {
  font-size: 14px;
}
.phone, .email {
  margin-right: 10px;
}

3. JavaScript (逻辑)

Page({
  data: {
    user: {
      avatar: 'path/to/your/avatar.jpg', // 替换为实际的图片路径
      name: '张三',
      position: '产品经理',
      company: 'XX科技有限公司',
      phone: '1234567890',
      email: 'zhangsan@example.com'
    }
  },
  onLoad: function (options) {
    // 页面加载时执行的初始化代码
  }
});

说明：

- WXML 定义了页面的结构，包括头像、姓名、职位、公司和联系方式。

- WXSS 提供了页面的样式，包括布局、字体大小、颜色等。

- JavaScript 部分定义了页面的数据和生命周期函数，在这个例子中，我们定义了一个用户对象，包含了名片上显示的信息。

注意事项：

- 确保图片路径正确，否则头像无法显示。

- 根据实际需求调整样式和布局。

- 可以在 onLoad 函数中添加获取用户信息的逻辑，例如从服务器获取或通过小程序的API获取。

这个示例提供了一个基本的框架，你可以根据需要添加更多的功能，比如扫描二维码添加联系人、分享名片等。