人人IT網

人人IT網

當前位置: 主頁 > 編程語言 > WEB >

從零開始學做微信小程序,看這些就夠了!

時間:2016-12-03 01:01來源:Internet 作者:Internet 點擊:
從零開始學做微信小程序,看這些就夠了!   隨着正式開放公測,微信小程序再次萬眾矚目,越來越多的企業和個人涌入到小程序開發的大軍中。小程序究竟是什麼?适合做小程序的產品有哪些?做小程序需要提前准備

從零開始學做微信小程序,看這些就夠了!

 

隨着正式開放公測,微信小程序再次萬眾矚目,越來越多的企業和個人涌入到小程序開發的大軍中。小程序究竟是什麼?适合做小程序的產品有哪些?做小程序需要提前准備什麼?如何零基礎學做小程序?此文,將列出OSC上優質的資源供大學了解和學習。

一、新手入門

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

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

小程序适用哪些產品

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

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

二、開發實戰

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

1、博卡君 小程序開發系列教程:

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

2、 jsongo0 小程序開發系列教程:

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

3、騰訊Bugly 小程序開發思考總結:

本文針對作者自己開發的“信用卡還款”項目,進行實踐總結和思考,從創建項目,到編寫代碼,到運行、生成等等,整個過程都進行了詳細的記錄和說明,值得参考。

4、秀傑 小程序開發系列教程:

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

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

三、DEMO 源碼

在實戰之初,有些源碼能夠参考那真是極好的。目前碼雲上公布源碼的和小程序相關的Demo已經非常非常多,各個類型的都有,在此僅列出部分,更多可在碼雲上搜索。

1、wmusic —— 淩晨一點寫東東

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

<iframe id="iframe_0.930121395545076" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 384px; height: 519px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22https://static.oschina.net/uploads/space/2016/1108/190405_DVaQ_2896879.gif?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.930121395545076',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

2、finance —— 黃秀傑

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

<iframe id="iframe_0.5731792137516756" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 686px; height: 1195px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22https://static.oschina.net/uploads/img/201609/29105311_kzIA.png?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.5731792137516756',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe> <iframe id="iframe_0.36252716393977735" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 640px; height: 1118px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://static.oschina.net/uploads/img/201611/09100604_tSaK.jpg?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.36252716393977735',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

3、weixin —— zcoco

仿【微信】APP 

<iframe id="iframe_0.288903416083504" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 556px; height: 877px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://git.oschina.net/uploads/images/2016/0925/142044_0b6d30e2_102285.png?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.288903416083504',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

4、WechatSmallApps —— oopsguy

豆瓣圖書+知乎日報 Demo

<iframe id="iframe_0.23149348307646567" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 332px; height: 579px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://static.oschina.net/uploads/img/201611/09100604_9qwW.jpg?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.23149348307646567',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe> <iframe id="iframe_0.4143716730099074" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 335px; height: 580px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://static.oschina.net/uploads/img/201611/09100604_UHDs.png?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.4143716730099074',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

5、weixincalculator —— Edik

計算器 Demo

<iframe id="iframe_0.5398929852075265" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 430px; height: 673px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://git.oschina.net/uploads/images/2016/0926/223341_abe83dfa_332536.png?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.5398929852075265',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

6、wxapp-Breakfast —— hayeah

小林早厨 Demo

<iframe id="iframe_0.1129131321762169" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 375px; height: 667px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://go.rritw.com/git.oschina.net/hayeah/wxapp-Breakfast/raw/master/design.jpg?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.1129131321762169',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

7、SmallAPP —— qieangel2013

購物 Demo

<iframe id="iframe_0.6203767291880817" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 527px; height: 710px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://git.oschina.net/uploads/images/2016/0926/180110_3f3d1108_636453.jpeg?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.6203767291880817',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

四、教學視頻

在参考文字的操作過程中可能會出現一些難以發現的小問題,導致最終跑起來會有點瑕疵。因此,對照視頻進行操作不失为更直觀的學習方式。

1、博卡君 小程序 Demo 視頻

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

視頻地址:

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

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

視頻地址:

每天進步一點點

From:ITEYE
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
驗證碼:點擊我更換圖片
欄目列表
推薦內容