一、小程式介紹
自2016年1月9日微信小程式(以下簡稱小程式)釋出以來，迅速火遍朋友圈，我也前後看了很多關于小程式的文章，自己也嘗試着做了一點自己的小程式，最後的感受也讓我加深了之前在某篇文章上看到的一句話：“我們可能高估了小程式在短時間内的威力，同時也很可能低估了他長時間的潛力”。到現在我覺得我們完全可以将兩個“可能”去掉，為什麼這麼說呢？首先，衆所周知小程式隻是簡易版的app，優點在于不用安裝，即用即走，差別于企業訂閱号、公衆号的一種全新與使用者連結的方式，無需注冊、無需登入下載下傳，超越H5，打開界面速度快，界面操作流暢，但這同時也就說明了他的限制性。由于其“輕”的特點，就容不下那些比較“重”的應用，如果有些軟體你每天都要用，經常都要用，那麼需要讓你在用之前以微信作為入口你會覺得很不友善，而且他很難有那些複雜的服務等功能，是以有人又說小程式相對比較雞肋，棄之卻又可惜。的确，并不是所有應用都适合做小程式，小程式是有他的承載範圍的，做好了這個範圍以内的程式就非常完美，超過了這個範圍還是老老實實做原生app去吧。
開發一個小程式首先需要注冊一個appID，這一系列操作我就不再做過多贅述了，如果你是自己做小程式練手，可以在自己以及你綁定的10個開發者和20個體驗者手機裡檢視效果并使用。
二、小程式官網demo解析
首先介紹一下代碼檔案，demo裡面你能明顯看到五個檔案夾和兩個個檔案，app.js是整個項目的入口檔案，你的全局方法和屬性都可以放在這裡面，在任何需要的網頁裡直接調用即可。app.json存儲的是所有頁面的配置資訊，也就是說小程式裡所有的頁面都要在這裡面進行配置，配置的方法看完demo你就懂了。app.wxss是一個css檔案，代碼的編寫跟css3完全一樣，他是全局樣式，所有頁面無需引用自動作為第一個樣式表加載，其他兩個檔案是項目相關的一些配置資訊，初學一般不用動他。再說說檔案夾，utils一般是定義一些工具方法的，所有頁面都要放在pages檔案夾下，pages/index.wxml是小程式的首頁，至于wxml檔案将在下面進行詳細說明。
微信小程式官方demo
下面我們解釋一下在小程式裡每個檔案存在的意義。首先wxml相當于網頁中的html，不過他是xml。xml和html相信不需要我多說，小程式所采用的xml有更多的限制，标簽更少更簡潔。每一個頁面會對應與其相同名字的js、json和wxss檔案。js檔案裡是一些屬性和方法，json檔案裡是目前頁面的一些配置資訊，需要的話可以加上，不寫空着也是沒有問題的。wxss當然就是樣式表了，這些檔案都不需要手動引入，而是在編譯的時候就自然加載進去了。
三、開始開發小程式
現在我們來建立一個頁面，在pages上點選建立目錄test，再在test上建立index.wxml完成以後回到app.json，在pages數組裡加上”pages/test/index”并儲存，即可看到test下已完成配置，如下圖所示：
建立test頁面
這樣我們就可以開始寫業務了。打開index.wxml寫頁面，如果網頁上的資料是由index.js提供，如下圖：
index.js書寫
那麼我們需要把這些資料并展示在頁面上，無可厚非需要循環，在說循環之前我們先來說說資料綁定。資料綁定使用 Mustache 文法(雙大括号)将變量包起來，可以作用于index.wxml中
index.wxml代碼如下
| |
index.js代碼如下
| |
結果會在頁面中顯示文字：Hello wechat applet!
這就是資料綁定，那麼這個會了之後要将上述複雜資訊展示到頁面用到的就是清單渲染：
在元件上使用wx：for
wx:for-item 可以指定數組目前元素的變量名，
wx:for-index 可以指定數組目前下标的變量名：
代碼如下圖
清單渲染
當然，如果需要過濾資料也可以用到條件渲染wx:if，文法為wx:if=”“，用法很簡單，官方文檔講解也非常清楚，這裡就不舉例說明了。
下面再來說一說小程式對接背景，發送請求這一部分内容，也就是
wx:request
的用法。首先需要在開發者工具配置資訊中輸入request合法域名，也就是請求伺服器的位址，域名必須是滿足https協定，如果是自己開發使用，也可以在菜單欄的設定裡找到項目設定，勾選
不校驗合法域名
這一項。使用起來跟jquery的ajax極為相似，話不多說，直接上代碼：
request請求
這是頁面初始化是的request，直接請求資料，即為GET請求(因為wx:request預設極為GET請求)，是不是跟ajax極為相似？
下面是POST請求
post請求
需要注意的是post請求與GET請求的請求頭不一樣，上圖我做了框選标注，如果混用會導緻請求失敗，需要留心一下。
關于wxss，他與css3沒有任何差別，如果你需要在局部幾個頁面引入同一張樣式表，可以在本頁面同名的wxss檔案中使用
@import "common.wxss";
語句進行引入，可以出現在任何位置。
以上就是本篇文章的所有内容了，學會了這些，已經可以編寫一個屬于你自己的小型的微信小程式了，祝大家成功！
代碼不是萬能的，但不寫代碼是萬萬不能的
2020/03/12 Dary記