评论

一咩咩学习笔记

《WeChat Mini Program Developm》学习笔记,没有做笔记的习惯,所以会看得很乱,对于懂的也都是基础的东西,只是我不懂想要记住而已

小程序入门(天气预报)

跟着视频敲

在最初的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 =>” 又是什么?

点赞 3
收藏
评论

4 个评论

  • NAMELESS
    NAMELESS
    发表于移动端
    2021-11-12
    let和var一样属于js的关键字,最明显的区别就是用let声明的变量具有块作用域。 res=>表示的是箭头函数。
    2021-11-12
    赞同 6
    回复
  • 小丞同学
    小丞同学
    2021-11-13

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

    2021-11-13
    赞同 1
    回复
  • ¿
    ¿
    2021-11-12

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

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

    2021-11-12
    赞同 1
    回复
  • B A O
    B A O
    2021-11-13

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

    2021-11-13
    赞同
    回复
登录 后发表内容