4.微信小程序-B站：先把首頁造出來

(小安娜：失蹤人口已上線，大家快來噴噴噴他！)，sorry++，最近身邊發(fā)生太多事情，導(dǎo)致這最關(guān)鍵的實(shí)戰(zhàn)開篇都未寫，（小安娜-分身1：懶就是懶，不負(fù)責(zé)任，我之前學(xué)的都忘了），(小安娜-分身2：上一篇雙11發(fā)完就消失了，不會是兼職送快遞去了吧)，(小安娜-分身3：退訂差評，再也不跟你學(xué)了)...，好了好了，有事回了趟老家才回來，不說這個，咋們繼續(xù)小程序開發(fā)。（小安娜：是回去相親了吧?。?/em>

效果圖（也可直接跳過）

效果圖太長，影響閱讀，自行戳開鏈接

開發(fā)前熱身

打開B站移動版網(wǎng)站：http://m.bilibili.com/index.html，打開應(yīng)該是個這樣的畫面，也是我們今天要完成的界面：

bilibili首頁

（小安娜：不對啊，我打開的是電腦版的），不會吧「我呆住一分鐘」，哦直接打開網(wǎng)站會跳轉(zhuǎn)到PC版本，要用手機(jī)或Chrome開發(fā)工具中的Toggle device toolbar打開才可正常訪問，（小安娜：不可能用手機(jī)打開調(diào)試吧，Toggle device toolbar是什么？），Toggle device toolbar是我們開發(fā)移動網(wǎng)頁必備工具，可以模擬各種移動設(shè)備，Chrome自帶無需另外安裝，整個調(diào)試界面是這樣的：

Chrome開發(fā)者工具

（小安娜：原來如此，6個箭頭成功吸引了本小姐的注意）

接著來分析下頁面結(jié)構(gòu)，看項(xiàng)目需要怎么創(chuàng)建模板，下圖是首頁和直播頁對比：

B站首頁分析圖

發(fā)現(xiàn)頂部綠色區(qū)域和底部藍(lán)色區(qū)域每個界面都有并且是一樣的，中間內(nèi)容區(qū)域①和②是一種結(jié)構(gòu)，③和④是一種結(jié)構(gòu)，（小安娜：好意思提1、2、3、4，字寫的丑就打字，還有我發(fā)現(xiàn)頂部又是綠色的！很喜歡頂部是綠咩？），所以我會建立3個模板文件：header.wxml、footer.wxml、item.wxml，（小安娜：頭部、底部、1和2、3和4，不是4個文件嗎？），你這樣歸納也可以，但文件太多難管理，我把內(nèi)容區(qū)域歸納為一個item.wxml文件，別忘記了一個wxml文件可以寫多個<template>，所以我建立的目錄結(jié)構(gòu)是這樣的：

項(xiàng)目目錄結(jié)構(gòu)

（小安娜：resources文件夾是什么，沒見你提過？），用來放靜態(tài)資源文件的，（小安娜：靜態(tài)資源文件？？？啥意思），目前來說就是放項(xiàng)目所需圖片，（小安娜：裝13，早說放圖片不就行了。）

為了接下來更好學(xué)習(xí)，建議此時應(yīng)該打開官方組件文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
由于這是實(shí)戰(zhàn)篇，不會太多介紹組件怎么使用，所以當(dāng)出現(xiàn)不熟悉的組件時，可以去官方文檔查閱。（小安娜：已打開，還添加到書簽了），感動啊，難得一次不噴我還順著我，（小安娜：因?yàn)槭俏⑿殴俜降奈臋n?。?/em>，我~風(fēng)中凌亂.jpg

頭部header.wxml

替換前的HTML代碼：

<!-- 頂部工具欄 -->
<nav class="nav-bar">
    <div class="nav-wrp">
        <a  class="logo"></a>
        <a class="cell" ><i class="nav-icon bili-icon-history"></i></a>
        <a class="cell" toggle-switch=".search" href="javascript: void(0);"><i class="nav-icon bili-icon-search"></i></a>
    </div>
