目录
项目预览关于该课程收获到的知识项目预览
这是完成该微信小程序后的部分截图
关于该课程
3个月前,9月初进入某公司实习,要接手开发公司的微信小程序,对于从未接触过微信小程序的菜鸟我来说,要快速上手,就得找个实战项目练习。
于是利用业余时间找到了这个课程,学习了从0创建开发账号到部署上线的整个过程。对微信小程序开发豁然开朗。学过VUE的同学,上手是很快的。
有需要的人可以去学习哦,这是某马培训的,讲的挺好,很适合初学者。
B站视频,放心点击。
课程视频地址:点我直达
接口文档地址:点我直达
收获到的知识
组件封装小程序同VUE类框架一样,也有组件概念,练习了复用组件,再次巩固了封装组件的思维。缓存Storage
都是微信小程序提供的原生api
异步缓存
wx.setStorage(Object object)
wx.getStorage(Object object)
wx.removeStorage(Object object)
同步缓存
wx.setStorageSync(string key, any data)
Object wx.getStorageInfoSync()
wx.removeStorageSync(string key)
组件
微信小程序提供了很多组件,如轮播图、scroll-view、rich-text、picker等
极大方便了开发过程防抖和节流
再项目中遇到了搜索商品事件,每输入一个字母都要请求服务器,为减少这种频率,就要用到节流防抖 防抖
网上好多又是封装又是return的写一堆,摒弃优雅的写法,写一下跟我一样的小白容易理解的写法,哈哈
**定义:**某一事件频繁触发,仅最后一次触发的事件生效。
对比代码,大白话讲解:定义timer计时,监听input的输入事件,计时器开启之前又重置了计时器。当第一次敲击键盘,到达计时器任务时会延迟1秒,倘若第二次距离第一次敲击键盘事件小于1秒,则会清除第一次的计时器,重新计时,以此达到减少频率的效果,仅最后一次触发有效。
<input type="text">
let timerlet input = document.querySelector('input')input.addEventListener('input', () => {clearTimeout(timer)timer = setTimeout(() => {console.log(input.value)//下面是执行请求服务器的过程}, 1000);})
节流
节流是指定时间内触发一次,有频率的进行事件触发。
利用闭包的机制,保存一个标志,来判断是否要触发某个函数
let input = document.querySelector('input')input.oninput= throttle(()=>{console.log(input.value);},1000)//下面是执行请求服务器的过程function throttle(fn, delay) {let valid = truereturn function () {if (!valid) {return }valid = falsesetTimeout(() => {fn()valid = true}, delay);}}
vant组件库
Vant 是有赞前端团队开源的移动端组件库,于 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。
组件库地址:点我直达页面间传值
跳转其他页面时,可以附带需要传入的参数。跟get传参是一样的,直接在连接后跟参数即可
如:?name=yuanxiaoshen&sex=boy
在另一个页面的onload(option)
事件的option即可拿到传过来的值。
个人博客:
欢迎留下足迹。