最近在看小程序的开发,虽然好多人已经都会了,但是我刚刚接触,理解不够,所以编写一些简单的小例子来一步步深入理解。
在网上找了一个天气预报的api,然后注册了一下,一共有500次免费的调用机会。暂时还是够用的。哈哈。
附上截图哈:第一张为初始进入小程序;第二张为查询结果。
可能大神们觉得我这个有点简单,但是我刚刚开始起步嘛,所以还是要记录一下的哈。
说一下思路:
1、确定页面布局,一个输入框(用于输入城市的名字),一个按钮(用于查询结果)。
代码大致如下:
<
input
placeholder=
"请输入城市名称"
bindinput=
'bindKeyInput'
/
>
<
button
bindtap=
'searchWeather'>查询
</
button
>
2、在app.js中添加获取天气预报的方法(本项目是getWeather,需要传两个参数,一个是城市的名字,另外一个是回调函数)
代码大致如下:
getWeather:
function (city, cb) {
wx.request({
url:
'http://v.juhe.cn/weather/index?format=&key=5ed3c5a7967c34555d2372c3cd1294de&cityname=' + city,
data: {
x:
'',
y:
''
},
header: {
"Content-Type":
"application/json"
},
success:
function (res) {
// console.log(res.data)
console.log(
'success');
cb(res.data);
}
})
}
3、动态获取输入框的值,使用bindinput属性。bindinput='bindKeyInput'
代码大致如下:
bindKeyInput:
function(e){
// console.log(e.detail.value)
this.setData({
inputValue: e.detail.value
})
console.log(
this.data.inputValue);
}
4、添加按钮的点击事件,使用bindtap事件。在点击查询按钮时,调用获取天气方法
代码大致如下:(我有时候会console.log很多,因为我觉得这样不容易出错,我一般是正式完成之后再删除)
searchWeather:
function() {
var thisweather =
this;
app.getWeather(
this.data.inputValue,
function(data){
console.log(
'data');
console.log(data);
console.log(
'data.result');
console.log(data.result);
console.log(
'data.result.future');
console.log(data.result.future);
thisweather.setData({ weatherDatas: data.result.future})
console.log(
'weatherDatas')
console.log(thisweather.data.weatherDatas);
})
}
5、获取到数据后,循环数据,显示到页面区域
代码大致如下:
<
scroll-view
scroll-y
style=
"height: 200px;"
>
<
view
wx:for=
"{{weatherDatas}}"
wx:key=
"*this">
日期:{{item.date}}
温度:{{item.temperature}}
星期:{{item.week}}
风向:{{item.wind}}
</
view
>
</
scroll-view
>
</
view
>
以上是用小程序实现的天气查询。可能技术不足,有些地方会有错误,欢迎各位大神指正。
附上我的github地址,可以下载到该例子。gitub地址:https://github.com/shichenyu/miniApps
记得如果觉得可以,可以star一下哦。啦啦啦~