微信小程序开发——天气预报项目的问题与坑点

问题1:在新页面中切换城市时,如何把新城市的信息带回到首页中去?

解决方案:在切换城市的JS文件中添加如下字样

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  
prevPage.setData({
          latitude: res.latitude,
          longitude : res.longitude
})
wx.navigateBack({
          delta: 1,//回到上一个页面
})

 首先,获取所有页面信息,系统默认的,最后一个页面信息就是当前切换城市的页面,那么我们要只需回到上一个页面,即天气预报首页,进行prevPage.setData操作,更新经纬度即可。

问题2:为什么在真机预览加载不出来页面,但是真机调试可以?

解决方案:由于本人一开始选择使用测试号进行开发,所以在调取API的时候,勾选了不校验合法域名的选项。但是预览的话,手机默认是校验的,所以需要在手机扫描预览的二维码,打开小程序后,点击右上角的三个点,然后点击打开调试即可。

问题3:scroll-view(可滚动视图区域)的初次使用?

解决方案:scroll-view竖向滚动容易实现,但是横向滚动比较麻烦。

    display: flex;

其中最重要的肯定是将其设为弹性布局,其次是配合循环语句使用。

问题4:为什么刚开始进入小程序时加载较慢,以至于可以看到一些数值还没赋值之前的样子?

未解决此问题,猜想是因为调取API部分的代码写的十分烂,导致时间复杂度过大。

问题5:拿到新地址的经纬度,然后呢?

解决方案:如果只是把新地址的经纬度传回到天气预报的首页上,天气是不会变的,这里我添加了onShow函数,虽然一开始打开小程序也是触发了onshow,但是由于经纬度都还没赋值,所以后续操作不能进行(可能是这里变慢了?);而赋值了新地址之后回到首页上触发了onshow函数,此时经纬度已经是新地址的值了,再次调取API就可以得到新地址的天气。

问题6:美观问题?

解决方案:初次开发,直接就找了个好看的天气预报小程序,学习别人的布局和排版。

坑点1:跳转新页面时这样写是错误的

/pages/search/search.wxml

 这样写才是正确的

/pages/search/search

坑点2:使用图片时这样写是错误的

src="../../tianqi/weather-icon-S1/color-64/“+{{item.iconDay}}+”.png"

  这样写才是正确的

src="../../tianqi/weather-icon-S1/color-64/{{item.iconDay}}.png"

坑点3:尽量使用iPhone6作为模拟器,因为 px 换算成 rpx比较好算

天气预报项目END。。。

原文地址:https://www.cnblogs.com/Y-Knightqin/p/13616756.html