本人開發的開發者技術變現資源聚集地,大家支持下，下面是網址
https://www.baiydu.com
接着昨天的繼續談關於微信新出的這個js框架，今天主要談一個頁面的創建到布局的詳細步驟。
一.創建一個完整頁面
頁面你可以創建在項目的任何節點，只要你在入口文件正確引入創建該頁面的路徑就可使用。
上面使用紅色矩形包含的目錄，是我新增的目錄apps，mainvc目錄里面存放tabbar展示頁面，sonvc存放push后展示的頁面
選中firstvc文件夾鼠標右鍵單擊會出現創建列表，點擊新建--->分別創建.js .json .wxml .wxss文件
完成以上步驟，一個完整的頁面就創建好了，它們的作用分別是
1.js負責頁面所有控件的邏輯判斷固定數據綁定。
2.json從網絡請求的數據處理。
3.wxml頁面布局。
4.wxml布局樣式表，樣式也可以直接寫在布局標簽的內部。sytle=""，完全和tml一樣。
二.入口引入該頁面,tabbar增加該頁面
1.引入
點擊app.js入口文件，可以看到開發工具的右半部分對該頁面代碼的展示，一個字典格式的json數據。其中第一個key，"pages":就是用來存放引入頁面的，在該節點下引入剛才我們創建的頁面即可，看紅圈里的 步驟2。
2.增加到tabbar
將此頁面增加到tabbar中，增加到tabbar中是因為我們將此頁面放到app的主界面顯示，這點如果是做app開發的都應該知道。
依然是在app.js的json里配置tabbar主界面，將鼠標往下滾動，會出現上面截圖的節點，tabbar主頁面是以一個字典格式的json配置進去，看上圖紅圈里的內容。
這個節點我們放在第二個位置，所以當我們啟動app時，tabbar的第二個主頁面就是我們創建的這個頁面了，下面看截圖。
三.界面布局
布局我主要結合今天創建的界面來談，看上面截圖，微信js框架的布局樣式寫法和html幾乎一樣，不同的也許就是多了少許特性，所以你只要會css樣式的編寫，那么這個框架的布局應該不會很麻煩。框架的主要容器標簽有三個view,scroll-view,swiper,這也是布局的重點,我今天創建的這個界面使用了其中兩個標簽，view和swiper，view應該是布局中使用得最多的一個布局容器標簽，swiper主要是實現特效時的容器標簽，比如push需要一個動畫如此就用它。view在這個框架里當的使用率如同當前html中的div,但是它布局思想等同於html中的table, 行-->列方式布局,行里面可以包含列，列里面可以包含行。
1.swiper
上面截圖中頁面頂部的輪播使用swiper實現。 
其中屬性的設置在.js中實現，看紅圈里面的代碼使用"{{}}"這種就是從.js中取屬性值。
2.<view>容器
上面截圖部分的布局方式都是用的view，假設上面截圖中只有一行數據，那么就表示一行兩列，中間內容部分表示在第一列中布局了三行,代碼如下。
1 <view class="flex-wrp" style="flex-direction:row;"> 2 <view class="flex-item bc_green"> 3 4 <view class="sectionContent" > 5 <view class="flex-wrp" style="height: 130px;flex-direction:column;"> 6 <view class="HeaderImageView"> 7 <image class="image" src="../../resources/pic/1.jpg" /> 8 </view> 9 <view class="NikeNameView">昵稱:小明</view> 10 <view class="HarvestView">提現金額:99999999</view> 11 </view> 12 </view> 13 </view> 14 <view class="flex-item bc_red"> 15 16 <view class="sectionContent" > 17 18 <view class="flex-wrp" style="height: 130px;flex-direction:column;"> 19 <view class="HeaderImageView"> 20 <image class="image" src="../../resources/pic/1.jpg" /> 21 </view> 22 <view class="NikeNameView">昵稱:小明</view> 23 <view class="HarvestView">提現金額:99999999</view> 24 </view> 25 </view> 26 </view> 27 </view>
效果會是這樣
在使用網絡數據的時候，我們會循環這部分代碼綁定數據源。
這個框架的寫樣式部分的代碼會很少，因為每個容器或控件都是封裝好樣式的，所以它是一個快速開發框架，不過要開發太復雜的應用,暫時應該不適合。
整個頁面樣式表:
1 .swiper-item{ 2 display: block; 3 height: 150px; 4 width: 1000px; 5 margin-top: 10px; 6 } 7 .page{ 8 background-color:#F0F0F0; 9 } 10 .flex-wrp{ 11 height: 130px; 12 display:flex; 13 background-color: limegreen; 14 15 16 17 } 18 .flex-item{ 19 width: 50%; 20 height: 130px; 21 color: #FFFFFF; 22 display: flex; 23 justify-content: center; 24 25 26 border: 5px solid black; 27 28 } 29 .section__title 30 { 31 margin-top:10px; 32 font-size: 15px; 33 color:gray; 34 } 35 .cloumone 36 { 37 padding-left: 1px; 38 } 39 40 .section 41 { 42 margin-bottom: 27px; 43 } 44 45 46 47 48 49 50 51 52 .image{ 53 width: 130rpx; 54 height: 130rpx; 55 background: blue; 56 position: relative; 57 58 } 59 60 61 62 63 .sectionContent 64 { 65 width:100%; 66 text-align: center; 67 background: green;color: white; 68 69 } 70 .HeaderImageView 71 { 72 height: 76px; 73 74 margin-top: 5px; 75 76 77 } 78 .NikeNameView 79 { 80 height: 20.333px; 81 82 line-height: 23.333px; 83 84 } 85 .HarvestView 86 { 87 height: 26.333px; 88 line-height: 23.333px; 89 font-size: 13px; 90 91 }
本人創業做的一款androidApp, 下載量已經有2000多萬,各種當前熱門的網絡手機獎勵紅包全部集成，另外還有熱門電影和淘寶高額優惠券！很適合各類型的用戶。
