看过几篇经验或者文章，但是写的不是很清楚，步骤也不够直接通俗，像我这种零基础（零网页开发经验）的人，看完之后不是一眼就能搞定的，所以在这里秀一下我的文笔，如果看完这篇文章还有不明白的地方，可以跟我交流！

工具/原材料

方法/步骤

首先用邮箱注册一个微信小程序，这里就不多说了，打开微信开发工具，选择小程序项目，如果没有可以自己创建一个模板程序，这里我打开的是我的项目，当你扫码登录开发工具的时候，首先看到的就是下面左边的图，这里我们添加一张图片，效果就像右边的图一样。

我们开发微信小程序，自然是要看官方的开发文档的，HTML+CSS+JS 相当于这里的 WXML+WXSS+JS，所以原理都是一样的，微信只是封装了一些东西而已，这里我们要添加图片，那就要找组件或者控件了，我们在文档中找到组件的文档说明，如下图。

首先我们需要添加本地的图片，微信开发工具不支持直接在项目目录下添加文件，所以我们打开硬盘，回到项目本地目录，创建一个图片目录来放置我们的图片，微信开发工具会自动识别项目下的目录和文件。

这里提一下，由于微信只能上传2M，所以图片不能很大，不然以后的程序写不出来。建议使用webp或者svg格式的图片，如果没有可以转换格式，原本8k的图片经过转换后变成2k，也是可以的。然后我们在.wxml文件中添加一个组件，如下图，在src中使用双引号填写图片的相对地址，当然这里也可以使用网络地址。如下图。

添加完图片之后我们就可以在.wxss文件中编写CSS样式，并应用到我们的图片上了。这里我复制了下面的CSS样式，并改了名字。

如果我们在组件中使用属性来写样式，那么属性样式会先在这里应用。微信开发工具中的注释也可以使用ctrl+/来快速注释。非常方便。

最后我们改变一下图片的大小和样式，其他的以后再说，添加本地图片只是第一步，当然如果你开发一个简单的微信小程序做推广，一张图片就够了，效果如下图。

结尾

防范措施

经验内容仅供参考，如需解决具体问题（尤其是法律、医学等领域），建议您详细咨询相关领域专业人士。