微信小程序入门实例_____从零搭建你的第一个微信小程序

很多友友看到别人开发的微信小程序，觉得特别高大上，自己也想动手试试，但又不知道从何开始。别担心！今天就手把手教你，用一个超简单的 "简易天气查询小程序" 实例，带你轻松踏入微信小程序开发的大门。

一、准备工作🌷🌷

1. 安装微信开发者工具🌷🌷

微信开发者工具是我们开发小程序的 "瑞士军刀"，它能帮我们创建项目、编写代码、调试程序。打开微信公众平台（微信公众平台），在页面最下方找到 "下载" 选项，根据自己电脑的系统（Windows 或 Mac）下载对应的安装包，然后按照提示完成安装。

2. 注册小程序账号

如果你只是想自己练习开发，没有上线小程序的需求，可以选择注册一个个人测试账号。访问微信公众平台，点击右上角 "立即注册"，选择 "小程序" 类型，按照流程填写邮箱、设置密码等信息，完成注册后登录账号，在 "设置 - 开发设置" 里能找到小程序的 AppID，开发项目时会用到它。如果暂时不想注册，在微信开发者工具创建项目时也可以选择 "体验模式" 跳过 AppID 填写。

二、创建小程序项目🌷🌷

打开微信开发者工具，点击 "新建项目"。在弹出的窗口中，填写项目名称（比如 "简易天气查询"），选择项目的存放目录。如果已经注册了小程序账号，输入对应的 AppID；若没有，就勾选 "不使用云服务"，选择 "体验模式"。最后点击 "新建"，一个空白的小程序项目就创建好啦！

这时你会看到开发者工具界面分为三部分：左边是项目目录结构，中间是代码编辑区域，右边是模拟器和调试面板。在项目目录中，pages文件夹存放小程序页面相关代码，app.js是小程序的逻辑入口文件，app.json用于配置小程序的页面路径、窗口样式等，app.wxss负责全局样式设置。

三、编写页面代码🌷🌷

我们要实现的 "简易天气查询小程序" 很简单，只有一个页面，用户输入城市名称，点击查询按钮就能显示该城市的天气信息（这里我们用模拟数据代替真实接口获取的数据）。

1. 创建页面

在pages文件夹上右键，选择 "新建 Page"，命名为weather，这样就自动生成了weather.js、weather.json、weather.wxml、weather.wxss四个文件，分别对应页面的逻辑、配置、结构和样式。

2. 编写页面结构（weather.wxml）

复制代码

<view class="container">
  <input placeholder="请输入城市名称" bindinput="inputCity"></input>
  <button bindtap="queryWeather">查询天气</button>
  <view wx:if="{{weatherInfo}}">
    <text>城市：{{weatherInfo.city}}</text>
    <text>天气：{{weatherInfo.weather}}</text>
    <text>温度：{{weatherInfo.temperature}}℃</text>
  </view>
</view>

这段代码定义了一个输入框让用户输入城市，一个查询按钮，以及用于显示天气信息的区域。bindinput绑定了输入事件，bindtap绑定了按钮点击事件，wx:if用于根据数据是否存在来决定是否显示天气信息。

3. 编写页面样式（weather.wxss）

复制代码

.container {
  padding: 20px;
  text-align: center;
}

input {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  padding-left: 10px;
}

button {
  width: 120px;
  height: 40px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
}

这里设置了页面容器、输入框和按钮的样式，让页面看起来更美观。

4. 编写页面逻辑（weather.js）

复制代码

Page({
  data: {
    inputCity: '',
    weatherInfo: null
  },
  inputCity: function (e) {
    this.setData({
      inputCity: e.detail.value
    });
  },
  queryWeather: function () {
    // 这里用模拟数据代替真实天气接口获取的数据
    let mockWeather = {
      city: this.data.inputCity,
      weather: '晴',
      temperature: 25
    };
    this.setData({
      weatherInfo: mockWeather
    });
  }
});

data中定义了页面初始数据，inputCity方法用于获取用户输入的城市名称，queryWeather方法模拟查询天气，设置要展示的天气数据。

四、运行和调试小程序🌷🌷

点击开发者工具上方的 "编译" 按钮，或者直接按快捷键Ctrl + S（Windows）/Command + S（Mac）保存代码，模拟器中就会显示我们编写的小程序页面。在输入框输入城市名称，点击 "查询天气" 按钮，就能看到模拟的天气信息显示出来啦！

如果程序没有按照预期运行，我们可以通过右边的调试面板查看报错信息。在weather.js中添加console.log()语句，把变量打印到控制台，方便我们定位问题。比如在queryWeather方法中添加console.log(this.data.inputCity)，就能查看获取到的城市名称是否正确。

通过这个简易的天气查询小程序实例，相信你已经对微信小程序的开发流程有了基础的认识。接下来你可以尝试优化这个小程序，比如接入真实的天气 API 获取准确天气数据，或者添加更多功能和页面。开发的过程中遇到问题也别害怕，多查阅官方文档、在技术论坛交流，慢慢就能成为小程序开发小能手啦！