微信小程序示例代码

微信小程序是一个在微信平台上运行的轻量级应用。以下是一个简单的微信小程序示例代码，包括页面的结构和一些基础功能。

首先，我们需要在项目的 app.json 文件中定义页面路径和一些全局设置：

json复制代码
{  
  "pages": [  
    "pages/index/index",  
    "pages/logs/logs"  
  ],  
  "window": {  
    "backgroundTextStyle": "light",  
    "navigationBarBackgroundColor": "#fff",  
    "navigationBarTitleText": "WeChat MiniProgram Demo",  
    "navigationBarTextStyle": "black"  
  }  
}

然后，我们创建一个简单的首页 index。在 pages/index/index.wxml 文件中定义页面的结构：

html复制代码
<view class="container">  
  <view class="userinfo">  
    <image class="userinfo-avatar" src="/resources/images/avatar.png"></image>  
    <text class="userinfo-nickname">Hello, World!</text>  
  </view>  
  <button bindtap="tapAction">点击我</button>  
</view>

在 pages/index/index.wxss 文件中定义页面的样式：

css复制代码
.container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh;  
}  
  
.userinfo {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
.userinfo-avatar {  
  width: 128rpx;  
  height: 128rpx;  
  margin-right: 20rpx;  
}  
  
.userinfo-nickname {  
  color: #aaa;  
}  
  
button {  
  margin-top: 20rpx;  
}

在 pages/index/index.js 文件中定义页面的逻辑：

javascript复制代码
Page({  
  data: {  
    // 初始化数据可以在这里定义  
  },  
  tapAction: function() {  
    // 定义一个点击按钮后触发的方法  
    wx.showToast({  
      title: '你点击了我！',  
      icon: 'success',  
      duration: 2000  
    });  
  }  
});

以上就是一个简单的微信小程序示例代码，其中包含了页面的结构、样式和逻辑。当你点击 "点击我" 按钮时，会弹出一个提示框显示 "你点击了我！"。

注意：在实际开发中，你可能需要引入更多的库和模块，以及处理更复杂的数据和逻辑。此外，微信小程序的开发文档是学习和开发的重要资源，你可以在其中找到更多关于页面结构、组件、API等方面的详细信息。