</nav>
<!-- 導(dǎo)航菜單 -->
<div class="flex-bar main">
    <ul class="flex-bar-in">
        <li class="nav-item nav-index on"><a  title="首頁">首頁</a></li>
        <li class="nav-item nav-channel"><a  title="頻道">頻道</a></li>
        <li class="nav-item nav-live"><a  title="直播">直播</a></li>
        <li class="nav-item nav-rank"><a  title="排行">排行</a></li>
        <li class="nav-item nav-space"><a  title="我的">我的</a></li>
    </ul>
</div>

<nav>、<div>、<ui>、<li>、<i>都可替換成容器組件：<view>；<a>可替換成導(dǎo)航組件：<navigator>，保留原標(biāo)簽的class屬性，（小安娜：那<a>標(biāo)簽的href屬性呢？），在<navigator>可用url屬性替換，不同的是<navigator>只能跳轉(zhuǎn)應(yīng)用內(nèi)頁面鏈接，url不能隨便寫一個http://ctt.jieerf.com這樣的鏈接跳轉(zhuǎn)過去，（小安娜：啊···，怎么解決呢？像我們之前做的App中幫助和反饋都是網(wǎng)頁做好，App中跳轉(zhuǎn)網(wǎng)頁。），我目前還沒發(fā)現(xiàn)能跳轉(zhuǎn)外站點(diǎn)的組件，唯一的解決方法是在微信小程序里重寫頁面，（小安娜：是你學(xué)藝不精不知道吧，別教壞我啦，還是得求助現(xiàn)場大神們）（小安娜-求助畫面：求大神留言指點(diǎn)，怎么解決微信跳轉(zhuǎn)外部鏈接，如解決必當(dāng)重謝?。?/em>，你行啊，其實(shí)我們轉(zhuǎn)換下想想，真很少機(jī)會用到跳轉(zhuǎn)外部鏈接，App中用到網(wǎng)頁的地方最大的出發(fā)點(diǎn)是為了：跨平臺?，F(xiàn)在小程序已經(jīng)做到跨平臺了，真沒必要用到內(nèi)嵌外部網(wǎng)頁了。（小安娜：好像也有道理，但是我還是想知道，如果可以做到，那么你會很丟臉2333333~）

替換后的wxml代碼：

<!-- 頂部工具條-begin -->
<view class="nav-bar">
    <view class="nav-wrp">
        <!-- LOGO -->
        <navigator class="a logo"></navigator>
        <!-- 觀看歷史 -->
        <navigator class="a cell">
            <view class="nav-icon bili-icon-history"></view>
        </navigator>
        <!-- 搜索框 -->
        <view class="a cell">
            <view class="nav-icon bili-icon-search"></view>
        </view>
    </view>
</view>
<!-- 頂部工具條-end -->

<!-- 導(dǎo)航菜單-begin -->
<view class="flex-bar main">
    <view class="flex-bar-in">
        <view class="li nav-item on">
            <navigator url="" class="a">首頁</navigator>
        </view>
        <view class="li nav-item">
            <navigator url="" class="a">頻道</navigator>
        </view>
        <view class="li nav-item">
            <navigator url="" class="a">直播</navigator>
        </view>
        <view class="li nav-item">
            <navigator url="" class="a">排行</navigator>
        </view>
        <view class="li nav-item">
            <navigator url="" class="a">我的</navigator>
        </view>
    </view>
</view>
<!-- 導(dǎo)航菜單-end -->

（小安娜：替換前后對比很久，發(fā)現(xiàn)你把<a>標(biāo)簽替換成<navigator>后class屬性值多加了個a，<li>替換成<view>后class屬性值多加了個li，這是有什么特殊意思嗎？還有搜索框原本是<a>標(biāo)簽但是你替換成了<view>組件，不是說<a>替換<navigator>組件嗎？），不錯不錯，你還蠻細(xì)心的，這是因?yàn)楣俜紺SS中有元素選擇器：.flex-bar .flex-bar-in a，這樣做wxss文件改動最?。?code>.flex-bar .flex-bar-in .a。至于搜索、觀看歷史兩個按鈕，為什么搜索按鈕用<view>代替，我們?nèi)ナ褂靡幌鹿俜骄W(wǎng)站就明白了：

搜索和觀看歷史對比圖

