微信小程序出來有段時間了，最近抽空寫了個靜態案例練練手。由於沒有公測名額，無法測試，沒有接口，所以先這樣吧。
首先上圖，整個app的演示是這樣的：
圖一
相關鏈接：
一、微信小程序和html5標簽的區別：
二、wxss 選擇器
| HTML5 | 微信小程序 |
| div（標簽選擇器） | view、text、icon、input、image、navigator（標簽選擇器） |
| class(類選擇器) | class |
| id(id選擇器)（效率最高） | id(效率最高) |
| element,element(層級選擇器) | element,element(層級選擇器) |
| ：after（偽類選擇器） | ：after ：before |
| ：frist-child等 | ：frist-child等(不建議（工具過濾易導致頁面錯亂）) |
| .class .class | .class .class(不建議（工具過濾易導致頁面錯亂）) |
| 群組選擇器 | 群組選擇器 |
| 后代選擇器 | 后代選擇器 |
三、接着是程序的結構：
下面是app.json的配置 根據小程序的api可以配置pages、window、tabBar（最多配置5個路由）前兩個比較簡單：（加一點：小程序更新page模塊，增加頁面不再需要單個頁面配置四個文件，只需要在app.json中在page下增加該頁面，小程序會自動生成四個文件）
下面是tabBar
我們用list屬性來配置tab列表，最少2個，最多5個。根據個人需求不同進行不同的配置即可。
首頁我們首先有個輪播圖，實現代碼為：
之后的優質投資模塊，在js中配置的靜態數據，通過wx:for="{{}}"語句渲染到了頁面上，有接口的話我們獲取后渲染。
這個模塊實在局部滾動的，那我們調用下面這段代碼。
注意（關於開發中的自適應）：
一、我們用html5寫自適應的話需要用到百分比或是函數計算比例，但小程序可以讓我們避免了這個麻煩，我們可以用rpx，在ipoone6的開發環境下，1rpx=0.5px;我們采用這個單位就可以在完成后，省掉兼容的一部分問題了。（當然我這里面沒有考慮到）
二、這里有個開發中可能遇到的坑，由於背景圖是全覆蓋的，所以這里可以在wxss文件中添加語句：.indexBox{height:100%;} page{height:100%} 都需要設置，要不然沒法自適應，注意大小寫。
三、模板的引用和js公用部分文件的引用（沒有實現）
四、底部table切換，需要先寫完前面的頁面，后面的頁沒法顯示。
投資理財頁面使用了tablei切換，列表渲染，
登陸頁面 以及表單驗證
表單中placeholder的樣式和html5是不一樣的。想給小程序input的placeholder添加樣式如下：
總的下來技術難度三個星，對於有工作經驗的前端來說，可以很快上手，不過細節方面還是有很多需要注意的方面。相互學習，共同進步。