哔哩哔哩那个有非常多的学习资源，挑了个听起来声音清脆的，又全面的来学习。[点击前往学习](https://www.bilibili.com/video/BV12K411A7A2?spm_id_from=333.337.search-card.all.click) ***** **22.5.08** 第一节 啥是小程序 就是微信推出的一个内部使用的类似于网站的功能。 老师巴啦啦了一个还不错的音乐类小程序，做的还挺精致，说学完就能做。 于是。 就决定是你了，皮卡丘！ ***** 第二节 项目介绍 讲道理，以前我要实现这一套。 用了很长时间。 这就是不好好学习的结果，工具知道的少， 效率超级低。 根据老师的语速，我直接1.5倍观看。 基本上的功能都有了，这么一套做下来估计对小程序也应该懂了。 ***** 第三节 相关资料说明 一般这样的学习视频配套的资料，看下面评论就可以获得很多网盘资源。 我的网盘： 链接：https://pan.baidu.com/s/1ixVgIzBGOJy3UHgbuUJRhg 提取码：hope 跟着视频一边学习一边敲，是最简单也是最有效的学习方式。 我直接用360下载一个微信小程序开发工具完事。 建议都用360下载，不然捆绑一堆软件清除起来也好烦人。 老师说他给的稳定。 那我就用老师的吧，要不然到时候一堆莫名奇妙bug打击我学习热情。 ***** 第四节 第一章 什么是小程序 终于进入正式环节了。 17年小程序就开始火爆了。 小程序有一堆，支付宝，钉钉，百度···但是他们的体质都干不过微信。 社交才是人类的刚需啊。 企业微信又被钉钉按在地上锤。 人类真有意思。 其实就是网页嘛。 现在app都可以用网页的代码跨平台编写，简单点的app开发成本大幅度下降。直接劝退很多想混日子的java和ios程序员。 张小龙说无需安装。 那是因为微信都这么大一坨了，再加老马也不答应啊。 其实就是个用微信内置浏览器运行的网页啊。 小程序要求体积不能超过1MB，否则审核不会通过。 2017年4月改进了，提升了1MB。 第二章 小程序可以干啥？ 1、作为app的补充，如果不想下载app，可以通过小程序完成最基础的功能。 2、通过微信上传播，更加快。 3、用户不常用，但是又必须得用的app，这时候装小程序ok。 4、连接线上线下。小商家也可以弄一个只属于自己的小程序，而不用搭载某个平台被狠狠地抽血了。 5、开发成本非常低。这但是最重要的。一般一个小程序，从0到1只需要一周到两周时间就可以完成。外包必备啊。 尤其是现在尼玛这么多第三方软件，一套开发app、小程序、公众号··· 不到两周时间，开发三个产品，然后卖个几千上万不等。 实际成本只有1000-5000··· 利润率直追卖白粉的了。 ***** 第五节 第三章 小程序开发资料 官网：https://mp.weixin.qq.com/ 小程序、公众号工作台。 然后就是注册账号。 第四章 开发小程序要储备的知识 flex布局-弹性布局 就是很简单的css布局，有菜鸟教程可以学习下，[http://www.runoob.com/w3cnote/flex-grammar.html](http://www.runoob.com/w3cnote/flex-grammar.html) 物理像素： 分辨率越高，物理像素点就越多，图像也就越清晰。 这个是真实存在的。所以叫物理像素。 设备独立像素&&css像素（俩经常互转）： 虚拟的，为了用技术语言进行描述而设计的单位。 dpr比 & DPI & PPI dpr: 设备像素比，物理像素/设备独立像素 = dpr,一般以Iphone6的dpr为准 dpr = 2. 比如：Iphone6的设备独立像素为：宽：375 长：667 单位px 那么物理像素就是750X1314，看起来很熟悉。 PPI: 一英寸显示屏上的像素点个数。 DPI: 最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰。 移动适配方案 经常会在面试被问得问题。 课程传授的两种方案： viewport适配 一通介绍没听懂，有点底层，就暂时忽略了，先有个概念。 实现方式 ``` <meta name="viewport" content="width=device-width,initial-scale=1.0"> ``` wps这个代码都不能复制出来，看来wps也是用的网络技术啊。 rem适配 用js动态调整css的变化。 一般都用别人写好的库，自己写的话又麻烦而且也不如别人的好用。 比如老师推荐的： lib-flexible+px2rem-loader 这是vue基本配置。 我不会vue。 ***** 第六节 小程序语法概述 留着明天看。 ***** **22.05.09** 实操新建小程序。 删除文件夹啥的要在硬盘里删，工具不能删。 而且要先把pages里面的东西删光，才能删掉pages ***** **22.5.18** 照着老师的视频敲完， 我惊奇的发现，老师设置页面height不可以，我就是可以。 纳闷。 回来找下原因。 可能规则改了吧，即使我把外围容器page给设置了百分之百。 页面也依旧要设置。 把第一个页面给敲出来了。讲的好详细呀。 ***** **22.5.19** 学习这个课程还是要有点基础的js、html、css基础的。 不过，问题不大。反正都是熟能生巧的事情，只要习惯就好了。 学习了下数据劫持和代理，都是基于js的object.defindProperty方法的get和set来进行实现的。 具体代码如下： ``` let data = { username:'curry', age:33 } let __this = {}; for(let item in data){ Object.defindProperty(__this,item,{ get(){ return data[item]; } set(newValue){ data[item] = newValue; } }) } __this.username = 'wade'; ``` 为什么要做数据劫持与代理呢？ 我个人觉得这是面向对象思路下的一种体现。 在这种思想的指导下，可以直接操作对象。 如果__this.username = this.data.username;这就成了new一个新对象，而无法在原有的对象上赋值了。那么很多面向对象的好处就没啥意义了。 如果对象复杂且量大的时候，那这种方式赋值会让人崩溃。 小程序里设置data的地方也是这样。 小程序提供了this.setData({msg:值})这样的方式。 而它们底层的实现，就是用了上述js代码。实现了直接操作原对象。 vue和react也是同样如此。 那么，为什么小程序就不用this.data.msg这样直接赋值呢？ 因为按照小程序设计，js是逻辑层，wxml是视图层，当视图层有变量使用的时候，比如{{msg}}，使用setData这个方法，可以同步修改逻辑层数据，异步修改视图层数据，这样就可以达到改完之后自动刷新的效果了。 而this.data.msg，就只会更改js值的数据，页面数据它是不会改的。 冒泡事件 事件会向父级浮动，bind方法不会阻止。 非冒泡事件 事件不会向父级浮动，catch方法会阻止。 WXML((WeiXin Markup Language):仿照html定义的一款自己的语言。 小程序的目标还挺远大，要做第一款自己的语言，打破国外语言技术垄断格局。感觉很好。 看到第13节了，已经完成课程的九分之一了！ 鼓掌鼓掌！ 额说是要学习，结果- - ***** **22.5.20** 路由跳转 调用微信内置对象进行跳转 生命周期 详解了各个钩子函数的执行时间。 了解了一下箭头函数。 ``` 普通函数 function(){} 箭头函数 ()=>{} ``` 注意的是箭头函数里的this是获取当前上下文的对象。而function里的this如果包含在一个wx对象中，那this获得的就是wx对象了。 把老师的代码敲一遍，实现下功能。 弹幕里好多说版本库不对，效果出不来的。我试试去。 不过看教学视频还是关弹幕好一些- -有点乱。 算了，还是开着弹幕，还好道友们指出了是微信更新了。要不然我按照视频打死也弄不出来- - 视频里的方法不能用了，开放了新的接口。 扒拉文档敲代码去。 ***** **22.05.21** 用新的方法实现了下登录，接下来去看轮播的实现。 我用箭头函数，在和onLoad平级的方法里，用this用不了。 看来箭头函数就是针对的被套在像是wx对象里用的。 开始参照之前做好的项目来实现自己的音乐小程序。 借助小程序提供的插件swiper， 轻松实现轮播图。 小程序真厉害。 然后知道了一款免费的跨平台开发工具：vscode。 微软果然财大气粗啊。 学习了如何使用阿里图标，又发现了一个强大的资源库。 之前交的钱，智商税了。 学习了css的布局样式：webkit-box