七旬华诞，我为祖国换新颜！用 uniCloud 云开发打造个性头像

2023-12-17 18:52:17

为祖国庆生，用 uniCloud 云开发头像框小程序装点你的头像

转眼间，我们的祖国妈妈迎来了73周年的华诞。为了表达我们对祖国的热爱之情，我们可以用一些特别的方式来装点自己，比如换上带有国旗元素的头像。今天，我们就来教大家如何使用 uniCloud 云开发打造一个个性化的头像框小程序，让你的头像在国庆期间焕然一新。

前置准备

在开始之前，我们需要准备一些东西：

一个 uniCloud 云开发项目
一个微信小程序项目
一张国旗图片

搭建 uniCloud 云存储

首先，我们需要在 uniCloud 中创建一个云存储桶，用于存储国旗图片。

登录 uniCloud 控制台，点击「云存储」标签页。
点击「新建存储桶」，填写存储桶名称和区域。
点击「创建」，创建成功后，复制存储桶名称。

上传国旗图片

接下来，我们需要将国旗图片上传到刚创建的云存储桶中。

在 uniCloud 控制台的「云存储」标签页中，点击刚创建的存储桶名称。
点击「上传文件」，选择国旗图片。
上传成功后，复制图片的URL。

创建头像框小程序

现在，我们可以开始创建头像框小程序了。

打开你的微信小程序项目。
在 pages.json 文件中添加一个新页面：

{
  "pages": [
    {
      "path": "pages/avatar-frame/avatar-frame",
      "style": {
        "navigationBarTitleText": "头像框"
      }
    }
  ]
}

创建 pages/avatar-frame/avatar-frame.wxml 文件，并添加以下代码：

<view>
  <image src="{{avatarUrl}}" style="width: 100px; height: 100px; border-radius: 50%;"></image>
  <view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%;"></view>
  <image src="{{frameUrl}}" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%;"></image>
</view>

创建 pages/avatar-frame/avatar-frame.js 文件，并添加以下代码：

import { getStorageUrl } from '@uniCloud/client'

export default {
  data() {
    return {
      avatarUrl: '',
      frameUrl: ''
    }
  },
  onLoad() {
    this.init()
  },
  methods: {
    async init() {
      // 获取头像URL
      const avatarUrl = await uni.getStorage({ key: 'avatarUrl' })
      this.avatarUrl = avatarUrl.data
      // 获取国旗图片URL
      const frameUrl = await getStorageUrl({
        path: '国旗图片URL'
      })
      this.frameUrl = frameUrl
    }
  }
}