小程序开发前端和服务器框架图

+-------------------+
|   小程序前端      |
|                   |
| +----------------+ |
| | 页面（Page）   | |
| +----------------+ |
| | 组件（Component)| |
| +----------------+ |
| | API调用        | |
| +----------------+ |
+-------------------+

+-------------------+
|   服务器端        |
|                   |
| +----------------+ |
| | 数据库          | |
| +----------------+ |
| | 业务逻辑层      | |
| +----------------+ |
| | API接口层      | |
| +----------------+ |
| | 安全层          | |
| +----------------+ |
+-------------------+

<!-- index.wxml -->
<view class="container">
  <text>{{message}}</text>
  <button bindtap="handleClick">点击我</button>
</view>

// index.js
Page({
  data: {
    message: 'Hello, 小程序!'
  },
  handleClick: function() {
    this.setData({
      message: '你点击了按钮！'
    });
  }
});