收获
- 可以成功制作出来一个天气预报!不过还是有很多的缺陷,毕竟视频中代码补全。
- 了解到了wxml+wxss,感觉这两个就是前端里面的html+css。
- 懂得如何制作跳转页面,以及第二页面的默认显示。
<view>
<view></view>
这个就是最简单的制作啦!在这两个中间输入你想要输入的东西就可以显示出来而且还会自动换行class = "内容"
这个内容就类似于一个标记可以用在每个标签里面,例如<view class = "内容">
就相当于给这个标签一个命名,然后可以在wxss里面使用.内容 { }
在大括号里面对标签的修饰,例如它的宽,高,距离顶部距离等等的作用。{{ }}
两个大括号的使用,就是显示内容的一个动态切换吧,感觉来说,就是在js里面对括号里面的内容根据需要切换bindtap="命名"
监听器对用户的点击作出对应的行为。对应的行为需要自己在js文件里面实现,通过命名来对bindtap行为作出的响应。
<image src = “”>
src里面输入的就是你的项目里面有的图片,就是需要自己把图片放进去,然后用路径表达去选择图片啦!
<scroll-view scroll-x>
实现**横轴(X轴方向)**的滚动,这个是用于<view wx:for="">
而wx:for
就是一个循环,将需要的内容循环输出,当wxss里面对该view设置了flex-shrink: 0; /* 确保距离不会被缩小,不会被自适应 */
就当超出屏幕显示宽度的时候后面的内容将被覆盖不会显示出来,就需要使用<scroll-view>
来用横向滑动显示出来!
const dayMap = []
Map这里就是映射,一对一映射,就相当于 x = y,找到这个x输出y。
编译页面
“添加编译模式”里面修改启动页面就可以编译的时候直接显示你想要编译显示出来的那个页面
用户响应以及用户触碰响应范围
我们可以通过<view class = "">省略号</view>
对里面的内容进行一个扩大的包裹,让用户可以选择的地方大一些。可以有wx.showToast({})
进行显示例如成功或者失败的提示。
页面跳转
- 利用
bindtap
和js里的wx.navigateTo({url:''})
进行页面的跳转 - 第二页面的
onLoad(options)
这里面的options是第一个页面中跳转url里面添加的'……?city=' + this.data.city
其中options就显示内容为对应的city=第一个界面里面的city
部分内容的切换
当我们获取到的只有名称不包括后缀名的时候,我们利用nowWeatherLogo: '/images/' + code + '@1x.png'
类似于这样的 code表示获取的内容,可以通过+的方式把他们连接在一起并返回到wxml里面选择的图片资源路径。依次类推,当只有部分内容改动的时候,只需要用"+"把他们连接在一起就好了,不改动的内容用单引号引起来。
微信获取地址
wx.getLocation
获取用户所在地址wx.getSetting
当用户第一次选择取消的时候,第二次点击不应该没有响应,需要重新进入设置来让用户同意使用。
学习中遇到的问题以及解决方法
- 视频中的api无法使用以及没有提供的icon
api的话我是用了心知天气来解决的,对于图标也有对应的,只是有的图标是白色在白的地方就像是没有图片显示一样。如果需要别的icon可以在iconfont上面寻找! - 不在以下request合法域名列表中
这个得要在小程序“开发管理”->“开发设置”的服务器域名进行修改,使用外部链接的时候要加上“https://mp.weixin.qq.com”这个,手机预览才可以显示出来,我也不知道为什么。
视频中的不足
- 我觉得英文版的还挺好,起码是教项目入手,如果有中文字幕就更好了,不过英文来说大部分还是能懂。
- 前面五节都很好,但是到了第六节,它显示出来的页面每次都不一样,内容也是。
- 视频中没有对应的图标以及api提供,导致花费大部分时间在找图标什么的。
目前仍有不懂的地方
- 对于外部链接为什么在配置"request合法域名"中添加多一个“https://mp.weixin.qq.com”才可以在手机中预览正常使用?
- 对于纯白的图片,有没有方法可以让图片显示出来,就修改图片显示样式里面更改这个颜色,而不是一个一个图标的去修改?
- 如果不能修改图标怎么能够修改背景颜色,因为只是在view包括的内容那一段里面使用
background-color
去设置背景颜色会发现不是整个背景,而是一部分,只是一个容器那样会有边界的。 TypeError: Cannot read property '0' of undefined
是因为第二个页面没有获取到第一个页面的city才会显示出这个么?(直接编译显示第二个界面)
onLoad(options) {
// console.log(options);
this.setData({
city: options.city
});
this.getWeekWeather()
}
getWeekWeather(callback) {
wx.request({
url: 'https://api.seniverse.com/v3/weather/daily.json',
success: res => {
let result = res.data.results[0] /* ←出错的行数*/
this.setWeekWeather(result)
},
加油~
直接做出来一个东西是最快了解的方式,但也只是了解一些表面的,例如wxss里面的这个还是得要自己慢慢学,去尽力把界面做好
加油,大家互相学习,一起进步
可以发个视频链接吗
多动手,多思考。加油~~~
珍爱生命 远离编程