最近微信小程序比較火，正(zheng)好昨(zuo)天(tian)弄到了(le)破解版微信web開發工具，所以今天(tian)正(zheng)好試試手。由于(yu)我是做ios的，所以對H5和CSS方面(mian)不太了(le)解，代碼(ma)里面(mian)寫的丑(chou)的地(di)方歡迎吐槽。

1.效果演示

WXEXE.gif

2.微信小程序介紹

微信小程序的一個頁面(mian)主要分成三個部分.js文件(jian).wxml文件(jian)和(he).wxss文件(jian)

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

3.代碼介紹

頁面布局代碼，由于開(kai)發(fa)工(gong)具的(de)所有(you)(you)接口訪問有(you)(you)限制，所以數據都(dou)寫在(zai)了本(ben)地，但(dan)是最新的(de)破解版(ban)開(kai)發(fa)工(gong)具已經處理的(de)這個問題，我也會盡快(kuai)將(jiang)死數據改成網(wang)絡請(qing)求(qiu)下(xia)來的(de)數據

 <view class = "index">
    <view class = "header-container" >
    <!-- 輪播圖  -->
    <swiper class = "header-swiper" autoplay="true" scroll-x="true" interval="3000" duration="1000">
      <block wx:for-items="{{ adimages }}">
        <swiper-item>
          <image class = "header-swiper-img" src="{{ item.img_url }}" mode="aspectFill" ></image>
        </swiper-item>
      </block>
    </swiper> 

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

    </view>

    <!-- 首頁推薦 -->
    <view class = "scroll-container"> 
        <block wx:for="{{ result }}" wx:for-index='index' wx:for-item='item'>
          <!-- 豎向分割線 -->
          <view class = "home-view-sep-ver" style = "float:left"></view>

          <!-- 主視圖(tu) -->
          <view class = "scroll-view" style = "float:left; flex-direction:row; justify-content: space-around;">
              <image class = "header-cover-img" src = "{{ item.cover }}" mode = "aspectFill"/>
              <view class = "home-text-nickname" style = "float:left"> {{ item.nickname }} </view>
              <view class = "home-text-city" style = "float:left"> {{ item.city_name }} </view>
          </view>

          <!-- 橫(heng)向分(fen)割線 -->
          <view wx:if = ";{{ (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;"></view>

        </block>
    </view>

    <!-- 邀請好友模塊 -->
    <view class = "home-invite-container">
      <view class = "home-invite-title" > {{ invite.title }} </view>
      <image class = "home-invite-cover" src = "{{ invite.img_url }}" mode = "aspectFill" />
      <view class = "home-invite-content" style = "display: inline-block;" > {{ invite.content }} </view>
      <view class = "home-invite-subcontent"  style = "display: inline-block;"> {{ invite.subcontent }} </view>
    </view>

    <!-- 首頁鮮肉(rou) -->
    <view class = "scroll-container"> 
        <block wx:for="{{ recommends }}" wx:for-index='index' wx:for-item='item'>
          <!-- 豎向分割線 -->
          <view class = "home-view-sep-ver" style = "float:left"></view>

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

          <!-- 橫向分割(ge)線 -->
          <view wx:if = "{{ (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;"></view>

        </block>
    </view>
</view>