朋友們，很久不見，甚是想念~
前段時間因公司業務需求要開發小程序，大概做了有十天左右，在此將我使用小程序的一點心得拿出來給大家分享一下~
接觸小程序的第一感覺：
第一次寫小程序會有點小激動，第一次嘛，你懂的~
翻開小程序的文檔你會發現，我透，這簡直就是神物啊，各種組件應有盡有，輪播圖swiper，滾動容器scroll-view，等等好用的組件(還有map地圖組件，你敢信？)，還有無窮無盡的小程序自帶的API，連上拉加載下拉刷新都已經給你封裝好了，它還有自帶的模板template以及自定義組件component等等讓你享不盡的榮華富貴，我只有一個字，愛了~
由於我開發小程序也就開發了差不多十天左右的樣子，此篇僅作為記錄我在開發過程中的一些體驗以及遇到的一些問題，比如說像怎么用開發者工具去新建一個項目，如何跑一個基本的項目等等這些在此我就不做解釋了，所以會有點粗魯~
一、小程序的目錄結構
先說一下小程序的一個基本目錄結構以及每個文件的基本作用吧：
新建的一個處子小程序基本是長這樣的，接下來我們一層一層的剝開它的衣服
首先你要掌握以下知識點：①.json為配置文件②.wxml 為模板文件，也就相當於我們的HTML模板③.wxss 為樣式文件，相當於HTML的CSS樣式表④.js 為JS腳本邏輯文件，相當於HTML的js腳本
別急，接下來就讓我們一層一層的脫下它的衣服
①app.js文件：這里面放的是一些小程序邏輯，要注意：App()必須在app.js文件中注冊，並且不能注冊多個！我們可以在別的頁面去調用getApp()，然后去拿我們需要的一些東西(比如我們自己定義的globalData)，在此不做過多介紹，文檔里面都有~
②app.json文件：這里面放的是一些小程序的公共配置，比如每個頁面都需要在這個文件中進行注冊，小程序的主題風格，導航欄的背景色等等的一些公共配置
③app.wxss文件：這里面放的是一些小程序的公共樣式表，在這個文件中寫的樣式是一個作為公共樣式以供每個頁面都去使用的
④project.config.json文件：項目的配置文件，在“微信開發者工具”上做的任何配置都會寫入到這個文件，這個文件中會有一些針對各自喜好做的一些個性化配置，例如界面顏色、編譯配置、appid等等；所以我們在開發一個項目的時候，這個文件是非常重要的，它決定着你的小程序項目的一生啊~
⑤pages文件夾：你會發現這里面還有兩個文件夾，一個是index一個是logs，這個pages文件夾下面其實就是放着你的每一個頁面，每個頁面對應一個文件夾，然后每個文件夾下面會有四個基本文件：也就是我剛開始說的那四個知識點。
⑥utils文件夾：這個文件夾就是一個共用的邏輯庫，也就是我們的一些共用的邏輯文件可以統一放在這個文件夾下面，可以看到現在這個文件夾下面有一個util.js文件，里面放的是一個格式化時間的函數~
二、小程序的開發思想：
以我個人開發過程中的體驗以及之前對vue和react框架的使用來說，我個人理解小程序的開發思想也是基於MVVM的開發思想去進行開發的(其實本來就是這樣的:))，都是用數據去驅動，大概說一下我懟MVVM思想的理解吧：其實就是M模型、V視圖、VM視圖模型，VM也就是視圖模型層，當Model層改變的時候會引起視圖模型層的改變，視圖層也就會響應式的發生改變，會自動去更新DOM的狀態，也會讓開發者從頻繁的DOM操作中解脫出來~
不熟悉MVVM思想的同學可以戳這個鏈接，講的挺好的：https://www.cnblogs.com/xueduanyang/p/3601471.html
三、小程序的一生
小程序也是人，它也有自己的一生，也有屬於自己的一套生命周期
1. 小程序的生命周期是在app.js文件中里面去調用的，
App(Object)函數用來注冊一個小程序，接受一個Object參數，指定其小程序的生命周期回調；onLaunch會在小程序初始化的時候觸發並且只觸發一次，onShow會在小程序啟動的時候或者從后台進入前台的時候觸發，onHide會在小程序從前台進入后台時觸發等等
2. 頁面的生命周期：
這兩張圖都是從小程序開發者文檔上面扒下來的，最好的理解辦法就是自己去打印一遍看一下每個方法都是在哪個階段去執行的，在此我就不做打印給大家證明了，建議大家自己打印着去理解一下，其實本人目前對小程序的生命周期還不是特別的熟悉，因為項目中用到的不多，等我后期做的時間長了給大家補一篇小程序生命周期的詳解~
正如官網所說，https://developers.weixin.qq.com/miniprogram/dev/guide/framework/page-life-cycle.html，嗯~待我再練十年，應該會學會這門武功的
四、 目前用到的小程序的一些貨(因為本人最近也在搞vue，所以會覺得小程序的一些東西會和vue比較像)
1. template：小程序有自己的模板，當我們的dom結構比較類似的時候，可以使用template模板去寫一套公用的模板，減少代碼的冗余度，非常方便
2. 小程序自定義組件：有時候模板可能會滿足不了我們的需求，但是小程序可以寫自定義組件，每個自定義組件可以寫properties去接受傳進來的參數，observers里面去寫監聽某個值的改變(類似於vue中的計算屬性)，也可以自己去定義自己的數據data，還可以在methods里面寫一些方法，通過this.triggerEvent去發送給父組件一些信息(類似於vue中的$emit)，等等等等，相信我，小程序的自定義組件，你會愛上它的。
3. 小程序路由：小程序的路由其實很簡單，和vue差不多，可以通過組件navigator去直接進行跳轉，也可以寫成編程式導航去進行跳轉，這是本人在學習過程中做的一些很基本的總結(http://note.youdao.com/noteshare?id=14e2651402bbb641738af242447c8ea1)，或者大家直接去開發者文檔看就行，有頁面之間的跳轉、傳參等等，反正你需要的文檔中都有的~
4. rich-text富文本組件：當你想要像使用vue中的v-html那種可以解析html字符串的功能的時候，可以考慮來看看它，它就在原地等你~
5. view、text、scroll-view組件等：小程序里面是沒有div、p、span這種標簽的，他們使用的是自己的組件，類似於原生的那種，就像本人在RN的時候那樣，目前本人基本也就用用view和text組件了~
6. 小程序的一些API：獲取dom節點的一些信息
wx.createSelectorQuery().select('#the-id').boundingClientRect(function (rect) { rect.id // 節點的ID rect.dataset // 節點的dataset rect.left // 節點的左邊界坐標 rect.right // 節點的右邊界坐標 rect.top // 節點的上邊界坐標 rect.bottom // 節點的下邊界坐標 rect.width // 節點的寬度 rect.height // 節點的高度 }).exec()
還有獲取wx.request，類似於localstorage那種的本地存儲功能wx.setStorage以及wx.getStorage，還有一些路由跳轉的API等等，打電話wx.makePhoneCall，獲取當前地理位置wx.getLocation，獲取系統信息wx.getSystemInfo，等等等等~反正你需要的，它都有，就是這么的帥氣，，，不用記，開發者文檔在手，需要哪個找哪個，媽媽再也不用擔心我學不好小程序啦
7. 小程序中的wx:if，wx:el，wx:for，wx:。。。。。。。。。，和vue都差不多，用起來也挺好用的，小程序也是在兩個花括號{{}}中去寫變量的，但是花括號中不支持一些函數比如數字類型轉換啊等等，期待小程序后期會支持吧~
8. 要注意小程序中模塊只有通過 module.exports 或者 exports 才能對外暴露接口
9. 小程序中的data以及setData：小程序中的data值可以通過setData({})去進行相應，setData支持傳入第二個參數，傳一個回調函數，可以在里面拿到更新后的data，類似於react中的setState的那一個套路
10. 小程序中綁定事件用bind:tap，還有很多什么冒泡啊捕獲啊，這些都直接翻文檔就行，用到哪個找哪個，美得很~
11. 好吧，其實也沒用到太多東西，未完待續~~~~~
五、在小程序中遇到的一些坑：
俗話說的好，沒踩過坑的人不是好人，嗯，我是個大好人~~~，記錄下我在開發小程序的過程中遇到的一些坑：
1. 注意小程序中的背景圖片只能用線上的，不能使用本地圖片當背景圖
2. 相信我，當你感覺自己的代碼沒錯，邏輯沒錯，什么都沒錯的時候，看看你用的是不是text組件，是的話就換成view組件試試，你會回來贊我的
3. 在我使用rich-text的時候，就很納悶，怎么到我這就解析不了html了呢，好吧，看了文檔才發現，它不支持view和text組件，它居然要寫div和span這種標簽類型的，嗯，蒂花之秀~
4. 注意，小程序的組件和vue的組件不一樣，vue解析出來就是你組件中的結構，小程序的最外層會有一個你的組件，這個組件是不能加樣式的~
5. 有時候你如果感覺是很奇葩的bug，打開手機，真機調試，你會發現其實是正常的，有些東西小程序開發者工具解析是有問題的，或者嘗試把組件換成view試試也行~
6. 當你跳轉路由的時候，如果跳轉的頁面他不是一個純純的男孩兒，比如他是底部tabbar的頁面，你會發現，根本跳不過去，這個時候你可以使用wx.switchtab的方式去進行跳轉，不成功我吃屎好吧~
目前遇到的坑暫時這么些，有的想不起來了，等我，后續我會回來繼續補坑的~
六、個人的一些看法：
1. 小程序中沒有類似於vuex那種配套的狀態管理，不過可以把類似於redux或者mox這樣的狀態管理庫接入小程序，期待小程序能出一套自身的狀態管理，要不然數據的存儲和流動有時候還是很不方便的，需要借助外部的力量，你懂的，我只想用你自己，答應我別讓我用別人的東西好嗎，求你了小程序~
2. 自定義組件用着沒有想vue中組件用着方便~
3. 小程序不支持sass，我們需要通過像gulp這樣的東西去編譯sass然后解析打包才能解析成小程序支持的wxss
4. 希望能出一個類似於vue中的computed計算屬性這樣的東西，要不然數據的處理有時候會很惡心很惡心
以上只是我自己的一些使用后的想法而已，還是好評的(畏懼臉)~
七、寫在最后：
因為本人目前對小程序的開發還只是剛開始，待以后有時間了使用多了以后會回來更新這篇文章的，整體來說在使用的過程中還是挺順手的，包括它的思想啊，綁定事件的套路，生命周期，組件等等，只不過有的地方可能是因為第一次用所以會覺得不好用，還有一些坑需要繼續去踩~
最后，答應我，作為一個程序員不要總是熬夜好嗎，要不然會像我一樣頭發越來越多的，沒事多喝喝酒多抽抽煙，做一個自律的程序員，一切都會好起來的~
這篇文章后期使用小程序多了以后我會回來繼續添加內容的，等我~