微信小程序代码模板

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

<!-- index.wxml -->
<view class="container">
  <text>{{message}}</text>
  <button bindtap="changeMessage">点击我改变消息</button>
</view>

// index.js
Page({
  data: {
    message: 'Hello World!'
  },
  changeMessage: function() {
    this.setData({
      message: '你好，世界！'
    })
  }
})

/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
}

以上代码实现了一个简单的页面，包含一个文本和一个按钮。点击按钮可以改变文本的内容。其中，index.wxml 文件定义了页面的结构，index.js 文件定义了页面的逻辑，index.wxss 文件定义了页面的样式。

接下来我会详细解释每个部分的作用。

index.wxml 文件

这个文件定义了页面的结构，使用类似 HTML 的语法。在这个例子中，我们定义了一个 view 元素作为容器，包含一个 text 元素和一个 button 元素。{{message}} 是一个数据绑定的语法，表示将 message 变量的值显示在文本中。

index.js 文件

这个文件定义了页面的逻辑，使用 JavaScript 编写。在这个例子中，我们定义了一个 Page 对象，其中 data 属性定义了页面的数据，包括一个 message 变量，初始值为 'Hello World!'。changeMessage 方法用于改变 message 变量的值，使用 setData 方法更新页面的数据。

index.wxss 文件

这个文件定义了页面的样式，使用类似 CSS 的语法。在这个例子中，我们定义了 .container 类，设置了容器的样式，包括垂直居中、高度为整个页面的高度。button 类设置了按钮的样式，包括背景颜色、文字颜色、圆角等。

以上就是一个简单的微信小程序代码模板，可以作为开发微信小程序的起点。