一、序
微信小程式，估計大家都不陌生，現在應用場景特别多。今天就系統的介紹一下小程式開發。注意，這裡隻從項目代碼上做解析，不涉及小程式如何申請、打包、釋出的東西。（這些跟着微信官方文檔的流程走就好）。好了廢話不多說，看目錄。
注: 小程式是一套特殊的東西，融合了原生和web端。他是一個不完整的浏覽器對象，是以很多DOM 、 BOM 的東西無法使用，但是他又通過微信APP實作了多線程。
二、 目錄
1、如何建立一個微信小程式
2、準備工作（讓編譯器支援小程式開發，我用的webstrom，hbuilderX也不錯）
3、基礎檔案目錄詳解
4、建立常見的項目級别目錄
5、基礎文法詳解
6、實作頁面跳轉
7、wx.request 的封裝
8、使用 npm （引入 weui、moment等插件）
9、封裝微信小程式可複用元件
10、總結
三、如何建立小程式
很簡單，首先下載下傳微信開發者工具，下載下傳穩定版本的就好。 下載下傳 然後，建立小程式，可以參考下述圖檔：
注意正式的小程式需要審批，拿到正式的APPID，我們測試的或者暫時沒有的可點那個測試的appid，小程式模闆選擇預設就好。按照這樣的流程走完，我們就建立完一個小程式了。
四、webstrom支援小程式開發
建立完小程式之後，我們先不着急開發。工欲善其事必先利其器，微信開發者工具有點卡，而且功能少，開發效率很低。是以我們還是改造自己的編譯器，這裡隻介紹2種方法。一是 hbuilderX，他有支援小程式的子產品，很小巧的一款編譯器； 二是 webstorm，我用的他，在這介紹一下配置的方法，其他的大家自行google吧。
1、支援wxml和wxss的檔案類型，有文法高亮。 打開webstorm編譯器，依次點選 檔案 -- 設定 -- 編輯器 -- 檔案類型 ， 找到 html檔案，添加 *.wxml; 找到Cascading style Sheet ，添加 *.wxss。就OK了
2、支援小程式代碼提醒。 下載下傳 這個檔案，然後，把他放到一個顯眼的地方； 然後， webstorm 點選 檔案 -- 導入設定 ，找到這個下載下傳的檔案，點選确定即可。
以上就是webstorm支援小程式文法的操作。
五、基礎檔案目錄詳解
然後解釋一下小程式的目錄結構。
project.config.json: 小程式的配置檔案，包含項目打包配置、上傳代碼自動壓縮等等，是一些開發、打包之類的配置。
app.json: 目前項目的配置檔案。包括項目的頁面引入、導覽列顔色、導覽列标題 等等，是項目具體到代碼開發上的配置。介紹幾個配置：
pages： 包含的頁面。每次新增頁面都得在這裡引入，否則新頁面的json配置等無法生效。 注意pages中頁面先寫的先渲染，是以數組第一條也就是我們的首頁。
window： 配置所有頁面導覽列字型、顔色、背景色等
app.js: 小程式入口檔案。生成小程式執行個體，App({}), 通常在這擷取使用者資訊、授權資訊、定義全局變量等。
app.wxss: 小程式全局 style 檔案。對整個項目頁面生效。通正常定項目的 字型、基礎顔色，定義一些公共樣式。
utils: 工具函數目錄。通常用來放一些公共的js方法。比如封裝的request請求，一些别的處理資料什麼的方法。
pages: 小程式的頁面目錄。所有的小程式頁面，都寫在這裡面。
六、完善項目目錄
上邊大緻解釋了一下小程式的基礎檔案，現在按照常見的規範完善一下項目目錄，這裡面包含一些個人見解，有需要的參考即可。先看一下結果：
現在解釋一下這些目錄：
components： 我們封裝的小程式可複用元件。
constants： 一些項目中的常亮。
image： 用到的圖檔。
services： 用到的所有接口目錄
大緻就建立了這幾個，如果有别的需求，根據自己的情況增加。
七、基礎文法詳解
現在大緻解釋一下小程式的文法。首先， 建立新頁面，預設都建立 *.wxml *.wxss *.js *.json 和我們平時寫的代碼差不多，都是html js css，多了個json配置檔案
*.json：常用的屬性有2大塊，navigationBarTitleText 相關的設定頂部标題的， usingComponents 引用的元件
*.js： getApp() 擷取小程式執行個體，拿全局變量等； Page({}) 建立頁面； data 目前頁面的變量；onLoad 生命周期，頁面加載完畢。
*.wxml：注意，小程式支援的标簽很少，像 span 是支援的，div不支援，一般用view代替塊級，span、text 代替行級。
*.wxss：大部分css選擇器不支援，支援的好像才5個，想支援less等得自己配置
八、實作頁面跳轉
和通常的web開發一樣，小程式頁面跳轉頁分2中，wxml中的vavigator标簽，以及js的navigator相關的api。路由跳轉的方法有好幾個，這裡不一一贅述了，常用的直接跳轉
onLoad: function (options) {
console.log(options)
},
九、wx.request 的封裝
在utils中建立request.js，簡單封裝了一下，一些資料要全局配置的都引進來，然後做了些錯誤的統一處理，沒什麼難度，不過要特别注意一下cookie的攜帶。具體代碼如下：
然後我們使用的時候直接使用封裝好的request方法，這樣所有的api就封裝成一個個函數。我們在頁面中直接import引入調用即可。
十、使用 npm （引入 weui、moment等插件）
因為小程式使用的是不完整的浏覽器對象，是以很多js包都是不好使的，比如jquery之類的。是以npm基本是廢了，能用的依賴包很少，具體哪些能用得自己發掘了。這裡還是要介紹一下小程式如何使用npm，畢竟有些包還是要用的。
1、打開 微信開發者工具 -- 點選 詳情 -- 勾選 使用npm子產品
2、打開指令行，進入項目的根目錄下， npm init 初始化npm
3、npm i 。。。安裝你需要的依賴
4、打開 微信開發者工具 -- 點選 工具 -- 點選 建構npm。 此時小程式會将 node_modules 檔案編譯打包，生成新目錄 miniprogram_npm ，
5、在需要用到的頁面的js檔案中，const moment= require('moment') 引入，直接使用即可
6、最後記得忽略檔案。建立 .gitignore 檔案，node_modules 、 package_lock.json 等檔案不需要上傳，最好隻保留小程式的npm建構包，用什麼依賴也是的那個下載下傳。這個到不是必須的
ps: 特殊注意一下weui的引入，這個ui庫是純css的，沒有js檔案，是以他沒法用npm引入，而是直接下載下傳檔案，我直接丢到根目錄下，然後在 app.wxss 檔案的開頭引入
十一、封裝微信小程式可複用元件
現在篇幅有點太長了，這個另寫一篇，有需要的可以去看。
十二、總結
以上就是我開發小程式的一些經驗和總結，希望能幫到你。另外，整套程式的骨架（業務代碼删掉了）我會上傳到github，下載下傳 有需要的可以去下載下傳，記得點個贊，哈哈。
最後，我會另寫一篇部落格，寫一下 如何封裝小程式 元件，并附上 我開發小程式遇到的坑，以及對應的解決方法。