①是觸發(fā)搜索按鈕后界面，②是觸發(fā)觀看歷史按鈕后界面。注意看箭頭所指紅色框內(nèi)，①地址沒改變，②地址發(fā)生了改變。這就表示搜索界面只是顯示/隱藏狀態(tài)切換，而觀看記錄是頁面間的跳轉(zhuǎn)。（小安娜：哦哦，也就是①可以用組件hidden屬性，②用<navigator>組件對吧？），沒錯了，給你個贊。（小安娜：哎~沒辦法，智商這東西你能跟得上嗎！）

滾動廣告Swiper

原配方效果圖：

官方滾動廣告效果圖

替換前的HTML代碼：

<div id="sliderWrapper" class="slider-wrapper">
    <div class="slider-bg"></div>
    <div>
        <div id="slider" class="swipe" style="visibility: visible;">
            <div class="swipe-wrap" style="width: 1875px;">
                <a  data-index="0" style="width: 375px; left: 0px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
                    ![我們請你看電影](http://upload-images.jianshu.io/upload_images/640480-1844afd83660dcb5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a><a  data-index="1" style="width: 375px; left: -375px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);">
                    ![少女海戰(zhàn)預(yù)約開啟](http://upload-images.jianshu.io/upload_images/640480-2465b040630c2dca.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a><a  data-index="2" style="width: 375px; left: -750px; transition-duration: 0ms; transform: translate(375px, 0px) translateZ(0px);">
                    ![番劇彈幕禁水試行規(guī)則](http://upload-images.jianshu.io/upload_images/640480-428a83e14b429e5b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a><a  data-index="3" style="width: 375px; left: -1125px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
                    ![毒毒更健康~](http://upload-images.jianshu.io/upload_images/640480-e11ebf239c8f5d5b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a><a  data-index="4" style="width: 375px; left: -1500px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
                    ![海選第10天！](http://upload-images.jianshu.io/upload_images/640480-c0ba4db209d8f32e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </a>
            </div>
        </div>
        <div class="swipe-btn-wrapper">
            <div class="swipe-btn-list">
                <a></a><a class="on"></a><a></a><a></a><a></a>
            </div>
        </div>
    </div>
</div>

由于微信官方提供一個滑動組件：swiper，這里會用官方組件重新寫此功能。

重寫后的wxml代碼：

<!-- 滾動廣告 begin -->
<view class="slider-wrapper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}" wx:key="*this">
    <swiper-item>
      <image src="{{item}}" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>
</view>
<!-- 滾動廣告 end -->

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
    /* 滾動廣告配置 */
    // 圖片數(shù)據(jù)集合
    imgUrls: [
      'http://i0.hdslb.com/bfs/archive/9bab17a99758cc7a72531d15d2d5a85d73b78ded.jpg',
      'http://i0.hdslb.com/bfs/archive/57d8001838ff81c64bef2682070e53efbe2736b7.jpg',
      'http://i0.hdslb.com/bfs/archive/499730dbcd76823664c48e661726a37164158795.jpg',
      'http://i0.hdslb.com/bfs/archive/c9682eac8f46fd2b261b739c5c88e21adaffab53.jpg',
      'http://i0.hdslb.com/bfs/archive/414cf391f88bb098ded766b1d7effd9216be34ef.jpg'
    ],
    // 是否顯示面板指示點(diǎn)
    indicatorDots: false,
    // 是否自動切換
    autoplay: true,
    // 自動切換時間間隔
    interval: 5000,
    // 滑動動畫時長
    duration: 1000
  },
  onLoad: function () {}
})

（小安娜：我運(yùn)行代碼，但我發(fā)現(xiàn)，官方的底部有5個小圓點(diǎn)表示總共5圖片，當(dāng)前是第幾張，上面代碼沒這個效果？），你可以把swiper的indicator-dots="{{true}}"改成true，就會顯示指示點(diǎn)了，但我個人覺得比較不好看，所以默認(rèn)就不顯示了。（小安娜：雖然你沒一點(diǎn)審美，但這次還比較認(rèn)同你，沒辦法修改嗎？），暫時還沒有，官方文檔也未說明，（小安娜：好吧，只能先這樣了）。

內(nèi)容Body（←劃重點(diǎn)）

官網(wǎng)內(nèi)容區(qū)域包含很多分類，但很多結(jié)構(gòu)是一樣的，這里選3個具有代表性不同結(jié)構(gòu)的分類：

  • 熱門推薦
  • 正在直播
  • 番劇更新

原配方效果圖：

內(nèi)容Body效果圖

還記得我們一開始創(chuàng)建item.wxml內(nèi)容模板文件，現(xiàn)在要在里面添加熱門推薦、在線直播、番劇更新模板：

<!-- 熱門推薦、動畫區(qū)Item -->
<template name="jiefItem1">
    <!-- List Item begin -->
    <view class="content-list">
    <navigator class="item">
        <view class="top">
        <view class="cover-img" 
        style="opacity: 1; background-image: url({{coverImg}});">
        </view>
        </view>
        <view class="info">
        <view class="title">{{title}}</view>
        <view class="meta clearfix">
            <view class="cell left">
                <view class="bilibili-index-sprite bilibili-index-play"></view>
                <text>{{playNum}}</text>
            </view>
            <view class="cell left">
                <view class="bilibili-index-sprite bilibili-index-danmu"></view>
                <text>{{commentNum}}</text>
            </view>
        </view>
        </view>
    </navigator>
    </view>
    <!-- List Item end -->
</template>

<!-- 直播Item -->
<template name="jiefItem2">
    <!-- List Item begin -->
    <view class="content-list">
        <navigator class="item">
          <view class="top">
            <view class="cover-img" 
            style="opacity: 1; background-image: url({{coverImg}});">
            </view>
          </view>
          <view class="info">
              <view class="avatar">
                 <image mode="scaleToFill" src="{{avatarImg}}"></image>
              </view>
              <view class="user">
                  <view class="name text-overflow">{{name}}</view>
                  <view class="desp text-overflow">{{desp}}</view>
              </view>
              <view class="online text-overflow">{{online}}</view>
          </view>
        </navigator>
      </view>
    <!-- List Item end -->
</template>

<!-- 番劇更新Item -->
<template name="jiefItem3">
    <!-- List Item begin -->
    <view class="content-list bangumi-list">
    <navigator class="item">
        <view class="top">
        <view class="cover-img" 
        style="opacity: 1; background-image: url({{coverImg}});">
        </view>
        </view>
        <view class="info">
        <view class="bangumi-title text-overflow">{{bangumiTitle}}</view>
        <view class="bangumi-page text-overflow">{{bangumiPage}}</view>
        </view>
    </navigator>
    </view>
    <!-- List Item end -->
</template>

（小安娜：{{coverImg}}、{{title}}等這種是什么意思？），之前我們講過使用模板時候可以傳入數(shù)據(jù)data給模板，定義模板時先規(guī)范好模板里面使用數(shù)據(jù)的格式，其他地方想用name='jiefItem1'模板就必須按照{coverImg: '',title: '',playNum: '',commentNum: ''}這種規(guī)范傳入數(shù)據(jù)。（小安娜：隔這么久早忘了，那要怎么使用呢？），怎么使用這太簡單了，就留給你去完成吧，咋們之前學(xué)過的，給你5分鐘思考。（小安娜：切~，你以為這能難住本小姐）「滴答滴答...小安娜剛進(jìn)入思考模式」，小安娜算了吧，看你的表情感覺要思考很久，直接公布答案吧。

在index.wxml接著添加代碼：

<!-- 熱門推薦 begin -->
  <view class="row-container">
    <navigator class="header">
      <view class="left">
        <view class="bilibili-index-sprite bilibili-index-hot"></view>
        <text>熱門推薦</text>
      </view>
      <view class="right hot">
        <view class="bilibili-index-sprite bilibili-index-ranking"></view>
        <text>排行榜</text>
      </view>
    </navigator>
    <view class="content-wrapper">
      <block wx:for="{{hotList}}" wx:key="avid">
        <!-- 使用熱門推薦模板，傳入當(dāng)前循環(huán)對象item -->
        <template is="jiefItem1" data="{{...item}}"/>
      </block>
    </view>
  </view>
  <!-- 熱門推薦 end -->

  <!-- 正在直播 begin -->
  <view class="row-container">
    <navigator class="header">
      <view class="left">
        <view class="bilibili-index-sprite bilibili-index-live"></view>
        <text>正在直播</text>
      </view>
      <view class="right">
        <text>查看更多直播</text>
        <view class="bilibili-index-sprite bilibili-index-arrow"></view>
      </view>
    </navigator>
    <view class="content-wrapper">
      <block wx:for="{{liveList}}" wx:key="avid">
        <!-- 使用正在直播模板，傳入當(dāng)前循環(huán)對象item -->
        <template is="jiefItem2" data="{{...item}}"/>
      </block>
    </view>
  </view>
  <!-- 正在直播 end -->

  <!-- 番劇更新 begin -->
  <view class="row-container">
    <navigator class="header">
      <view class="left">
        <view class="bilibili-index-sprite bilibili-index-bangumi"></view>
        <text>番劇更新</text>
      </view>
      <view class="right">
        <text>查看更多番劇</text>
        <view class="bilibili-index-sprite bilibili-index-arrow"></view>
      </view>
    </navigator>
    <view class="content-wrapper">
      <block wx:for="{{bangumiList}}" wx:key="avid">
        <!-- 使用正在直播模板，傳入當(dāng)前循環(huán)對象item -->
        <template is="jiefItem3" data="{{...item}}"/>
      </block>
    </view>
  </view>
  <!-- 番劇更新 end -->

index.js中添加數(shù)據(jù)源：

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
    /* 內(nèi)容Body數(shù)據(jù) */
    // 熱門推薦
    hotList: [
      {
        coverImg: 'http://i2.hdslb.com/bfs/archive/1239539a2f262d933bca7c2c1e290139420ba76a.jpg_320x200.jpg',
        title: '【樂正綾】《華夏之章》【小旭PRO】【絳舞亂丸】',
        playNum: '4.7萬',
        commentNum: '977',
        avid: 'av1'
      },
      {
        coverImg: 'http://i1.hdslb.com/bfs/archive/ecce95b426faf188e6c28f9d3a0bdc63c5a72bb3.jpg_320x200.jpg',
        title: '【斗圖歌】裝逼不如斗圖',
        playNum: '4.7萬',
        commentNum: '977',
        avid: 'av2'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/archive/11bf8d41fffcad31976317760e301e2db64be8c8.png_320x200.png',
        title: '【胖胖球】【雙子星】【獒龍】荒島 - El transcurrir de las horas',
        playNum: '4.7萬',
        commentNum: '977',
        avid: 'av3'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/archive/e73a92b0ed615b4d6568888906d09f84d0835674.jpg_320x200.jpg',
        title: '撩人凈土系列【紅菱歌舞伎初音】極樂凈土【大神犬PV付】MME配布',
        playNum: '4.7萬',
        commentNum: '977',
        avid: 'av4'
      }
    ],
    // 正在直播
    liveList: [
      {
        coverImg: 'http://i0.hdslb.com/bfs/live/96025d17ed05961230a7d1401ca1fe3b79cc12db.jpg',
        avatarImg: 'http://i2.hdslb.com/bfs/face/c55b2eae13646925187514c6f19e19293294d0c5.jpg',
        name: '尤櫻',
        desp: '你女朋友在直播你不來看看嗎？',
        online: '877',
        avid: 'av5'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/live/a1678768dd9c7023af7ab0f3de2a2df2c525e741.jpg',
        avatarImg: 'http://i0.hdslb.com/bfs/face/d1bec5ec111987537ecf3e7f43a8b3678ed3c5c3.jpg',
        name: '我是小麥伊哦哦',
        desp: '告別:我愛你們',
        online: '877',
        avid: 'av6'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/live/89047f3faee35d0cb095d7dfb01ec4d3a8ec4434.jpg',
        avatarImg: 'http://i0.hdslb.com/bfs/face/1e31ac069058528e26b9be60b26d86c9c9a99f62.jpg',
        name: '坂本叔',
        desp: '【坂本】非洲黑客',
        online: '877',
        avid: 'av7'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/live/24dbcc68325ff5fb3d235af97ad075dc5087733a.jpg',
        avatarImg: 'http://i2.hdslb.com/bfs/face/c55b2eae13646925187514c6f19e19293294d0c5.jpg',
        name: 'miriちゃん',
        desp: '日語點(diǎn)歌姬',
        online: '877',
        avid: 'av8'
      }
    ],
    // 番劇更新
    bangumiList: [
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/4d06e660b8da9cb5335552f4ebde89bbcb2e9d4f.jpg',
        bangumiTitle: '雙星之陰陽師',
        bangumiPage: '更新至第34話',
        avid: 'av9'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/0e6bce5d018796dda7782aa5c97bfdd14691348a.jpg',
        bangumiTitle: '口水三國',
        bangumiPage: '更新至第 關(guān)羽篇話',
        avid: 'av10'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/367387d69ac43c160a453d14cb34256abaca3b4a.jpg',
        bangumiTitle: '雙星之陰陽師',
        bangumiPage: '更新至第34話',
        avid: 'av11'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/4937bf71a4a5a6a426d09e9a78d27696b4746507.jpg',
        bangumiTitle: '雙星之陰陽師',
        bangumiPage: '更新至第34話',
        avid: 'av12'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/2ed6be9050dfa4afe6e2651741d81843a0e81c67.jpg',
        bangumiTitle: '黑白來看守所',
        bangumiPage: '更新至第9話',
        avid: 'av13'
      },
      {
        coverImg: 'http://i0.hdslb.com/bfs/bangumi/2673ac643b48eb5bda64c960a2ca850fbebb839d.jpg',
        bangumiTitle: '夏目友人帳 伍',
        bangumiPage: '更新至第8話',
        avid: 'av14'
      }
    ]
  },
  onLoad: function () {}
})

