微信小程式入門系列簡易教程。自1月9日微信小程式(以下簡稱小程式)發布以來，迅速火遍朋友圈，我也前後看了很多關於小程式的文章，自己也嘗試著做了一點自己的小程式，最後的感受也讓我加深了之前在某篇文章上看到的一句話：「我們可能高估了小程式在短時間內的威力，同時也很可能低估了他長時間的潛力」。到現在我覺得我們完全可以將兩個「可能」去掉，為什麼這麼說呢?首先，眾所周知小程式只是簡易版的app，優點在於不用安裝，即用即走，區別於企業訂閱號、***的一種全新與使用者鏈結的方式，無需註冊、無需登入**，超越h5，開啟介面速度快，介面操作流暢，但這同時也就說明了他的限制性。由於其「輕」的特點，就容不下那些比較「重」的應用，如果有些軟體你每天都要用，經常都要用，那麼需要讓你在用之前以微信作為入**會覺得很不方便，而且他很難有哪些複雜的服務等功能，所以有人又說小程式相對比較雞肋，棄之卻又可惜。的確，並不是所有應用都適合做小程式，小程式是有他的承載範圍的，做好了這個範圍以內的程式就非常完美，超過了這個範圍還是老老實實做原生app去吧。
開發乙個小程式首先需要註冊乙個appid，這一系列操作我就不再做過多贅述了，如果你是自己做小程式練手，能找到某個工商營業執照號碼也是可以的，不能提交審核，但能在自己以及你繫結的10個開發者和20個體驗者手機裡檢視效果並使用。
首先介紹一下**檔案，demo裡面你能明顯看到三個資料夾以及三個檔案，app.js是全域性的js檔案，其實也是乙個json，你的全域性方法和屬性都可以放在這裡面，在任何需要的網頁裡直接呼叫即可。app.json儲存的是所有頁面的配置資訊，也就是說小程式裡所有的頁面都要在這裡面進行配置，配置的方法看完demo你就懂了。app.wxss是乙個css檔案，**的編寫跟css3完全一樣，他是全域性樣式，所有頁面無需引用自動作為第乙個樣式表載入。再說說資料夾，image就不用說了，當然是，不同的是所有頁面都要放在page資料夾下，page/index.wxml才是整個小程式的首頁，至於wxml檔案將在下面進行詳細說明。
下面我們解釋一下在小程式裡每個檔案存在的意義。首先wxml相當於網頁中的html，不過他是xml。xml和html相信不需要我多說，小程式所採用的xml有更多的限制，標籤更少更簡潔。每乙個頁面會對應與其相同名字的js、json和wxss檔案。js檔案裡是一些屬性和方法，json檔案裡是當前頁面的一些配置資訊，需要的話可以加上，不寫空著也是沒有問題的。wxss當然就是樣式表了，這些檔案都不需要手動引入，而是在編譯的時候就自然載入進去了。
現在我們來建立乙個頁面，在page上點選新建目錄test，再在test上新建index.wxml完成以後回到app.json，在pages陣列裡加上"page/test/index"並儲存，即可看到test下已完成配置，如下圖所示：
這樣我們就可以開始寫業務了。開啟index.wxml寫頁面，如果網頁上的資料是由index.js提供，如下圖：
那麼我們需要把這些資料並展示在頁面上，無可厚非需要迴圈，在說迴圈之前我們先來說說資料繫結。資料繫結使用 mustache 語法(雙大括號)將變數包起來，可以作用於：
index.wxml中：
}index.js中
page(}"，用法很簡單，官方文件講解也非常清楚，這裡就不舉例說明了。
學過vue或者angular的童鞋就會發現，其實小程式很多用法都是借鑑了這兩個框架，雖然沒有雙向繫結，但用起來也十分便捷。
下面再來說一說小程式對接後台，傳送請求這一部分內容，也就是wx:request的用法。首先需要在開發者工具配置資訊中輸入request合法網域名稱，也就是請求伺服器的位址，網域名稱必須是滿足https協議。使用起來跟jquery的ajax極為相似，話不多說，直接上**：
這是頁面初始化是的request，直接請求資料，即為get請求(因為wx:request預設極為get請求)，是不是跟ajax極為相似?
下面是post請求：
需要注意的是post請求與get請求的請求頭不一樣，上圖我做了框選標註，如果混用會導致請求失敗，需要留心一下。
關於wxss，他與css3沒有任何區別，如果你需要在區域性幾個頁面引入同一張樣式表，可以在本頁面同名的wxss檔案中使用@import "common.wxss";語句進行引入，可以出現在任何位置。
以上就是本教程的所有內容了，學會了這些，已經可以編寫乙個屬於你自己的小型的微信小程式了，祝大家成功!
微信小程式開發入門教程
本系列教程將引導你完成如下任務 新增小程式示例demo到專案 體驗小程式常用元件及介面 第二章 新增小程式demo專案 啟動開發者工具後，如下圖所示 點選確認登入後，除錯型別選擇 本地小程式專案 點再擊新增專案 專案配置時 專案名稱，可以填 方倍工作室小程式開發入門教程 專案目錄選擇官方demo解壓...
微信小程式入門
標籤 view text 語法 條件渲染 view view else view 列表渲染 for wx key view for wx for item myitem wx for index myindex text 模板template 定義 template name temp view t...
微信小程式入門
pages 存放頁面的目錄 utils 存放自定義util工具的目錄 project.config.json 專案配置檔案 sitemap.json關於本檔案的更多資訊，請參考文件 專案中檔案，保留project.config.json 和 sitemap.json即可，其他的都可以刪除然後自行建立...