一咩咩学习笔记
小程序入门(天气预报)
跟着视频敲
在最初的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 attrwx:keyfor awx:forto improve performance. 只是性能优化提示,只需要在 view 标签中的 wx:for 后面加上wx:key = "key" 就好了
仍有不懂
"let"是什么?
“res =>” 又是什么?
