微信小程序實現「鮮肉APP」首頁效果

項目地址 http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 若是您以爲不錯，記得給一個star

因爲微信小程序目前是當下趨勢，正好昨天弄到了破解版微信web開發工具，因此今天正好試試手。因爲我是作iOS的，因此對H5和CSS方面不太瞭解，代碼裏面寫的醜的地方歡迎吐槽。

1.效果演示

WXEXE.gif

2.微信小程序介紹

微信小程序的一個頁面主要分紅三個部分.js文件.wxml文件和.wxss文件

• . js文件
  .js文件至關於ios中的一個控制器，全部的業務邏輯操做都放在該文件中完成，xml頁面中顯示的數據都從該文件中傳入。
• .wxml文件
  .wxml文件用於寫HTML5代碼，也就是用來頁面佈局。
• .wxss文件
  .wxss文件則是用來處理全部的css樣式信息

3.代碼介紹

頁面佈局代碼，因爲開發工具的全部接口訪問有限制，因此數據都寫在了本地，可是最新的破解版開發工具已經處理的這個問題，我也會盡快將死數據改爲網絡請求下來的數據

class = "index">
     class = "header-container" >
    
     class = "header-swiper" autoplay="true" scroll-x="true" interval="3000" duration="1000">
       wx:for-items="{{ adimages }}">
        
           class = "header-swiper-img" src="{{ item.img_url }}" mode="aspectFill" >
        
      
     

     class = "header-search-img" src="../../images/icon_sshome.png">

    

    
     class = "scroll-container"> 
         wx:for="{{ result }}" wx:for-index='index' wx:for-item='item'>
          
           class = "home-view-sep-ver" style = "float:left">

          
           class = "scroll-view" style = "float:left; flex-direction:row; justify-content: space-around;">
               class = "header-cover-img" src = "{{ item.cover }}" mode = "aspectFill"/>
               class = "home-text-nickname" style = "float:left"> {{ item.nickname }} 
               class = "home-text-city" style = "float:left"> {{ item.city_name }} 
          

          
           wx:if = "{{ (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;">

        
    

    
     class = "home-invite-container">
       class = "home-invite-title" > {{ invite.title }} 
       class = "home-invite-cover" src = "{{ invite.img_url }}" mode = "aspectFill" />
       class = "home-invite-content" style = "display: inline-block;" > {{ invite.content }} 
       class = "home-invite-subcontent"  style = "display: inline-block;"> {{ invite.subcontent }} 
    

    
     class = "scroll-container"> 
         wx:for="{{ recommends }}" wx:for-index='index' wx:for-item='item'>
          
           class = "home-view-sep-ver" style = "float:left">

          
           class = "scroll-view" style = "float:left; flex-direction:row; justify-content: space-around;">
               class = "header-cover-img" src = "{{ item.cover }}" mode = "aspectFill"/>
               class = "home-text-nickname" style = "float:left"> {{ item.nickname }} 
               class = "home-text-city" style = "float:left"> {{ item.city_name }} 
          

          
           wx:if = "{{ (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;">