微信小程序（微信應用號）組件講解

　　這篇文章主要講解微信小程序的組件。

　　首先，講解新建項目。如今有句話：招聘三天以上微信小程序開發，這個估計只能去挖微信的工程師了。技術新，既然講解，那咱們就從開始建項目講解。

　　

　　打開微信web開發者工具，如上圖。點擊添加項目，會出現新建項目頁面，以下圖：

　　

　　其中AppID隨意填寫。ps：正式開發了估計有要求的。填寫項目名稱並選擇保存的路徑，添加項目就ok了。

　　　　

　　就這樣，一個hello world 就OK了。

　　好了，咱們如今開始講解微信小程序的組件。

　　先倒入官方流出的demo文件。能夠到微信小程序開發羣：390289365 的共享文件裏下載。導入後入下圖：

　　　　

　　這裏能夠看到一個能看到的一些組件。咱們打開源碼，很熟悉多界面，入口文件爲app.js這和好多框架都相似。

　　　　

　　是否是發現一個新的東西？仍是兩個新的東西？哈哈。。。以wxml和wxss結尾的文件，可是，具體這個怎麼解讀呢？wxml我不知道該說w－xml仍是wx－xm。這個文件打開之後是佈局，相似wpf的xaml佈局。wxss呢，我猜應該是微信css吧，即便咱們的css文件。這樣一來，是否是前端同窗感受好熟悉，相似日常開發的html（wxml），css（css）js（相似node.js寫法，或則就是吧）。

　　由於組件還算豐富啊，這篇確定介紹不完，這先介紹幾種。

　　一。咱們先看demo的效果圖，小程序演示，五個字，這五個字的地方，就說相似移動開發的，導航bar了，這個說能夠相似IOS開發同樣，能夠整體設置。在哪呢？就以下圖：

　　

　　這個navigationBar我想確定也能動態控，可是我沒從api中看到，應該後續官方文檔確定也會有說明吧。

　　二。View元素，這個view和react native 相似，和html開發中的div同樣，是一個塊級的。能夠設置樣式，如圖中的右側紅圈的樣式。這樣幾乎和html的佈局同樣了，連css語法都同樣。view和view能夠嵌套，和div同樣，能夠設置margin，padding，display，block，全局＊都樣式等方式。前端的小夥伴說不是以爲作這個界面開發沒壓力？

　　

　　三。navigator 下面這兩個圖說摺疊和展現，其實就是控制包含navigator組的view展現與隱藏實現的，後面代碼會說明。

　　

　　點擊內容分區，三個navigator的父級view現實，再點擊，隱藏。想想，這若是在html中，這應該是js控制吧，可是在微信web小程序開發呢，看代碼：

　　

　　「js」代碼是有了，可是「click」方法的綁定呢？，可是翻邊demo代碼也沒發現click的影子。其實在這裏微信web小程序開發上用了內嵌的綁定方式，淡然綁定的關鍵字也不是click了，而是bindtap，以下圖：

　　

　　對用的「widgetsToggle」就是上上圖的「click「事件。經過後臺的 typeviewShow來展現前臺。

　　四。text 這個酒相似咱們html開發中的label或則span，是一個小塊級元素。這裏很少說明來。

　　五。navigator，這個作咱們頁面中的跳轉，其中url屬性指向的跳轉多目標頁面。

　　六。image 這個就是img咯，src和html開發的同樣咯。

　　今天的說明就到這吧，明天接着寫，明天儘可能介紹一部分，而後模仿個原生app的界面。

　　下面插個廣告，感謝博客園平臺！

　　若是你們想討論或則找微信開發的資料，有興趣能夠添加微信小程序（應用號）qq羣:390289365 ，

　　同時微信小程序開發網已經上線啦！！！微信小程序論壇：www.cwechat.org

　　我們微信小應用開發有本身的開發交流網站啦！！！