很多友友看到别人开发的微信小程序,觉得特别高大上,自己也想动手试试,但又不知道从何开始。别担心!今天就手把手教你,用一个超简单的 “简易天气查询小程序” 实例,带你轻松踏入微信小程序开发的大门。
一、准备工作🌷🌷
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 获取准确天气数据,或者添加更多功能和页面。开发的过程中遇到问题也别害怕,多查阅官方文档、在技术论坛交流,慢慢就能成为小程序开发小能手啦!