圖文詳解微信小程式應用號組件

這篇文章主要介紹了圖文詳解微信小程式應用號組件的相關資料,需要的朋友可以參考下

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

　　首先，講解新建專案。現在有句話：招募三天以上微信小程式開發，這個估計只能去挖微信的工程師了。技術新，既然講解，那我們就從開始建專案講解。

　　開啟微信web開發者工具，如上圖。點選新增項目，會出現新建項目頁面，如下圖：

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

　　　　

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

　　　　古人雲，一圖勝千言，大家直接看圖就ok

　　好了，我們現在開始講解微信小程式的組件。

　　先倒入官方流出的demo檔。導入後入下圖：

　　　　

#　　這裡可以看到一個能看到的一些元件。我們打開原始碼，很熟悉多重介面，入口檔案為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開發中的p一樣，是一個區塊級的。可以設定樣式，如圖中的右側紅圈的樣式。這樣幾乎跟html的佈局一樣了，連css語法都一樣。 view和view可以嵌套，和p一樣，可以設定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的介面。

以上是圖文詳解微信小程式應用號組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！