display:flex弹性盒子
width 宽
height 高
borfer 边框
display:flex弹性盒子
width 宽
height 高
borfer 边框
JS中,数组添加或删除数组中的元素,使用
ARRAY .splice
newarr=arr.splice(0,1,'hh')
以上语句表示,操作arr数组,从下标为0的元素开始,删除1个元素,并用'hh'去替换这个被删除的元素
详情可百度.splice()方法js中
注意,该方法,返回的值是只包含被删除的元素的数组..
而原来的数组,被操作了,失去了被删除的那个元素,
相当于,原素组被拆分为,A素组与B素组
A数组包含未被删除的元素,其变量名为原数组变量名;也就是上面语句中的arr
B素组为只包含被删除元素的数组,其变量名需要指定;也就是上面语句中的newarr
JS中,数组的拼接方法 .concat方法,
var newARR = arr1.concat(arr2)
可以将arr1与arr2拼接为newARR
获取当前时间,先在要使用当前时间的地方引入
util/util.js这个创建项目时候,由系统自动生成的文件
var util = require('../../../utils/util')
在onLoad中,或者去其他需要的方法中去调用就好
var tmp = util.formatTime(new Date)
输出的格式为2021/01/06 11:15:54这样的标准模式
我们可以根据需要对输出进行字符串的截取
另外,也可以在util这个文件中,依照原先的方法,仿制我们需要的方法,
比如,修改间隔字符,或者删除秒,或者其他
display:contents;
样式规则使div
元素不产生任何边界框,因此元素的背景、边框和填充部分都不会渲染。然而,继承的属性如颜色(color
)和字体(font
)却能照常影响到这个子元素。
课时56,提高样式优先级
在样式设值的后面,跟上!important
例如:
button{
width:0px !important
}
课时,50,
用data-来传递参数的时候,
传递到e.currentTarget.dataset这个json里面之后,这个json的Key会全部变成小写,而value保持大小写的原样
跳转页面的时候,
wx.navigateTo
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
wx.navigateBack
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。
wx.switchTab
跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。
wx.reLanch
关闭所有页面,打开到应用内的某个页面。
课时39,发现一点,就是,在JS文件中,data里面如果有变量没有被定义,可以使用
this.setdata({
index:null
})
这样的语句,动态添加,变量,因此,data如果一些变量不需要初始值的话,那么可以不用在data里面预先定义
Toast提示的引入,分3步
1.在wxml页面
添加一个Toast组件,并设置 id,其余配置在 .js 里完成。如果只有一个 Toast 组件,建议将 id 设置为 #toast,否则需要额外配置 selector 属性来指定。
2.在js页面,引入const { $Toast } = require('../../dist/base/index');
3.把提示语句写在需要函数中
$Toast({ content: '这是文本提示' });
另外,
const关键字用于定义常量,必须初始化,定义之后,该常量不可修改
var 定义变量,可以被修改,作用域window下全局的
let 定义变量,但是作用域只在本语句块中
课时12,让一个图片居中,可以将图片元素image放在view里面,然后,写view的样式,添加一句
text-align:center;
也可以将图片居中显示
课时140,学习,完毕,
各方面问题基本能成功解决,或者baidu查询解决,唯有slider与onTimeUpdate的bug难以解决
课时135,网易云音乐api的获取榜单的接口已经更新了,老师的方式已经失效,不能使用idx得到
新接口是
/toplist 这个接口没有赞赏榜,且没有摘要
/toplist/detail ,这个接口含有赞赏榜,有部分榜单的摘要
与推荐歌单的获取方式一致
但是得到的数据里面包含,
歌手榜(artistToplist),
排行榜(list),
赞赏榜(rewardToplist),
三个json,
且这3个json,里面的内容有的键值为空字符串,以及含有不同的数组
因此,在一个页面去遍历这3个json,以及json下的数组,就会显得非常臃肿,所以我暂时只遍历了排行榜,
歌手榜有其他的接口获取更为详细的内容,
歌手榜接口 /toplist/artist
课时136,由于前面网易云的更新,这一步可以省略,直接用排行榜的榜单id去调用歌单详情接口,即专享list面就可以了
课时133,尝试添加一个歌曲重复播放的功能,
添加语句audio.loop = true;
该语句可以实现歌曲的重复播放,但是onTimeUpdate没有随之而重新执行.
根据百度查得,是因为触发onWaiting导致,尝试在audio.loop = true;语句后面加上之前的解决方法
setTimeout(() => { console.log(audio.paused) }, 100)
没有效果,其原因是,应该没有找准执行该语句的时机
setTimeout(() => { console.log(audio.paused) }, audio.duration*1000+100)
这样,效果就达到了,onTimeUpdate随之执行了,
但是,如果播放的时候,有暂停,或拖动,时间就不吻合类了,因此,必须是在触发重新播放歌曲的时候,调用这个语句.
未能查得audio.loop = true;的时候,具体的时机,
因此,转变思路,改为人为循环播放,
直接在onTimeUpdate中执行一次拖动事件,并随之执行一次setTimeout函数,即可
if (duration-currentTime < 0.3) {
audio.seek(0)
setTimeout(() => {
console.log(audio.paused)
}, 100)
}
效果达成
至于这个0.3的来源,监听onTimeUpdate得来,onTimeUpdate在模拟器中每秒执行了4次
即0.25秒执行一次,所以这个用于判断的值一定要大于0.25即可
课时131,这里获取歌词的时候,应该先判断,歌词是否存在,然后再去设置data里面的歌词json,因为有些歌曲是没有歌词的,
如果没有歌词,加入if判断,让程序走向没有歌词的分支,如果不加入if判断,那么,最终结果是,歌词部分一片空白,要求不高的话,其实也没有影响,也没有影响到程序的执行.
课时74:添加输入框和按钮,可能是应为使用新样式的原因,这里和老师的代码一致,但表现不一致,"搜索"按钮,的文字没有横向排列,而是一致竖向排列,这里使用在SS文件中,button的样式中,加入一句
size="mini",可以解决这个问题
按钮文字大小不受font-size的控制..
课时73,开启本地任务,3分35秒,,此处,安装的第一句语句,是用来下载网易云API程序包,如果已经下载,忽略即可,git这个命令应该是要下载git的客户端软件包才会有,进入网易云api的文件夹,再执行 npm install就可以开始安装了,
课时68,跟着老师敲的代码,检查无误,但是,结果,当拖动过后,左边的开始时间,停在了拖动开始的时候,之后,就没有变化,
用console.log()去输出检查,发现是当change(e)执行之后,手放开的一瞬间,onTimeUpdate()事件就停止了,
然后,发现如果去点一下图片,暂停一下,然后再点一下,播放,onTimeUpdate()会恢复执行,即是先调用一下,pause方法,然后再调用一下,play()方法
因此,尝试在拖动条的触发方法中,seek()方法的后面直接调用两次这个开关方法,结果没有用,
考虑是否调用过快导致,因此,在这个两次调用的外面包裹一个setTimeout()延时,设定延时10毫秒.
然后,问题就解决了.
之后,有在百度搜资料,得到另一个解决方法
在seek()方法后面,来一个setTimeout(),延时设定为10毫秒,然后里面console.log(audio.paused)打印输出这个值就可以了,
根据百度查出来的说法是,wx开发本身的bug所至
课时59中8分43秒,这里判断性别,可以使用三目,
user.gender==1?"男":(user.gender==2?"女":"未知")