一个简单的微信小程序开发代码示例

1. 小程序目录结构

一个基本的小程序目录结构如下：

project/
├── app.js
├── app.json
├── app.wxss
├── pages/
│   ├── index/
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── ...
├── utils/
│   └── ...
└── ...

2. app.json (全局配置)

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. index.wxml (页面结构)

<view class="container">
  <view class="userinfo">
    <image class="userinfo-avatar" src="/resources/default_avatar.png" mode="aspectFill"></image>
    <text class="userinfo-nickname">Hello, World!</text>
  </view>
  <view class="section">
    <button class="section-btn" bindtap="sayHello">点击我</button>
  </view>
</view>

4. index.wxss (页面样式)

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  box-sizing: border-box;
  padding: 50rpx;
}

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

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin-right: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.section {
  margin-top: 20px;
}

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

5. index.js (页面逻辑)

Page({
  data: {
    // 页面初始数据
  },
  sayHello: function() {
    wx.showToast({
      title: 'Hello, World!',
      icon: 'none',
      duration: 2000
    })
  }
})

这是一个非常简单的微信小程序页面示例，其中包含一个按钮，点击后会显示一个Toast消息。