这个系列的上一篇教程，教大家写了一个最简单的 Hello world 微信小程序。

但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。

所有示例的完整代码，都可以从 GitHub 的代码仓库^[1]下载。

微信小程序作为国内开发者广泛使用的一种轻量级应用形态，其开发生态也日趋完善。在小程序开发过程中，UI组件库的使用可以显著提高开发效率，同时保证用户界面的统一性和优美性。下面是笔者总结的为开发者推荐的几款常用的微信小程序UI组件库，希望能够帮助大家提高开发效率。

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

 
  


<script>
{
  const fileInput = document.getElementById('fileInput')

  fileInput.accept = 'image/*'
  fileInput.onchange = () => {
    const file = fileInput.files[0]
    const formData = new FormData()
    const xhr = new XMLHttpRequest()

    formData.append('img', file)

    xhr.open('POST', 'http://localhost/upload.php', true)
    xhr.send(formData)
    xhr.onreadystatechange = () => {
      if (xhr.readyState !== 4)
        return

      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText)
        const img = new Image()
        img.src = data.url
        document.body.appendChild(img)
      } else {
        alert('文件上传失败： ' + xhr.status)
      }
    }
  }
}
</script>

当使用