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

高洛峰
發布: 2017-03-15 16:11:08
原創
1696 人瀏覽過

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#  這裡可以看到一個能看到的一些元件。我們打開原始碼,很熟悉多重介面,入口檔案為app.js這和好多框架都類似。

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

  是不是發現一個新的東西?還是兩個新的東西?哈哈。 。 。以wxmlwxss結尾的文件,但是,具體這個怎麼解讀呢? 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一樣,可以設定marginpaddingdisplay,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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板