小程序模板代码

以下是一个简单的小程序模板代码：

<!-- index.wxml -->
<view class="container">
  <text class="title">Hello World!</text>
  <button class="btn" bindtap="onTap">Click me!</button>
</view>

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.btn {
  background-color: #007aff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

// index.js
Page({
  onTap: function() {
    wx.showToast({
      title: 'Clicked!',
      icon: 'success',
      duration: 2000
    })
  }
})

这个模板代码包含了一个页面，页面中有一个标题和一个按钮。当按钮被点击时，会弹出一个提示框。

接下来我会对这个模板代码进行详细的解释。

首先是 index.wxml 文件，这是小程序的页面结构文件，类似于 HTML。在这个文件中，我们定义了一个 view 容器，容器中包含了一个 text 标签和一个 button 按钮。text 标签用于显示标题，button 按钮用于触发事件。

接下来是 index.wxss 文件，这是小程序的样式文件，类似于 CSS。在这个文件中，我们定义了容器的样式，使其居中显示，并设置了标题和按钮的样式。

最后是 index.js 文件，这是小程序的逻辑文件，用于处理页面的事件和数据。在这个文件中，我们定义了一个 onTap 函数，用于处理按钮的点击事件。当按钮被点击时，会弹出一个提示框，提示框中显示 "Clicked!"，并且会有一个成功的图标。

这个模板代码只是一个简单的示例，实际上在开发小程序时，需要根据具体的需求进行修改和扩展。但是这个模板代码可以作为一个基础，帮助开发者快速搭建一个小程序页面。