一咩咩学习笔记
发布于 3 年前 作者 ushi 1694 次浏览 来自 分享

小程序入门(天气预报)

跟着视频敲

在最初的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'省略号' + 自定义内容(可变) + ‘省略号’ 其中省略号中是可以统一格式的
由于没有对应的背景图,暂时只能做笔记记录了。

  1. 需要 const weatherColorMap 设置好获取天气现象对应的颜色来设置__BarColor__ wx.setNavigationBarColor({ backgroundColor : 'Map'}) 同样把获取的信息映射其中。
  2. app.json enablePullDownRefresh :往下滑刷新;配合 backgroundTextStyle 使用,给予用户加载反馈。
  3. 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 =>” 又是什么?

5 回复

let 是 ES6中新的关键字,它和var的区别是它声明变量的作用域为块级作用用,可以用来解决很多由于 var 声明变量导致的污染全局变量,闭包等问题

let和var类似,区别在作用域上,var的作用域为函数作用域,如for(var i = 0)那么i不仅在for包含的块中可用,还可以在包含这个for循环的整个函数中可用,而let的作用域为块作用域,就只能在这个for循环中用。

res=>是箭头函数,相当于只传入一个参数res的函数

let和var一样属于js的关键字,最明显的区别就是用let声明的变量具有块作用域。 res=>表示的是箭头函数。

由于js是弱语言,声明是不用特地指出是整数还是字符串等等类型,用let可以直接声明,这是es6新提出的关键字,跟var区别是let具有块作用域、没有变量提升,还有const关键字为常量。

() =>{ }是箭头函数写法,当括号中只有一个参数时可以省略不写,即

res => { } 类似于function xxx(res) { }

res=>是箭头函数,有点类似C++中的匿名函数,可以不用写出函数名,比较简洁直观

回到顶部