中間內(nèi)容部分到這里就完成了！（小安娜：我怎么感覺我被套路了！）

底部footer.wxml

原配方效果圖：

底部效果圖

我們是微信小程序，所以肯定不會有電腦版、客戶端這些鏈接出現(xiàn)。（小安娜：其實(shí)是你沒辦法加，因?yàn)樘D(zhuǎn)不了外部鏈接2333~）

<!-- 底部-begin -->
<view class="footer">
    <view>嗶哩嗶哩彈幕視頻網(wǎng) 滬ICP備13002172號-3</view>
    <view>信息網(wǎng)絡(luò)傳播視聽節(jié)目許可證：0910417</view>
    <view>【微信小程序】完全模仿B站移動Web端網(wǎng)站</view>
    <view>made in 杰爾夫CTT</view>
</view>
<!-- 底部-end -->

（小安娜：↑↑↑超鄙視上面代碼，又在里面加廣告），噓~你是不是自己人啊，寫了這么多沒功勞也有苦勞，就讓我宣傳宣傳我們自己嘛。（小安娜：我是杰爾夫CTT一員，我喂自己袋鹽！）

小安娜有問題

為什么沒講解把CSS替換成WXSS？

杰爾夫君：因?yàn)榇蟛糠諧SS都可以在WXSS文件中使用，如果講太多CSS替換成WXSS會導(dǎo)致篇幅太長，非常影響閱讀體驗(yàn)，我會把所有代碼都上傳到Git，詳細(xì)代碼請參考：

