小程序入门(天气预报)
跟着视频敲
在最初的1、2视频中只是涉及wxml+wxss,大概包装出来一个界面。
在第三个视频中,开始与js有关,这里就是我的知识盲区了,一个是__url__,根据视频的的来敲是没有数据显示,所以这里我用了__心知天气__(一个可以免费调用api接口的,免费用户只返回 天气现象文字、代码和气温 3 项数据)不过已经足够了,接来就就面临了一个__难题__
提示我不在以下request合法域名列表中
,在网上看到说选择 “详情”->“不校验合法域名……” 就解决了这个问题了,然后就完美解决了这个问题啦!
但是很快又遇到了第二个__难题__,返回数据中是返回了一个数组,这个又与视频的不一样了。视频中是let result = res.data.result
不过它那里的返回的不是数组,这里我们只要把它改成result = res.data.result[0]
就可以解决问题了,接下来的设置就是下面显示的层级问题,一层一层的选择用”.“来进入下一层。
第二个学到的内容
在wxml中使用{{ 你的命名 }}
这两个大括号,加中间命名。在js文件中用data: { 你的命名: 'xxxx'}
可以将xxxx显示到界面中
const weatherMap = {……}
这里就是映射,一对一映射,就相当于 x = y,找到这个x输出y。在下面需要设置 nowWeather: weatherMap[ weather ]
weather就是获取到的内容在图里面匹配对应的内容输出
scroll-view scroll-x
覆盖内容可以横轴移动显示
js运用
this.setData({……})
其中nowWeatherLogo'省略号' + 自定义内容(可变) + ‘省略号’
其中省略号中是可以统一格式的
由于没有对应的背景图,暂时只能做笔记记录了。
- 需要
const weatherColorMap
设置好获取天气现象对应的颜色来设置__BarColor__wx.setNavigationBarColor({ backgroundColor : 'Map'})
同样把获取的信息映射其中。 - app.json
enablePullDownRefresh
:往下滑刷新;配合backgroundTextStyle
使用,给予用户加载反馈。 wx.stopPullDownRefresh();
完成时停止下拉界面,所以一瞬间就加载完成
wxml
wx:for="{{[1,2,3,4,5]}}"
在view标签中使用,中间输入{{item}}
可以依次换行输出12345.这样可以方便统一标签,不用每多一个输入就需要新创建一行新的view
标签来解决。对于Now you can provide attr
wx:keyfor a
wx:forto improve performance.
只是性能优化提示,只需要在 view
标签中的 wx:for
后面加上wx:key = "key"
就好了
仍有不懂
"let"是什么?
“res =>” 又是什么?
let和var类似,区别在作用域上,var的作用域为函数作用域,如for(var i = 0)那么i不仅在for包含的块中可用,还可以在包含这个for循环的整个函数中可用,而let的作用域为块作用域,就只能在这个for循环中用。
res=>是箭头函数,相当于只传入一个参数res的函数