嗶哩嗶哩那個有非常多的學習資源，挑了個聽起來聲音清脆的，又全面的來學習。[點擊前往學習](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