如有任何閱讀問題或意見反饋，歡迎加QQ群：301926812

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 每天的學(xué)習(xí)記錄，可能有的地方寫的不對，因?yàn)閯倢W(xué)，以后發(fā)現(xiàn)錯的話會回來改掉整體流程 https://develope...
    有點(diǎn)健忘閱讀 5,018評論 0贊 7
  • 因新工作主要負(fù)責(zé)微信小程序這一塊，最近的重心就移到這一塊，該博客是對微信小程序整體的整理歸納以及標(biāo)明一些細(xì)節(jié)點(diǎn)，初...
    majun00閱讀 7,632評論 0贊 9
  • 第一章 什么是微信小程序 1. 小程序介紹 微信小程序是一種全新的連接用戶與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取...
    呆毛和二貨閱讀 969評論 0贊 1
  • 姓名：陳權(quán) 公司：青檸養(yǎng)車 【知~學(xué)習(xí)】 《財富自由》音頻打卡第6天 《原則》音頻打卡第5天 《輕課口語》打卡第4...
    水青檸閱讀 166評論 0贊 0
  • 今天，我最愛的杯子被我打碎了，很傷心，但還是默默地將它放進(jìn)了垃圾袋！在熱垃圾的時候突然想起曾經(jīng)看過的一篇文章，一位...
    原磊閱讀 300評論 0贊 0

友情鏈接更多精彩內(nèi)容