微信小程序开发入门案例

微信小程序开发入门案例🌟

随着移动互联网的飞速发展,微信小程序已经成为我国最受欢迎的移动应用之一，对于开发者来说，掌握微信小程序开发技术是一项必备技能，我们就来分享一个微信小程序开发的入门案例，帮助大家快速入门。

案例简介

本次案例我们将开发一个简单的微信小程序——天气查询工具，用户可以通过该小程序查询到指定城市的实时天气情况。

开发环境

1. 微信开发者工具：用于开发、调试微信小程序。
2. Node.js：用于编译微信小程序代码。
3. Git：用于版本控制。

开发步骤

创建小程序

1. 打开微信开发者工具,点击“新建项目”。
2. 输入项目名称,选择项目目录，点击“确定”。
3. 在弹出的“选择模板”页面，选择“微信小程序模板”，点击“确定”。

添加页面

1. 在项目目录中,找到“pages”文件夹，右键点击，选择“添加新页面”。
2. 输入页面名称,选择页面类型（index），点击“确定”。

编写页面代码

打开“pages/index/index.wxml”文件，修改页面结构代码如下：

<view class="container">
  <input type="text" placeholder="请输入城市名" bindinput="bindKeyInput" />
  <button bindtap="getWeather">查询天气</button>
  <view class="weather-info">
    <text>温度：</text>
    <text>{{ weatherData.temp }}</text>
    <text>天气：</text>
    <text>{{ weatherData.weather }}</text>
  </view>
</view>

打开“pages/index/index.wxss”文件，修改页面样式代码如下：

.container {
  padding: 20px;
}
.weather-info {
  margin-top: 20px;
}

打开“pages/index/index.js”文件，修改页面逻辑代码如下：

Page({
  data: {
    city: '',
    weatherData: {}
  },
  bindKeyInput: function(e) {
    this.setData({
      city: e.detail.value
    });
  },
  getWeather: function() {
    const that = this;
    wx.request({
      url: 'https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=' + that.data.city,
      success: function(res) {
        that.setData({
          weatherData: {
            temp: res.data.current.temp_c,
            weather: res.data.current.condition.text
          }
        });
      }
    });
  }
});

运行小程序

1. 在微信开发者工具中,点击“预览”按钮，选择“手机预览”。
2. 打开微信,扫描开发者工具生成的二维码，即可查看小程序效果。

通过以上步骤,我们成功开发了一个简单的微信小程序——天气查询工具，这个案例可以帮助你快速入门微信小程序开发，在实际开发过程中，你可以根据自己的需求添加更多功能，历史天气查询、城市列表选择等，祝你在微信小程序开发的道路上越走越远！🚀