1. 程式人生 > >微信小程式入門教程+案例demo

微信小程式入門教程+案例demo

尊重原創,轉載請註明出處:原文檢視驚喜更多 http://blog.csdn.net/qq137722697

首先擺在好姿態,——微信小程式開發也就那麼回事。你只需要一點點css(真的只要一點點)的基礎就可以了。

認清微信小程式開發 其實,我覺得小程式就是將微信官方提供20+個基礎元件(目前有26個)進行排列組合,然後加上一些css樣式,對使用者的操作進行反饋(調微信官方提供的60+個api)。26個基礎元件+60個開放api=半天就搞定了吧?(認真跟著下面的教程走半天足夠了)

怎麼學? 1、開發工具你得有吧? 這裡是最新版下載連結(傳送門)—>微信web開發者工具最新版下載地址

目前微信小程式開發工具已經不需要破解都可以了,你只要使用手機端微信掃一掃登入開發工具,在建立應用的時候選擇為無APPID就可以開發了。 

2、開發文件得有吧? 很多人可能覺得看視訊要習慣點(CSDN學院的微信小程式實戰視訊),但是本人建議學新東西不要看視訊,入門最好的方式就是看官方文件(還有什麼誰比官方自己更懂自己的東西呢!),下面是官網地址:

微信小程式官方文件(傳送門)

當然這裡推薦看W3CSchool整理的文件,思路相對比較清晰。(再來個傳送門)

3、基礎會了,再來點實戰 學完一樣東西,最好的方式就是將這個東西付諸於實踐,下面進入實戰《微信小程式之百思不得其姐(簡版)》,如果你能全程跟著做出來,那麼你就已經入門成功了。

先看效果圖

說明這個專案的IDEA是借鑑了這位大哥的,感謝這位大哥

再來看看專案截圖 

具體的程式碼這裡我不就貼了,我把整個專案打包直接下下來就可以用(點我下載DEMO)。

我使用到的圖示都是從阿里巴巴的iconfont下載的(之前不知道的簡直就是非常大的福利哦,你用了就知道)。

4、專案還不夠? 如果你覺得上面的實戰還不夠激發你的潛能,那麼下面給出幾個我在學習過程中找的IDEA,希望對你有幫助。

1)、計算器  https://github.com/dunizb/wxapp-sCalc

2)、豆瓣圖書  http://www.jianshu.com/p/c35084200470

3)、移動商城  https://github.com/liuxuanqiang/wechat-weapp-mall

4)、天氣  http://swiftcafe.io/2016/10/03/wx-weather-app/

5)、空氣質量查詢  http://blog.csdn.net/yulianlin/article/details/52692066

6)、github客戶端  https://blog.zhengxiaowai.cc/post/weapp-demo.html

7)、知乎日報  http://www.apkbus.com/forum.php?mod=viewthread&tid=268626&extra=page%3D1%26filter%3Dsortid%26sortid%3D12

最後 感謝上面提到demo的作者們,共同進步… ---------------------  作者:大力-哥  來源:CSDN  原文:https://blog.csdn.net/qq137722697/article/details/52988719  版權宣告:本文為博主原創文章,轉載請附上博文連結!