從零開始學作微信小程序，看這些就夠了！

隨着正式開放公測，微信小程序再次萬衆矚目，愈來愈多的企業和我的涌入到小程序開發的大軍中。小程序到底是什麼？適合作小程序的產品有哪些？作小程序須要提早準備什麼？如何零基礎學作小程序？此文，將列出OSC上優質的資源供大學瞭解和學習。

1、新手入門

有關小程序的入門，首選天然是官方文檔。 它解釋了基本概念，有簡單的設計指南和開發教程，能讓你很好地對小程序有初步理解。 

• 微信小程序產品定位及功能介紹
• 微信小程序設計指南
• 微信小程序簡易教程
• 微信小程序運營規範

看完這些你會發現，小程序主打的是比APP更輕量的形態，簡單的開發，卻接近app的體驗，無需下載，掃碼打開。那麼，一些剛需且高頻的金融類、電商類、教育類等實際上是不適合接入小程序的。這些對功能的要求都很重，小程序難以承載。並且小程序不能像微信公衆號同樣被關注、羣推送消息以及轉發朋友圈，這也就意味着，它沒有辦法獲取用戶更多的信息，也不便於深度營銷。

小程序適用哪些產品？

• 功能很輕，用完即走的，如剛需且低頻的服務類、旅遊類等
• 基於社交場景的輕應用，或者說基於輕社交的應用
• 非即時、可異步的應用
• 初創型企業的MVP產品
• 開發和設計能力有限的產品
• 以及更多……

這些不錯的資源你可能也會感興趣：

• 【微信小程序開發•系列文章一】入門，這篇是 jsongo0 編寫的系列文章的第一章，包含了小程序的介紹和前期準備工做。
• memda 的 5款微信小程序開發工具使用報告，能夠幫助你提早選擇合適的開發工具。
• 騰訊Bugly 的 聊一聊微信小程序，這篇文章裏有多位開發人員對小程序的見解，以及利弊探討等等，能更好的理解小程序理念和適用場景。
• 小程序的 API 文檔 （非官方）。

2、開發實戰

從9月22日凌晨微信小程序開始內測，就有很多開發者搶先進入小程序進行體驗，並發表了大量的開發實戰文章。這其中，有針對各個步驟、環節詳細的開發教程、有針對單個項目的實踐經驗，有系列，有單篇……但對於初學者來講，都是極具備參考意義的資源。

一、博卡君 小程序開發系列教程：

在小程序公佈內測不到10小時內即「神速」推出的開發系列教程，轟動一時。該系列內容從基礎知識到項目實例都有詳細表述，博主每日吐血趕稿，可歌可泣。:)

• 全球首個微信小程序（應用號）開發教程！通宵吐血趕稿 —— 序言、準備工做、項目構架
• 第二彈！全球首個微信小程序（應用號）開發教程 —— 項目實例：結構以及配置、首頁面開發
• 第三彈！全球首個微信小程序（應用號）開發教程 —— 項目實例：名片夾詳情頁、我的頁面開發
• 第四彈！全球首個微信小程序（應用號）開發教程 —— 項目實例：編輯名片頁面開發
• 第五彈！全球首個微信小程序（應用號）開發教程 —— 項目實例：分組開發與左滑功能實現
• 第六彈！全球首個微信小程序（應用號）開發教程 —— 項目實例：拍照收納開發以及刪除名片等

二、 jsongo0 小程序開發系列教程：

和博卡君更偏向項目實例的講解不一樣，jsongo0的系列文章更偏向從理論着手，對小程序各個特性、功能、版塊進行了詳細的分析與解讀，並賦予獨有的實踐思路，內容詳細全面，值得深看。（第一章在「新手入門」部分）

• 【微信小程序開發•系列文章二】視圖層
• 【微信小程序開發•系列文章三】數據層
• 【微信小程序開發•系列文章四】模塊化
• 【微信小程序開發•系列文章五】主界面
• 【微信小程序開發•系列文章六】生命週期和路由
• 【微信小程序開發•系列文章七】websocket

三、騰訊Bugly 小程序開發思考總結：

本文針對做者本身開發的「信用卡還款」項目，進行實踐總結和思考，從建立項目，到編寫代碼，到運行、生成等等，整個過程都進行了詳細的記錄和說明，值得參考。

• 微信小程序開發思考總結——騰訊「信用卡還款」項目實踐

四、秀傑 小程序開發系列教程：

一樣是實戰系列開發教程，針對記帳應用進行了詳細的講解。做者在更新該系列的同時，還更新了開發新聞客戶端、開發加法計算器應用、實現購物車頁面等實戰課程，實力毋庸置疑。

• 微信小程序實戰課程之記帳應用開發 
• 微信小程序實戰課程之記帳應用開發 —— 用戶註冊與登陸
• 微信小程序實戰課程之記帳應用開發（續）—— 實現集成日期組件
• 微信小程序實戰課程之記帳應用開發（續二）—— 服務端登陸篇
• 微信小程序實戰課程之記帳應用開發（三）—— 服務端實現帳目CRUD
• 微信小程序實戰課程之記帳應用開發（完結）—— 對接服務端帳目CRUD

這些不錯的資源你可能也會感興趣：

• EarlGrey 的 手把手教你微信小程序開發，參考Demo一步一步實現小程序開發。
• 用 cnode 社區 api 作微信小應用 實例教程，兩位老司機主講。
• andot 的 如何在微信小程序中使用 Hprose，聽說是獨門絕技。
• 風程序 的 微信小程序開發教程，步驟都列出來了。
• Phodal 的 使用 WebStorm 讓你的「微信小程序」運行在Chrome瀏覽器上。

3、DEMO 源碼

在實戰之初，有些源碼可以參考那真是極好的。目前碼雲上公佈源碼的和小程序相關的Demo已經很是很是多，各個類型的都有，在此僅列出部分，更多可在碼雲上搜索。

一、wmusic —— 凌晨一點寫東東

微信小程序版簡易情緒播放器 Demo

二、finance —— 黃秀傑

上文提到的實戰課程之記帳軟件開發 Demo。該做者還發布了靈犀新聞客戶端、靈動電商開源系統等等基於小程序的 Demo 源碼，以及下拉菜單、單選按鈕等組件源碼，均可去看看。

 

三、weixin —— zcoco

仿【微信】APP 

四、WechatSmallApps —— oopsguy

豆瓣圖書+知乎日報 Demo

 

五、weixincalculator —— Edik

計算器 Demo

六、wxapp-Breakfast —— hayeah

小林早廚 Demo

七、SmallAPP —— qieangel2013

購物 Demo

4、教學視頻

在參考文字的操做過程當中可能會出現一些難以發現的小問題，致使最終跑起來會有點瑕疵。所以，對照視頻進行操做不失爲更直觀的學習方式。

一、博卡君 小程序 Demo 視頻

在內測期間更新完多篇開發實戰教學文章後，博卡君發佈了 Demo 的演示視頻，並對系列教程進行了總結，發表了開發感悟。在小程序正式公測後，再次更新了項目真機實測 Demo 視頻。

視頻地址：

• 博卡君微信小程序 Demo
• 名片盒真機實測 Demo

二、秀傑 小程序加法計算器視頻

微信小程序（應用號）零基礎課程之加法計算器應用。

視頻地址：

• 加法計算器應用演示視頻