之前有许多注意的点,写一下
win10 git下载的默认地址是c盘 用户,一开始没找到
使用git diff的话需要先checkout一下
关于git diff中会用到origin还没弄清楚差别加入图片
将图片放在同一个文件夹images中
src 为图片目录,/iamges是和page同级目录开始的,即images文件夹需要和pages文件夹处于同一目录 mode 为不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素,但是在这里图片的宽高比还是会保持,这个图片是750px760px的,我们之前设置过容器就是750rpx760rpx,这种由上而下的布局模式(先确定外层大小,再调整内层占比和缩放)比由下而上的布局模式更清晰,也能够轻松适配不同的屏幕 CSS中 positon的定位
static
fixed(固定于视窗) absolute(绝对定位于最近的非static祖先元素(没有的时候定位于初始包含块ICB),但会受到上层relative的影响) relative sticky(越过阈值变为fixed,之前是相对定位)文档中讲的比较清楚了
position:relative可以控制positon:absolut
小程序导航栏颜色,透明
这个实现原理似乎是把整个页面上移了,如果想要做透明的话(而且你想要文字图片在想要的相对位置)我认为应该在内容上留更多的空,相当于是导航栏的height, 以下是实例
默认的
小程序在运行时会自动执行onload函数
url的组成
URL（统一资源定位符）是 URI（通用资源标识）的特定类型。URL 通常由以下三或四个组成部分组成，第四部分可省略：
协议。它可以是 HTTP（不带 SSL）或 HTTPS（带 SSL）。 什么是SSL?
主机。例如：cn.udacity.com。 路径。例如：/course/wechat-mini-program--nd666-cn-1。 查询字符串。规则为?后显示参数查询值，伪 url 为：?param1=value1¶m2=value2。 综上，url 的书写规则为：json扁平化代码变为紧缩行代码网站
json数据有点像字典wx.requst函数
url 服务器接口地址 data 请求的参数 success 接口调用成功的回调函数 success函数视频中使用了一个箭头函数,比较简洁 什么是箭头函数?setData()将数据从逻辑层发送到视图层(异步) 什么是异步函数?
setData() 会首先更新 this.data 的值，然后使用新的 this.data 数据来渲染页面。setData() 会在改变 this.data() 后直接返回，而不会等待渲染结束后再返回src动态路径的使用 
page中的data是一个初始值,每次js都会走一遍onload-wx.request,所以对动态图片路径的更改也应该放在逻辑层中,即wx.requst中
一般可以在容器视图的css中加入display:flex 这样可以让他的子视图横排排列
wx:for 语法 渲染列表
{ {item}}
mustache item就是使用列表中的值的意思
相当于1 2 3 4 5
设置横向滚动
{ {item}}
将需要滚动的内容放到 中 这里是横向滚动需要设置scroll-x
.forecast-item{ display: flex; flex-direction: column; flex-shrink: 0; width: 120rpx; font-size: 36rpx; line-height: 42rpx;} 这里的flex-shrink:0 的意思是让他不要自动压缩,如果不加的话9个数字都会显示到当前页面并且宽度被压缩,这样就无法使用滚动了
{ {item}}
这里的mustache语法不是必须的,可以替换为其他,这里为了丰富列表元素选择了3个view
代码重构
wx.request({ url: 'https://test-miniprogram.com/api/weather/now', //仅为示例，并非真实的接口地址 data: { city: '广州市' }, success:res=> { let temp = result.now.temp let weather = result.now.weather console.log(temp, weather) this.setData({ nowTemp: temp + '°', nowWeather: weatherMap[weather], nowWeatherBackground: '/images/' + weather + '-bg.png', }) wx.setNavigationBarColor({ frontColor: '#000000', backgroundColor: weatherColorMap[weather], }) let hourlyWeather = [] let nowHour = new Date().getHours() let forecast = result.forecast for (let i = 0; i < 8; i += 1) { hourlyWeather.push({ time: (i * 3 + nowHour) % 24 + '时', iconPath: '/images/' + forecast[i].weather + '-icon.png', temp: forecast[i].temp + '°' }) } hourlyWeather[0].time = '现在' this.setData({ hourlyWeather: hourlyWeather }) 这里wx.requst的成功回调函数 太长了,其实它主要做的事情有两件:
1.动态改变当前的气温,背景图片,导航栏颜色,天气文字描述,我们把他拿出来放到setNow()函数中 2.天气预报的动态改变,我们把他拿出来放到setHourlyWeather()函数中wx.request({ url: 'https://test-miniprogram.com/api/weather/now', //仅为示例，并非真实的接口地址 data: { city: '广州市' }, success:res=> { console.log(res) let result = res.data.result this.setNow(result) this.setHourlyWeather(result) }, complete: ()=>{ callback && callback() }}) 现在代码简洁多了,结构也比较清晰