uniapp设置字重

在uni-app中设置字重可以使用`font-weight`属性，该属性可以设置文本的粗细程度。常用的取值有`normal`（默认值，表示标准的字体粗细）、`bold`（加粗字体）、`bolder`（更加加粗的字体）、`lighter`（更加细的字体）以及数字（100-900之间的整数，表示不同程度的粗细）。例如，可以在样式中设置`font-weight: bold;`来让文本加粗。需要注意的是，不是所有的字体都支持所有的粗细程度，具体支持程度需要查看字体的文档或者进行实验验证。

相关问题

uniapp图标代码

Uniapp中使用图标有多种方式，其中一种是使用Font Awesome图标库。以下是一个使用Font Awesome图标的示例代码：

<template>
  <view>
    <text class="fas fa-heart"></text>
  </view>
</template>

<style>
  .fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
  }
</style>

上面的代码使用了`<text>`标签来显示图标，使用了"fas fa-heart"图标。同时，通过CSS样式将Font Awesome图标库引入，并设置了字体和字重。

另外，Uniapp还提供了Icon组件，可以使用内置的图标或自定义图标。以下是一个使用Icon组件的示例代码：

<template>
  <view>
    <icon class="my-icon" type="success" />
    <icon class="my-icon" type="info" />
    <icon class="my-icon" type="warning" />
    <icon class="my-icon" type="error" />
  </view>
</template>

<style>
  .my-icon {
    font-size: 36rpx;
  }
</style>

上面的代码定义了一个名为"my-icon"的CSS类，设置了图标的大小。同时，使用了内置的图标类型，包括success、info、warning和error。如果需要使用自定义图标，可以在Icon组件中使用svg或图片等方式来实现。

uniapp图片OSS上传

### UniApp 实现图片上传至阿里云 OSS

#### 准备工作

为了使 UniApp 应用能够直接从前端上传图片到阿里云 OSS，需先获取必要的配置参数。这些参数通常由开发者通过安全的方式提供给应用，比如在构建阶段注入环境变量。

- **AccessKeyId**: 访问密钥 ID
- **AccessKeySecret**: 访问密钥 Secret
- **BucketName**: 存储空间名称
- **RegionEndpoint**: 地域节点地址
- **Policy**: 策略文本，用于指定允许的操作范围以及过期时间等信息
- **Signature**: 数字签名，用来验证请求合法性[^1]

#### 配置 Aliyun OSS SDK

确保已引入 `aliyun-oss` 或者适合前端使用的轻量化版本库来处理与 OSS 的交互逻辑。对于 UniApp 来说，推荐使用官方提供的适用于浏览器环境下的 SDK。

// main.js 中全局注册 oss 对象以便于各页面调用
import OSS from 'ali-oss';
const client = new OSS({
    region: '<Your Region Endpoint>',
    accessKeyId: '<Your Access Key Id>',
    accessKeySecret: '<Your Access Key Secret>',
    bucket: '<Your Bucket Name>'
});
Vue.prototype.$ossClient = client;

#### 页面实现代码

下面是一个简单的例子展示如何让用户选择一张照片并通过上述设置好的客户端实例将其发送到阿里云服务器上：

<template>
  <view class="container">
    <!-- 文件输入框 -->
    <input type="file" @change="handleFileChange"/>
    
    <!-- 提交按钮 -->
    <button @click="uploadImage">Upload</button>

    <!-- 显示进度条或其他反馈信息的地方 -->
    <text v-if="loading">{{ progress }}%</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      loading: false,
      progress: 0
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    async uploadImage() {
      try {
        if (!this.file) throw new Error('请选择要上传的文件');
        
        const { name } = this.file;

        // 开始上传前初始化状态
        this.loading = true;
        this.progress = 0;

        await this.$ossClient.multipartUpload(name, this.file, {
          progress(p) {
            console.log(`Progress: ${p * 100}%`);
            this.progress = Math.floor(p * 100);
          }.bind(this),
        });

        // 成功后的操作...
        alert('上传成功！');
      } catch (error) {
        console.error(error.message || error);
        alert('上传失败，请重试...');
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

此段代码实现了基本的功能需求——即选取本地图片并利用之前定义好的 `$ossClient` 进行分片上传。注意这里采用了 multipartUpload 方法以适应较大尺寸的照片传输，并且提供了实时更新上传进度的支持。