微信小程序开发 font-weight

在微信小程序开发中，font-weight是用于设置字体的粗细程度的属性。它可以接受以下几个值：

1. normal：表示正常的字体粗细。
2. bold：表示加粗的字体。
3. bolder：表示更加粗的字体。
4. lighter：表示更加细的字体。

你可以在样式中使用font-weight属性来设置字体的粗细程度。例如：

.text {
  font-weight: bold;
}

上述代码将会使得class为"text"的元素中的文字显示为加粗的字体。

相关问题

微信小程序实战篇-个人中心、订单制作

好的，让我们开始微信小程序实战篇-个人中心、订单制作的教程。

## 1. 创建个人中心页面

首先，我们需要在小程序中创建一个个人中心页面。可以在 app.json 中添加一个 tab 标签，在 pages 数组中添加个人中心页面的路径：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "个人中心"
      }
    ]
  },
  "pages": [
    "pages/index/index",
    "pages/personal/personal"
  ]
}

接下来，在 pages 文件夹中创建 personal 文件夹，并创建 personal.wxml、personal.wxss、personal.js、personal.json 四个文件。在 personal.wxml 文件中添加以下代码：

<view class="personal">
  <view class="avatar">
    <image class="avatar-img" src="{{avatarUrl}}"></image>
    <text class="nickname">{{nickname}}</text>
  </view>
  <view class="order">
    <view class="order-item" bindtap="goToOrder">
      <image class="order-icon" src="/images/personal/order.png"></image>
      <text class="order-text">我的订单</text>
      <image class="order-arrow" src="/images/personal/arrow.png"></image>
    </view>
  </view>
</view>

这里我们创建了一个包含头像、昵称、我的订单等模块的页面。其中，头像和昵称是从后端接口获取的数据。

// personal.js

Page({
  data: {
    avatarUrl: '',
    nickname: ''
  },
  onLoad: function () {
    // 从后端接口获取用户信息
    wx.request({
      url: 'https://example.com/userinfo',
      success: (res) => {
        this.setData({
          avatarUrl: res.data.avatarUrl,
          nickname: res.data.nickname
        })
      }
    })
  },
  goToOrder: function () {
    // 跳转到订单页面
    wx.navigateTo({
      url: '/pages/order/order'
    })
  }
})

在 personal.js 文件中，我们编写了 onLoad 和 goToOrder 两个函数。onLoad 函数用于从后端接口获取用户信息并在页面上显示，goToOrder 函数用于跳转到订单页面。

## 2. 创建订单页面

接下来，我们需要创建一个订单页面。在 pages 文件夹中创建 order 文件夹，并创建 order.wxml、order.wxss、order.js、order.json 四个文件。在 order.wxml 文件中添加以下代码：

<view class="order">
  <view class="order-header">
    <text class="order-title">我的订单</text>
    <text class="order-more">查看更多</text>
  </view>
  <view class="order-list">
    <view class="order-item" wx:for="{{orders}}" wx:key="index">
      <image class="order-img" src="{{item.imgUrl}}"></image>
      <view class="order-info">
        <text class="order-name">{{item.name}}</text>
        <text class="order-price">¥{{item.price}}</text>
      </view>
    </view>
  </view>
</view>

这里我们创建了一个包含订单标题、订单列表等模块的页面。其中，订单列表是从后端接口获取的数据。

// order.js

Page({
  data: {
    orders: []
  },
  onLoad: function () {
    // 从后端接口获取订单列表
    wx.request({
      url: 'https://example.com/orders',
      success: (res) => {
        this.setData({
          orders: res.data
        })
      }
    })
  }
})

在 order.js 文件中，我们编写了 onLoad 函数用于从后端接口获取订单列表并在页面上显示。

## 3. 页面样式

最后，我们需要编写页面的样式。在 app.wxss 中添加以下代码：

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50rpx;
  background-color: #fff;
  border-top: 1rpx solid #e5e5e5;
  box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 20rpx;
  color: #8a8a8a;
}

.tab-bar-item.active {
  color: #007aff;
}

.personal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}

.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.nickname {
  margin-top: 10rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.order {
  margin-top: 20rpx;
}

.order-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 80rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.order-icon {
  width: 40rpx;
  height: 40rpx;
}

.order-text {
  font-size: 28rpx;
  font-weight: bold;
}

.order-arrow {
  width: 20rpx;
  height: 20rpx;
}

在 order.wxss 中添加以下代码：

.order {
  margin-top: 20rpx;
}

.order-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
}

.order-title {
  font-size: 32rpx;
  font-weight: bold;
}

.order-more {
  font-size: 24rpx;
  color: #007aff;
}

.order-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.order-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 120rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.order-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
}

.order-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-left: 20rpx;
}

.order-name {
  font-size: 28rpx;
  font-weight: bold;
}

.order-price {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #007aff;
}

至此，我们完成了微信小程序实战篇-个人中心、订单制作的教程。希望对你有所帮助！

微信小程序开发做弹窗签到

以下是微信小程序开发实现弹窗签到的步骤和代码示例：

1. 在wxml文件中添加签到按钮和弹窗组件

<!-- 签到按钮 -->
<button bindtap="showModal">签到</button>

<!-- 弹窗组件 -->
<view class="modal" hidden="{{!modalHidden}}">
  <view class="modal-dialog">
    <view class="modal-header">
      <text class="modal-title">签到成功</text>
    </view>
    <view class="modal-body">
      <text>恭喜您获得了一次抽奖机会！</text>
    </view>
    <view class="modal-footer">
      <button class="modal-button" bindtap="hideModal">确定</button>
    </view>
  </view>
</view>

2. 在js文件中添加弹窗显示和隐藏的函数

Page({
  data: {
    modalHidden: true
  },
  showModal: function() {
    this.setData({
      modalHidden: false
    })
  },
  hideModal: function() {
    this.setData({
      modalHidden: true
    })
  }
})

3. 在wxss文件中添加弹窗的样式

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400rpx;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}

.modal-header {
  padding: 20rpx;
  text-align: center;
  background-color: #f8f8f8;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
}

.modal-body {
  padding: 20rpx;
  text-align: center;
}

.modal-footer {
  padding: 20rpx;
  text-align: center;
  background-color: #f8f8f8;
}

.modal-button {
  display: inline-block;
  padding: 10rpx 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  background-color: #fff;
  color: #333;
}