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

发布于:2025-07-02 ⋅ 阅读:(167) ⋅ 点赞:(0)

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

一、准备工作​🌷🌷

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 获取准确天气数据,或者添加更多功能和页面。开发的过程中遇到问题也别害怕,多查阅官方文档、在技术论坛交流,慢慢就能成为小程序开发小能手啦!

 


网站公告

今日签到

点亮在社区的每一天
去签到