零基础也能学会，手把手教你制作自己的微信小程序

你肯定刷到过那种小程序——点外卖不用下 App，扫码就能看菜单，甚至朋友自己做了个生日祝福页面。每次看到，心里是不是都有点痒痒的？想试试，又觉得那是程序员的事儿，自己零基础，连代码长啥样都不清楚。别急，我今天就用最笨的办法，手把手带你走一遍。说白了，做小程序就跟搭积木差不多，微信官方把工具都备好了，就差你动手了。

第一步，你得有个微信账号，这个谁都有。然后去搜“微信公众平台”，用微信扫码登录。进去后，点左上角“立即注册”，选“小程序”。这里要填邮箱、密码，还得实名认证，也就是绑个银行卡或者扫脸。别嫌麻烦，这一步相当于给你的小程序办个“身份证”。注册完，你会看到后台有个“开发”选项，点进去找到“开发工具”，下载一个叫“微信开发者工具”的软件。安装好后，用微信扫码登录，你就站在了起点上。

打开软件后，会弹出一个创建项目的窗口。这里是关键一步：项目名称随便写，比如“我的第一个小程序”，目录选个你记得住的位置，AppID（应用 ID）要填你刚才注册时的。别慌，AppID 在公众号后台“开发”→“开发设置”里能找到，是一串英文字母加数字。填好后，勾选“不使用云服务”，然后点“确定”。软件会自动生成一个模板页面，左边是代码，右边是手机预览。这时候你可能看着代码发懵，完全不用管它，我们直接从零开始，删掉那些模板。

现在，你看到左边文件列表里有几个文件夹。找到 “pages” 文件夹，里面有个 “index” 文件夹，点开后会看到四个文件：index.wxml、index.wxss、index.json。这四个文件分工明确：wxml 管页面结构，就像房子的框架；wxss 管样式，像装修风格；js 管逻辑，比如点击按钮后干嘛；json 管配置，像房间的默认设置。我们的目标是做个简单页面，比如一个带图片和文字的“个人名片”。先打开 index.wxml，把里面内容全删了，换成下面这段代码：```html你好，我是小明点我打个招呼```注意，图片链接要换成自己的，随便找张图上传到网上，复制链接即可。

接下来，打开 index.wxss，这是写样式的。删掉原来的代码，换上下面这段：```css.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;}.avatar {width: 150px;height: 150px;border-radius: 50%;