微信小程序 例子代码 微信小程序代码编写教程

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用，以下是微信小程序的一个简单例子代码，这个小程序将展示一个简单的页面，上面有一个按钮，点击按钮后会弹出一个模态框显示“Hello World”。

你需要在微信开发者工具中创建一个新的小程序项目，以下是小程序的基本结构：

1、app.json：全局配置文件，用于设置小程序的窗口表现，设置导航条样式等。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "小程序示例"
  }
}

2、pages/index/index.wxml：页面结构文件，用于描述页面的结构。

<view class="container">
  <button bindtap="sayHello">点击我</button>
</view>

3、pages/index/index.wxss：页面样式文件，用于设置页面的样式。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

4、pages/index/index.js：页面逻辑文件，用于处理页面的逻辑。

Page({
  sayHello: function() {
    wx.showModal({
      title: 'Hello World',
      content: '这是一个模态框',
      showCancel: false
    });
  }
});

5、pages/index/index.json：页面配置文件，用于设置页面的窗口表现。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

这个小程序的结构非常简单，它只包含一个页面，在index.wxml文件中，我们定义了一个按钮，当用户点击这个按钮时，会触发sayHello方法，在index.js文件中，我们定义了sayHello方法，该方法使用wx.showModal函数来弹出一个模态框，显示“Hello World”。

要运行这个小程序，你需要在微信开发者工具中进行以下步骤：

1、打开微信开发者工具。

2、点击“添加项目”，输入或选择项目目录，填写AppID（如果没有AppID，可以点击“无AppID”进行体验）。

3、选择“小程序”项目类型。

4、点击“确定”，完成项目创建。

5、将上述代码复制到对应的文件中。

6、点击工具栏的“编译”按钮，或直接使用快捷键Ctrl + Enter（Windows）或Cmd + Enter（Mac）进行编译。

7、使用微信扫一扫功能扫描工具栏上的二维码，即可在手机上预览你的小程序。

请注意，这个例子是一个非常基础的小程序示例，实际开发中，小程序会更加复杂，涉及到更多的页面、组件、API调用等，希望这个例子能帮助你入门微信小程序开发。