微信小程序实战教程，适合初学者快速入门。

项目预览

这是完成该微信小程序后的部分截图

关于该课程

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 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
组件库地址：点我直达
页面间传值
跳转其他页面时，可以附带需要传入的参数。跟get传参是一样的，直接在连接后跟参数即可
如：?name=yuanxiaoshen&sex=boy
在另一个页面的onload(option)事件的option即可拿到传过来的值。

个人博客：https://yuanxiaoshen.com
欢迎留下足迹。

微信小程序实战教程，适合初学者快速入门。相关推荐

微信小程序实战教程-闫涛-专题视频课程
微信小程序实战教程-38472人已学习课程介绍介绍微信小程序API,包括页面布局.网络交互.媒体文件.本地缓存.地理位置.WebSocket和传感器技术,后以翼健康为模板,开发一套 ...
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程(二) 上篇文章中,简单介绍了下小程序云开发的概念,还有开发工具的安装和配置,云开发环境已经搭建完毕. 本章主要内容:微信开发者工具如何使用,小程序云开发的基础目录结构 ...
微信小程序实战教程：模仿—网易云音乐（二）
接上一篇:微信小程序实战教程:模仿-网易云音乐(一) wxml进行渲染:  <view class="lyric-content" hidden ...
基于云开发的微信小程序实战教程（一）
基于云开发的微信小程序实战教程(一) 最近刚开发了款小程序,在开发过程中发现,基于云开发的教程资源不是很多,而且很不详细.所以边实战边总结了下云开发的简单教程,希望对你有所帮助. 本章主要内容:什么是 ...
微信小程序实战教程1503---生成二维码
在微信小程序中,如果我们可以自己将指定内容生成二维码,出示给别人,将是一个比较有用的功能.但是微信小程序API中,目前暂时还没有这个功能,但是我们可以通过变通的方法,来实现这一功能. 本文所提到的方法 ...
python微信小程序实例制作入门_python flask零基础打造微信小程序实战教程
资源目录: ├─python3+flask │ ├─第1章介绍 │ └─1-1 导学--Python Flask 构建微信小程序.mp4 │ ├─第2章微信小程序介绍 │ ├─2-1 小程序是什么 ...
微信小程序实战教程超级详细
1.首先创建小程序项目删掉三个文件夹里面的东西,后面重新创建 2.打开微信开发者工具打开项目找到app.josn 3.我需要三个页面,所以创建首页,地图,和用户 4.配置 vant weapp ...
微信小程序实战教程：模仿—网易云音乐(一）
初窥 todo: 添加音乐到收藏(最近)列表歌词滚动从一个hello world开始微信开发者工具生成目录如下: . |-- app.js |-- app.json |-- app.wxss ...
视频教程-微信小程序开发教程(第1篇)-微信开发
微信小程序开发教程(第1篇) 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试(软考)--"信息系统项 ...
小程序开发用什么编程语言_微信小程序开发教程是什么？费用多少？
微信小程序如今已经非常常见,渗透到了我们日常生活的方方面面,包括生活服务.出行.点餐.电商购物.企业展示--商家可以开发适合自己行业的小程序,以吸引线上用户,同时提高自身服务运营效率.不过这些不同种类 ...

微信小程序实战教程，适合初学者快速入门。

目录

项目预览

关于该课程

收获到的知识

微信小程序实战教程，适合初学者快速入门。相关推荐

最新文章

热门文章