微信自動返現小程序開發流程解析（布局分解）

自動返現小程序分析大致的開發步驟是

•添加所需要的UI元素：3個按鈕（UIButton）、1個文本標簽（UILabel）

•監聽3個按鈕的點擊事件

•改變文本標簽的文字顏色

1、具體實現步驟

3.1 在storyboard文件中，拖拽相應控件器上，布局好以上顯示頁面效果

3.2 然后利用Xcode右端上的“圓圈”按鈕，將代碼區分割成 “Main.storyboard”與“viewController.m”文件，兩個可以按住control鍵，不要放開，將以上元素拖到“viewController.m”文件中，拖之后記得要命名得體，讓人一目了然。

   （圓圈按鈕，可進行分割代碼區為兩個文件）

 

自動返現小程序系統開發 找張麗 185-6541.3369 微/電

 

對於UI風格設定,我是這樣認為的:

每個item中圖片和文字上下排列，九個item換行排列。那么這些是怎么做到的呢，當然是FlexBox的作用。下面詳細介紹FlexBox屬性對布局的影響。
首先來介紹item的FlexBox屬性。
 
其中display肯定是flex。flex-direction=row表示主軸X是橫向，也就是我們習慣的xy坐標系的原點在view的左上角，x軸向右，y軸向下。如果flex-direction=column則是x軸向下，y軸向右。我們實際應用中只要使用row這種方式應該都能完成大部分布局要求。
flex-wrap=wrap表示換行。這個屬性決定了內部組件圖片和文字排列為兩行。
justify-content=space-around。這個屬性表示在每行中元素的間隔方式。由於此例中第一行是圖片，第二行是文字，所以此屬性不起作用。后面課程中會介紹。
align-items=center決定了在y軸上的排列，是垂直居中。結合justify-content=center的話，內部元素會水平、垂直居中。
align-content=space-around表示圖片和文字之間的行間距方式。頂端和底部都有留白，圖片和文字之間有留白。頂部和底部的留白是圖片和文字之間留白的一半大小。
以上屬性的設置，決定了內部元素在主軸x和副軸y的排列和間隔。我們在開始使用工具時，可以多改變一下每個屬性的值，看看布局效果。然后將自動生成的wxml和wxss粘貼到微信開發者工具中預覽。
然后我們看看最外一側view的flexbox屬性設置
 
display、flex-direction、flex-wrap這三個屬性告訴瀏覽器我要用flex布局，並且橫向排列和換行。
justify-content、align-items和align-content都是flex-start，決定了內部組件在x軸是從原點向右緊挨着排列，在y軸上從原點向下緊挨着排列。這樣就決定了9個item是從左上角向x和軸排列。當然我們也可以將這三個屬性設置為center，表示從view的中心向四面排列，也可以做出9宮格。
flexbox屬性的組合很多，實際開發時結合此工具的使用可以做到事半功倍的效果。通過工具中屬性的更改，便可所見即所得。
工欲善其事必先利其器，熟練掌握一個工具的使用，勢必提高我們的開發效率。大家剛開始使用此工具時，更多的變幻一下flexbox的屬性，看看布局效果。當完全掌握后，會起到意想不到的效果。

了解更多微信自動返現小程序的開發，加V：appzli 獲取源碼資源。