一听到“微信小程序制作”，第一反应就是“要会代码吧？要懂前端吧？”——其实，如果你只是想做一个功能简单、界面清爽的小程序，比如个人作品集、公司宣传页、或者一个带表单的留言板，你完全可以用最基础的代码拼出来。今天我就带你手写一个完整的、能跑起来的小程序页面，包含页面结构、样式、交互逻辑。

咱们先别急着去下载各种复杂的框架，微信小程序官方提供的原生开发模式，其实对新手非常友好。你只需要三个文件：wxml（页面结构）、wxss（样式）、js（逻辑）。这三个文件放在同一个文件夹里，名字和页面名一致，就能组成一个页面。比如你的页面叫“index”，那三个文件就是 index.wxml、index.wxss、index.js。

我拿一个“个人名片”小程序来举例。这个名片页会显示头像、姓名、简介、联系方式，还有一个点击后弹出提示的按钮。听起来简单吧？但这里面涵盖了小程序最核心的几种能力：数据绑定、事件绑定、条件渲染。做完这个，你就能举一反三。

先看 index.wxml 怎么写。微信小程序的标签和 HTML 很像，但用的是 view、text、image 这些自带语义的标签。注意，image 标签必须写 src，而且图片要放在项目的 images 文件夹里，或者用网络图片链接。我写一个简单的结构：

<view class="container">
  <image src="/images/avatar.jpg" class="avatar"></image>
  <text class="name">张三</text>
  <text class="desc">全栈开发者 / 热爱开源</text>
  <view class="contact">
    <button bindtap="showContact">联系我</button>
  </view>
</view>

这里有个细节：bindtap="showContact" 就是事件绑定，点击按钮会触发 js 文件里定义的 showContact 函数。第一次写会忘记在 js 里定义这个函数，结果点击没反应——别急，我们马上写 js。

接下来是 index.wxss。微信小程序的样式和 CSS 几乎一样，但有一些自己的单位，比如 rpx（responsive pixel）。rpx 会根据屏幕宽度自适应，750rpx 就是屏幕宽度，所以用 rpx 做适配非常方便。我写一个居中的卡片样式：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f2f5;
}
.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
}
.name {
  font-size: 48rpx;
  font-weight: bold;
  color: #1c487f;
}
.desc {
  font-size: 28rpx;
  color: #666;
  margin: 20rpx 0;
}
button {
  background-color: #1c487f;
  color: white;
  padding: 20rpx 60rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
}

你看，这里用了 color: #1c487f 来突出名字，按钮背景色也用同色系，整体风格统一。注意，button 在微信小程序里自带一些默认样式，如果你不想用默认的，可以像我这样直接覆盖。

最后是 index.js，这是逻辑核心。很多新手以为 js 就是写一堆函数，其实在小程序里，js 还要管理数据。我们用 Page({}) 来注册页面，里面可以写 data 对象、生命周期函数、事件处理函数：

Page({
  data: {
    // 这里可以放一些初始数据
    message: '欢迎查看我的名片'
  },
  showContact: function() {
    wx.showToast({
      title: '微信号: zhang123',
      icon: 'none',
      duration: 2000
    })
  }
})

这里我用了一个 wx.showToast 来弹出提示，这是微信小程序自带的交互反馈 API。会问：为什么不用 alert？因为小程序里没有 alert，用的是 wx.showToast 或者 wx.showModal。你可以把 icon: 'none' 改成 icon: 'success'，会显示一个绿色的勾，视觉上更友好。

写到这里，你的小程序已经可以点击按钮弹出微信号了。但如果你想更进一步，比如让名字从 js 里动态加载，而不是写死在 wxml 里，那就用数据绑定。在 wxml 里把“张三”改成 {{name}}，然后在 js 的 data 里加上 name: '张三'。这样以后想改名字，只需要改 data 里的值，页面会自动更新——这就是 MVVM 模式的好处。

我还遇到过一种情况：有些人想把联系方式隐藏起来，点击按钮才显示。这就要用到条件渲染。在 wxml 里加一个 view，用 wx:if="{{showContactInfo}}" 控制显隐，然后在 js 的 showContact 函数里 this.setData({ showContactInfo: true })。注意，一定要用 this.setData 来修改数据，直接赋值是不生效的，这是新手最容易踩的坑。

对比一下：用 wx:if 和用 hidden 有什么区别？wx:if 是真正的条件渲染，如果条件为 false，组件根本不会渲染到页面里，适合频繁切换的场景；hidden 只是隐藏，组件还在，适合不需要频繁切换的场景。比如联系方式这种一次点击就显示，之后不再隐藏的，用 wx:if 更省资源。

扩展一点：如果你想做一个表单提交页面，比如用户输入姓名和留言，点击提交后把数据打印到控制台。那就在 wxml 里加 input 和 textarea，用 bindinput 事件监听输入，把值存到 data 里，提交时用 wx.request 发送到服务器。但要注意，小程序的 wx.request 必须配置合法域名，开发阶段可以在“详情-本地设置”里勾选“不校验合法域名”，否则请求会失败。

很多教程会告诉你“先学 HTML/CSS/JS”，但我的经验是：直接上手写一个最简单的页面，遇到问题再查，比系统学完再写效率高得多。比如刚才提到的 rpx 单位，你写一次就记住了；bindtap 的写法，你点一次按钮报错就记住了。我见过太多人学了一周理论，结果连一个图片都显示不出来——因为忘了把图片放到项目文件夹里。

最后给你一个独门技巧：写小程序的时候，多用 调试器里的 Wxml 面板。你可以在模拟器里选中某个元素，实时修改它的样式，看看效果，然后再把改好的代码复制到 wxss 文件里。这比反复改代码、刷新页面快十倍。另外，小程序开发者工具里有一个“自动保存并编译”的开关，打开后你改代码，页面会自动刷新，省去手动点编译的步骤。

如果你想把刚才那个名片小程序变成多页面应用，比如再加一个“项目展示”页面，那就在 app.json 的 pages 数组里加上新页面的路径，比如 "pages/project/project"。然后复制 index 的三个文件，改一下内容，用 navigateTo 跳转过去。注意，页面路径不要写错，大小写敏感，而且每个页面都要有独立的 js 文件，哪怕里面是空的 Page({}) 也要有。

你可能会问：这些代码写出来，能直接上传审核吗？可以，但要注意小程序的包大小不能超过 2MB。如果你的图片太多太大，建议压缩一下，或者用云存储的链接。另外，个人主体的小程序有些功能受限，比如支付、直播，但像名片、表单、展示类的小程序完全够用。

写小程序最怕的就是“想太多，做太少”。你完全可以今天花半小时，照着上面的代码敲一遍，然后改改颜色、换张图片、加个按钮，一个属于你自己的小程序就诞生了。遇到报错别慌，把错误信息复制到搜索引擎里，90% 的问题都有现成答案。剩下 10% 的问题，往往是因为你少写了一个花括号，或者路径写错了——检查三遍，总能发现。