写一个微信小程序静态页面源码

以下是一个简单的微信小程序静态页面的源码，包括一个简单的页面布局和两个按钮：

<view class="container">
  <view class="header">
    <text class="title">欢迎来到微信小程序</text>
  </view>
  <view class="content">
    <text>这是一个简单的静态页面</text>
    <button class="btn">按钮1</button>
    <button class="btn">按钮2</button>
  </view>
</view>

在这个页面中，我们有一个包含所有内容的容器 view，一个标题栏 header 和一个内容区域 content。内容区域包含一些文本和两个按钮。我们使用 class 属性来给不同的元素定义样式。

接下来，我们需要在微信小程序的开发工具中创建一个新的页面，并将这段代码复制到 wxml 文件中。然后，我们可以使用 wxss 文件来为页面添加样式。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  width: 100%;
  background-color: #007aff;
}

.title {
  color: #fff;
  font-size: 32rpx;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn {
  margin-top: 40rpx;
  width: 280rpx;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
}

在这个样式中，我们使用了 flexbox 布局来实现页面的垂直居中和内容区域的布局。我们还使用了一些常见的 CSS 属性，如颜色、字体大小和边框半径。

最后，我们需要在小程序的 pages.json 文件中注册这个新页面：

{
  "pages": [
    {
      "path": "pages/index/index",
      "navigationBarTitleText": "首页"
    }
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#007aff",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

现在，我们就可以在微信小程序中查看这个新页面了。