微信小程序（WeChat Mini Program）是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用，以下是一个简单的微信小程序源码示例，展示了如何在小程序中创建一个基本的页面，包括页面结构、样式和逻辑。

创建项目

你需要在微信开发者工具中创建一个新的小程序项目,打开微信开发者工具，点击“新建项目”，填写AppID（如果没有，可以在微信公众平台注册一个小程序获取），选择项目目录，然后点击“创建QuickStart项目”。

编辑项目文件

创建完项目后,你会看到项目文件夹中有一些默认的文件和文件夹，如app.js, app.json, app.wxss, pages/index/index等，我们需要修改这些文件来构建我们的小程序。

app.js

这是小程序的逻辑文件,用于初始化小程序。

// app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

app.json

这是小程序的全局配置文件,用于配置小程序的页面路径、窗口表现、底部tab等。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Demo",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

app.wxss

这是小程序的全局样式文件,用于设置小程序的整体样式。

/* app.wxss */
page {
  backgroundcolor: #eeeeee;
}

pages/index/index

这是小程序的页面文件,包含页面的结构和逻辑。

index.wxml

这是页面的结构文件,用于定义页面的布局。

<!index.wxml >
<view class="container">
  <text>{{message}}</text>
  <button bindtap="onClickMe">点我</button>
</view>

index.wxss

这是页面的样式文件,用于定义页面的样式。

/* index.wxss */
.container {
  display: flex;
  justifycontent: center;
  alignitems: center;
  height: 100vh;
}
button {
  margintop: 20px;
}

index.js

这是页面的逻辑文件,用于处理页面的事件和数据。

// index.js
Page({
  data: {
    message: 'Hello, WeChat Mini Program!'
  },
  onClickMe: function () {
    this.setData({
      message: 'Button Clicked!'
    });
  }
})

运行项目

在微信开发者工具中,点击“预览”，选择“扫码预览”或“在模拟器中预览”，然后在手机微信中扫描二维码或在模拟器中查看你的小程序，你应该能够看到一个包含文本和按钮的简单页面，点击按钮会改变文本内容。

就是一个简单的微信小程序源码示例,通过这个示例，你可以看到微信小程序的基本结构和开发流程，实际的小程序开发可能会更加复杂，涉及到更多的页面、组件、API调用等，这个示例为你提供了一个很好的起点，你可以在此基础上进行扩展和学习。