Create by jsliang on 2018-9-17 17:58:56
Recently revised in 2018-10-22 09:58:07

 Hello 小夥伴們，如果覺得本文還不錯，記得給個 star ， 你們的 star 是我學習的動力！GitHub 地址

 GitHub 最新更新：2018-10-17 13:34:11。追求最新文章的小夥伴可前往下載，掘金上的文章每週六、日更新。

寫在前面

 首個微信小程式實踐記錄:
 工作量: PSD 18 張 (匯出的 JPG 30 張)
 耗時：12 個工作日
 總結1: 在頁面製作商，需要 3 周工作日（工作 15 天）搞定，前後端對介面另計。實際上，12 個工作日可以搞定所有頁面，但是應該往前鋪 1.5D 熟悉框架，往後鋪 1.5D 整理程式碼。當然每個人的耗時可能不同，可根據個人實際情況進行調整。
 總結2：在 API 呼叫上，根據介面數量可能需要 7-12 個工作日進行 API 呼叫，難點表現在： 1. 介面不夠豐富，資料量不足； 2. 介面資料不夠正式真實，跟前面的假資料相差太大； 3. 介面可能沒法正常呼叫 等原因。故因根據小程式業務邏輯進行工作時長的報備。

 這裡有 jsliang 微信小程式開發中遇到的所有坑，以及在填坑過程中的一些個人經驗。jsliang 利用這篇教程儲存一些常用的微信小程式開發技巧，方便查詢。它可能教不了你什麼，但至少能省下你百度的功夫。

 請結合 《目錄》 和 《返回目錄》 來進行跳轉，獲得更好的閱讀體驗。

 本文技術支援：Ansen江

 注1：由於更新頻繁，有時候平臺上的文章版本可能沒有圖片或者目錄無法跳轉，所以小夥伴需要獲取最新資料的，請前往 GitHub：地址

 注2：如果小夥伴使用的是手機版開啟，那麼推薦小夥伴使用電腦開啟，因為各平臺的手機端大都不支援頁內跳轉，看起來比較費勁。

一 目錄

 目前已有 48 個坑。

請各位按目錄檢索時注意：
3.1、3.2、3.3…… 等二級目錄對應著一個章節。
3.1.1、3.1.2、3.1.3…… 等三級目錄將該二級目錄這個大章節詳細拆分成諸多小坑，方便檢視。

目錄	坑
一 目錄
二 前言
三 填坑實戰
3.1 swiper 輪播圖	5
3.1.1 行內樣式無效
3.1.2 圖片樣式修改不了
3.1.3 swiper 屬性值設定
3.1.4 輪播圖圖片跳轉
3.1.5 wx:key
3.1.6 實戰程式碼
3.2 tabBar 與 switchTab	3
3.2.1 底部導航跳轉
3.2.2 自定義底部導航
3.2.3 自定義元件
3.3 px、rem 與 rpx	1
3.4 微信 web 開發者工具	2
3.4.1 無法輸入中文
3.4.2 無法滑動滾輪
3.5 元件與 API	2
3.5.1 概念混淆：元件 VS API
3.5.2 API 查詢不到對應的方法
3.6 flex 佈局	2
3.6.1 基礎概念
3.6.2 左右佈局
3.6.3 混合佈局
3.7 background-image 套用本地圖片無效	1
3.8 <block> 與 <view>	1
3.9 搜尋框	2
3.9.1 margin-top 無法上浮
3.9.2 改造 WeUI 搜尋框
3.10 微信小程式分享	1
3.11 border-box 設定	1
3.12 自定義導航條	6
3.12.1 WeUI 選項卡
3.12.2 自定義選項卡效果與實現
3.12.3 繫結事件如何傳遞資料
3.12.4 不允許駝峰
3.12.5 獲取 data 資料
3.12.6 實現文字省略
3.13 黑科技：<modal>	2
3.13.1 被遺棄的 <modal>
3.13.2 四種彈窗寫法
3.14 小程式解析 HTML	6
3.14.1 解析 HTML 的三種方法
3.14.2 wxParse
3.14.3 rich-text
3.14.4 web-view
3.15 詭異的 open-type	1
3.16 <button>去樣式及其內嵌<image>	1
3.17 下拉重新整理和上拉載入	2
3.18 獲取 input 的值	1
3.19 onLaunch 載入問題	2
3.19.1 小程式執行順序
3.19.2 路由守衛
3.20 request 封裝與 api 抽離	1
3.21 判斷資料是否讀取完	1
3.22 客服系統研究	1
3.23 檔案線上預覽	2
3.24 儘量使用 ES6	1
3.25 視訊功能實現	1
四 網友補充
4.1 資料夾讀取報錯	1
4.2 textarea問題多多	1

二 前言

 返回目錄

本文章原名【微信小程式 100 坑】

 微信小程式的開發教程，或許寫出來是非常受歡迎的。
 但是：

• 第一，微信小程式是國內的，有中文文件，雖然它的文件說明有點坑，但好歹有文件，閱讀理解對小夥伴們來說不是問題。
• 第二， jsliang 的文筆並沒有想象中的那麼好，想想如果我帶你們走了一遍小程式開發，然後你們以為是一條平坦路，結果碰到一堆坑坑窪窪，咋辦？最後的鍋，會不會到我背啊，可怕！

 所以，在這裡， jsliang 結合 “日常躺坑” ，先為你解決小程式的 100 個坑！雖然現在可能還不夠，但是第一天我就碰到 4/5 個了，我想我可以幫你們躺完 100 個的！！！
 現在的微信開發者工具顯示的開發版本是："libVersion": "2.0.4"
 如果你開發的版本已經解決了這個 bug ，或者你覺得這個 bug 還有其他解決方法，或者你覺得這個玩意還有其他 bug ，請告訴我，我會補充到這篇文件上，順帶記上您的大名，謝謝！
 QQ： 1741020489

三 填坑實戰

 返回目錄

 這裡的坑：

• 有的來源於微信自帶的開發文件：小程式開發文件。在文件中，你會發現很多的樂趣！畢竟，你不知道什麼時候中文成為了你的語言障礙~
• 有的是開發中遇到的，然後結合大量的百度結果，進行的有效性總結。

 希望小夥伴在百度中或者無意看到這篇文章，請熟練使用瀏覽器的 Ctrl + F，查詢需要的問題答案。

3.1 swiper 輪播圖

 返回目錄

本元件目前已有 5 個坑，有興趣的小夥伴可以詳看。

  程式碼來源於該地址：微信元件 swiper 。

 為方便小夥伴檢視，下面貼出原版程式碼：

demo.wxml

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
複製程式碼

demo.js

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})
複製程式碼

 好的，上面就是微信官方文件的演示程式碼，如果你跟著演示程式碼走了一遍碰到疑問的話，看看這裡我挖的土是不是能填好你的坑：

3.1.1 行內樣式無效

 返回目錄

 demo.wxml 中出現的 <image src="{{item}}" class="slide-image" width="355" height="150"/> 這行， width 和 height 的行內屬性是忽悠老百姓的，它並沒鳥用 ！我們需要在 slide-image 這個 class 類中修改 width 和 height。簡而言之，行內樣式都是騙人的，乖，我們還是去 demo.wxss 寫樣式吧~

3.1.2 圖片樣式修改不了

 返回目錄

 在任何出現圖片的地方（包括但不限於輪播圖），如果你發現不僅行內寫法無效之外，還發現單純地給圖片加 class，去 *.wxss 寫樣式也無效的話。那麼，我建議小夥伴最好採用樣式加重法，即 .image-wrap .image 這種寫法格式，來確保圖片樣式能進行修改。詳細用法可看下文。

3.1.3 swiper 屬性值設定

 返回目錄

 swiper 屬性值。官方文件說明：

 雖然，它的屬性名和屬性值是這麼說的。但是，用的時候，首先你需要在 demo.wxml 中的 swiper 繫結這個屬性名，然後在 demo.js 中設定其屬性值。值得注意的是，它的繫結值，稍微不同於 Vue， 需要設定 {{}} 形式。如果文字描述你看得不是很清楚，可以參照下面的程式碼進行理解。

3.1.4 輪播圖圖片跳轉

 返回目錄

 關於輪播圖的地址跳轉，在微信小程式的官網是沒用提及的，也是 jsliang 去百度檢視了下，才知道怎麼設定（可能是我一開始就挑戰的難度太高了麼 -_-|| ），在下面 jsliang 貼出來程式碼~想知道怎麼解決的可以去看看：首先，在 data 中設定 link ；然後，設定 navigator 導航遍歷 item.link 。

3.1.5 wx:key

 返回目錄

 關於 wx:key ， wx:key 的作用是：當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。但是，在其 swiper 中，小程式本身是沒有寫的，所以它會帶有 warning ，這裡也是個小坑， jsliang 也是百度了下也知道這件事：點我瞭解。

3.1.6 實戰程式碼

 返回目錄

 下面給出這 5 個坑的解決程式碼，如有不對，盡情指出：

index.wxml

<view class="carousel">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="#707071" indicator-active-color="#fff" circular="true">
    <!-- wx:key ： 提高列表渲染效率 -->
    <block wx:for="{{imgUrls}}" wx:key="{{item.index}}">
      <swiper-item>
        <navigator url="{{item.link}}" hover-class="navigator-hover">
          <image src="{{item.url}}" class="slide-image" />
        </navigator>
      </swiper-item>
    </block>
  </swiper>
</view>
複製程式碼

index.wxss

.carousel .slide-image {
  width: 100%;
  height: 420rpx;
}
複製程式碼

index.js

Page({
  data: {
    imgUrls: [
      {
        link: '../index/index',
        url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      },
      {
        link: '../demo/demo',
        url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      },
      {
        link: '../logs/logs',
        url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
      }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }
})
複製程式碼

3.2 tabBar 與 switchTab

 返回目錄

本元件目前已有 3 個坑，有興趣的小夥伴可以詳看。

 tabBar ：底部選單欄，需要在 app.json 中設定。使用方法：見下文。
 navigator ：導航切換。使用方法：地址
 switchTab ：控制 tabBar 的切換。使用方法：地址

3.2.1 底部導航跳轉

 返回目錄

 在這裡，我們講下 tabBar 的坑，如果你在 app.json 中設定了 tabBar ：

app.json

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "./public/index_tabBar1_nor.png",
      "selectedIconPath": "./public/index_tabBar1.png"
    }, {
      "pagePath": "pages/demo/demo",
      "text": "發現",
      "iconPath": "./public/index_tabBar2_nor.png",
      "selectedIconPath": "./public/index_tabBar2.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "我的",
      "iconPath": "./public/index_tabBar3_nor.png",
      "selectedIconPath": "./public/index_tabBar3.png"
    }]
  }
複製程式碼

 那麼，我們就需要通過設定 switchTab 來控制底部導航的跳轉，而不能通過 navigator 來跳轉：

demo.wxml

<view>
  <button bindtap="linkTo">Hello</button>
</view>
複製程式碼

demo.js

linkTo: function () {
  wx.switchTab({
    url: '../index/index'
  });
},
複製程式碼

3.2.2 自定義底部導航

 返回目錄

 那麼問題又來了，當我們切換到子頁面的時候，我們發現 tabBar 這個底部導航欄不見了，然後問了下 Ansen江 ，他說之前是整個小程式都有的，有些頁面還要想方設法去隱藏。
 但是現在嘛……它沒了！沒了啊！！！在微信小程式的文件沒看到有喚起底部導航條的方法，難道我要做一個導航條了麼 -_-||
 回答是：yes！
 所以，下面給出該底部導航條 tabBar 的實現情況和程式碼片段：

注：圖片寬高均為 54rpx

*.wxml

<view class="nav">
  <view class="nav-home" bindtap="goHome">
    <image src="../../public/index_productDetail_icon_home.png"></image>
    <text>首頁</text>
  </view>
  <view class="nav-service">
    <image src="../../public/index_productDetail_icon_service.png"></image>
    <text>線上諮詢</text>
  </view>
  <view class="nav-phone" bindtap="callWaiter">
    <image src="../../public/index_productDetail_icon_phone.png"></image>
    <text>電話諮詢</text>
  </view>
  <navigator url="../indexPurchaseProduct/indexPurchaseProduct">
    <view class="nav-buy">
      <text>立即訂購</text>
    </view>
  </navigator>
</view>
複製程式碼

*.wxss

.nav {
  display: flex;
  justify-content: space-around;
  font-size: 20rpx;
  border: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  background: #fff;
}
.nav view {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav image {
  width: 54rpx;
  height: 54rpx;
}
.nav text {
  margin-top: 7rpx;
}
.nav-home {
  border-right: 1px solid #ccc;
  width: 130rpx;
  padding-top: 5rpx;
}
.nav-service {
  border-right: 1px solid #ccc;
  width: 130rpx;
  padding-top: 5rpx;
}
.nav-phone {
  width: 130rpx;
  padding-top: 5rpx;
}
.nav-buy {
  background: #eb333e;
  color: #fff;
  width: 360rpx;
  height: 98rpx;
  line-height: 80rpx;
  font-size: 34rpx;
}
複製程式碼

*.js

callWaiter: function(res) {
  wx.makePhoneCall({
    phoneNumber: '13264862250',
    success: function(res) {
      console.log("撥打成功");
      console.log(res);
    },
    fail: function(res) {
      console.log("撥打失敗");
      console.log(res);
    },
    complete: function(res) {
      console.log("撥打完成");
      console.log(res);
    }
  })
},
goHome: function() {
  wx.switchTab({
    url: '../index/index'
  })
},
複製程式碼

3.2.3 自定義元件

 返回目錄

 在最近的工作中，又發現一個小問題：

 像這個導航條，它需要根據頁面所在的模組，動態地展示不同位置的狀態為活躍，而且它是需要在多個頁面重複出現的，如果每個頁面我都要複製貼上一遍，到時候要修改起來的時候，麻煩不說，最重要的是，它可能影響我前端的效能了，能不能直接將其封裝起來呢？

 自定義元件：連結

 是的，發現在小程式文件中是存在這個東西的。當然，至於過程中我百度了幾篇文章來輔助寫出下面的程式碼，你猜？

 子元件寫法

navBar.wxml

<!-- 底部導航條 -->
<view class="navBar">
  <view class="navBar-home" bindtap='goHome'>
    <image wx:if="{{homeActive}}" src="../../public/index_tabBar1.png"></image>
    <image wx:if="{{!homeActive}}" src="../../public/index_tabBar1_nor.png"></image>
    <text>首頁</text>
  </view>
  <view class="navBar-explore" bindtap='goExplore'>
    <image wx:if="{{exploreActive}}" src="../../public/index_tabBar2.png"></image>
    <image wx:if="{{!exploreActive}}" src="../../public/index_tabBar2_nor.png"></image>
    <text>發現</text>
  </view>
  <view class="navBar-user" bindtap='goUser'>
    <image wx:if="{{userActive}}" src="../../public/index_tabBar3.png"></image>
    <image wx:if="{{!userActive}}" src="../../public/index_tabBar3_nor.png"></image>
    <text>我的</text>
  </view>
</view>
複製程式碼

navBar.wxss

/* 底部導航條 */
.navBar {
  width: 100%;
  padding: 18rpx 0;
  border-top: 1rpx solid #cccccc;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  background: #fff;
}
.navBar image {
  width: 55rpx;
  height: 55rpx;
}
.navBar view {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20rpx;
  color: #999999;
}
.navBar-user text {
  color: #d0a763;
}
複製程式碼

navBar.js

// pages/componentNavBar/navBar.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    homeActive: {
      type: Boolean,
      value: false
    },
    exploreActive: {
      type: Boolean,
      value: false
    },
    userActive: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 元件的初始資料
   */
  data: {

  },

  /**
   * 元件的方法列表
   */
  methods: {
    // 返回首頁
    goHome: function (e) {
      wx.switchTab({
        url: '../index/index',
      })
    },
    // 返回發現頁 
    goExplore: function (e) {
      wx.switchTab({
        url: '../explore/explore',
      })
    },
    // 返回我的頁面
    goUser: function (e) {
      wx.switchTab({
        url: '../user/user',
      })
    },
    showCode: function(e) {
      console.log(e);
      let that = this;
      console.log(that.data);
    }
  }
})

複製程式碼

navBar.json

{
  "component": true,
  "usingComponents": {}
}
複製程式碼

 然後，在父元件的使用，只需要：

*.wxml

<view>
  <navBar userActive="{{userActive}}"></navBar>
</view>
複製程式碼

*.json

{
  "usingComponents": {
    "navBar": "../componentNavBar/navBar"
  }
}
複製程式碼

*.js

data: {
  userActive: true
},
複製程式碼

 怎樣？這就是自定義元件的寫法，是不是覺得特好用涅，一次寫完，終身受用。

3.3 px、rem 與 rpx

 返回目錄

本節目前已有1個坑，有興趣的小夥伴可以詳看。

 在微信中，它自帶了一套屬於自己的單位：rpx ， rpx 不同於之前我們認識的 px 、 rem 、 em ，如果你的設計稿是 750 px 的，那麼很容易的， 1px = 1rpx ，但是，如果設計稿不是 750 px ，那麼將造成一個 bug ，至於這個 bug 如何解決……
 -_-|| 誰知道呢……要不先把UI設計師宰了？
 知識補充：關於 rpx 。

3.4 微信 web 開發者工具

 返回目錄

本節目前已有 2 個坑，有興趣的小夥伴可以詳看。

3.4.1 無法輸入中文

 返回目錄

 如果你在開發過程中，發現只能寫英文了，而中文無法輸入了，千萬別急，也別怪輸入法出 bug 了，你只需要：重啟開發工具。

3.4.2 無法滑動滾輪

 返回目錄

 如果你某時刻，突然發現你沒法滾動程式碼進行檢視，而是需要拖動滾動條才行，請別怪你的滑鼠，你可以去瀏覽器開啟一篇文章看看，enm...你的滑鼠還是好的~所以，請：重啟開發工具。

3.5 元件與 API

 返回目錄

本節目前已有 2 個坑，有興趣的小夥伴可以詳看。

3.5.1 概念混淆：元件 VS API

 返回目錄

 首先，科普下 元件 與 API 是什麼：

• 元件：對資料和方法的封裝，使用元件可以實現拖放式程式設計、快速的屬性處理以及真正的物件導向的設計【百度百科】。那麼，可以理解為：開發中常用的一些部件，我們都可以封裝起來，然後在需要的時候拿來用，即為元件。
• API：預先定義的函式，提供應用程式與開發人員無需訪問原始碼，基於某軟體或硬體得以訪問一組例程的能力【百度百科】。就是說已經寫好的一些 Function 或者後端介面，前端直接呼叫就行了。

 但是，在微信小程式官方文件中，元件與API，拆分地有點不科學。
 例如：輪播圖與底部導航條

• 一個在元件中，一個在 API 中；
• 一個在 wxml 、 wxss 、 js 中要設定對應的引數，一個只需要在 app.json 中設定就行。

 可能微信小程式考慮到底部導航條不應該有太大的變化（例如讓你修改太多樣式或者 js ），所以將導航條內嵌至原始碼中了。
 但是，這可能導致什麼重要影響嗎？是的，如果底部導航條需要進行修改呢？例如：3.2.3 自定義元件。這樣的情況下，我們的開發時間就有所增加了。

3.5.2 API 查詢不到對應的方法

 返回目錄

 如果小夥伴你經常有去看微信小程式官方文件的話，那麼你一定會有一件事需要吐槽，那就是：
 明明上次我見到過某個 API 實現了我需要做的功能，但是改天我回去查詢的時候，它卻提示我沒有這個玩意，這是什麼鬼？！
 是的，跟我們 3.13 黑科技：<modal> 這一章中講到的 <modal> 這個黑科技一樣，有時候官方文件也不是萬能的，它總會有這樣那樣的毛病，導致我們找不到需要的東西，只能去百度了 -_-||

3.6 flex 佈局

 返回目錄

本節目前已有 3 個坑，有興趣的小夥伴可以詳看。

 Flex佈局又稱彈性佈局，在小程式開發中比較適用。但是由於 jsliang 之前沒怎麼用過 Flex 佈局，所以在這裡我們們特意去踩下坑，充實下自己。【小程式開發之頁面佈局】【阮一峰-Flex 佈局教程】
 在我們佈局頁面的時候，最好看看 阮一峰 的教程，平時遇到佈局的問題的時候，我都習慣去上面 阮一峰 的文章看看：

3.6.1 基礎概念

 返回目錄

 基礎概念：地址

  <!-- 設定 flex 佈局 -->
  display: flex;

  <!-- 
    1、決定主軸的方向
    row - （預設）水平方向，起點在左端
    row-reverse - 水平方向，起點在右端
    column - 垂直方向，起點在上沿
    column-reverse - 垂直方向，起點在下沿
   -->
  flex-direction: row | row-reverse | column | column-reverse;
  
  <!-- 
    2、一條軸線（一行）排不下時如何解決
    nowrap - （預設）不換行
    warp - 換行，第一行在上方
    wrap-reverse - 換行，第一行在下方
   -->
  flex-wrap: nowrap | wrap | wrap-reverse;
  
  <!-- 
    3、flex-flow = flex-direction + flex-wrap。即 flex-flow 是這兩個屬性的合集
    row nowrap - （預設）水平方向，起點在左端，不換行
   -->
  flex-flow: <flex-direction> || <flex-wrap>;
  
  <!-- 
    4、justify-content 定義專案在主軸上的對齊方式
    flex-start - 左邊對齊
    flex-end - 右邊對齊
    center - 居中對齊
    space-between - 兩端對齊，空格在中間
    space-around - 空格環繞
   -->
  justify-content: flex-start | flex-end | center | space-between | space-around;
  
  <!-- 
    5、align-items 定義專案在交叉軸上如何對齊
    flex-start - 頂部對齊，即文字圖片等頂部同一條線上
    flex-end - 底部對其，即文字圖片等底部在同一條線上
    center - 中間對其，即文字圖片不管多高，都拿它們的中間放在同一條線上
    stretch - 將文字圖片充滿整個容器的高度，強制統一
    baseline - 將每項的第一行文字做統一在一條線上對齊
   -->
  align-items: flex-start | flex-end | center | stretch | baseline;
  
  <!-- 
    6、align-content 定義多根軸線的對齊方式。如果只有一根軸線（只有一行），該屬性不起作用
    flex-start - 這幾行頂部對齊
    flex-end - 這幾行底部對齊
    center - 這幾行居中對齊
    stretch - 這幾行進行擴充套件或者縮放，從而填滿容器高
    space-between - 這幾行中間使用空格進行填充
    space-around - 這幾行兩邊及中間進行填充
   -->
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
複製程式碼

3.6.2 左右佈局

 返回目錄

 實現效果如下：

 如圖，這是我們要實現的左右佈局效果。那麼，在微信小程式要怎麼做呢？

*.wxml

<view class="top-recommended-headlines">
  <view class="top-recommended-headlines-left">
    <text>熱門推薦</text>
  </view>
  <view>
    <image src="../../public/index_top_recommended_headlines.png"></image>
  </view>
  <view class="top-recommended-headlines-right">
    <navigator url="../indexProduct/indexProduct">檢視全部 ></navigator>
  </view>
</view>
複製程式碼

*.wxss

.top-recommended-headlines {
  display: flex;
  align-items: flex-end;
  height: 31rpx;
  line-height: 31rpx;
  margin-bottom: 10rpx;
}
.top-recommended-headlines-left text {
  font-size: 32rpx;
  font-weight: bold;
}
.top-recommended-headlines image {
  width: 366rpx;
  height: 31rpx;
  margin-left: 10rpx;
}
.top-recommended-headlines-right navigator {
  font-size: 26rpx;
  color: #a9a9a9;
  margin-left: 50rpx;
}
複製程式碼

3.6.3 混合佈局

 返回目錄

 實現效果如下：

 如圖，這是我們要實現的左右佈局效果。那麼，在微信小程式要怎麼做呢？

*.wxml

<view class="weui-tab__content-item3" wx:for="{{tabs3Content}}" wx:key="{{item.index}}">
  <navigator url="../indexProductArticle/indexProductArticle">
    <view class="weui-tab__content-item3-question">
      <image src="../../public/index_productDetail_icon_question.png"></image>
      <text>{{item.title}}</text>
    </view>
    <view class="weui-tab__content-item3-answer">
      <image src="../../public/index_productDetail_icon_answer.png"></image>
      <text>{{item.content}}</text>
    </view>
    <view class="weui-tab__content-item3-detail">
      <text class="weui-tab__content-item3-detail-datatime">{{item.datatime}}</text>
      <text class="weui-tab__content-item3-detail-reader">{{item.reader}}閱讀</text>
      <text class="weui-tab__content-item3-detail-label">#{{item.label}}#</text>
    </view>
  </navigator>
  <view class="weui-tab__content-item3-gap">
    <image src="../../public/index_productDetail_gap.png"></image>
  </view>
</view>
複製程式碼

*.wxss

.weui-tab__content-item3 {
  padding-left: 30rpx;
  padding-right: 30rpx;
  margin-top: -10rpx;
  margin-bottom: 10rpx;
}
.weui-tab__content-item3:first-child {
  padding: 40rpx 30rpx 0;
}
.weui-tab__content-item3-question image {
  width: 30rpx;
  height: 30rpx;
}
.weui-tab__content-item3-question text {
  font-size: 30rpx;
  line-height: 46rpx;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
}
.weui-tab__content-item3-answer image {
  width: 30rpx;
  height: 30rpx;
}
.weui-tab__content-item3-answer text {
  font-size: 26rpx;
  line-height: 42rpx;
  color: #a9a9a9;
  margin-left: 10rpx;
}
.weui-tab__content-item3-detail {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #a9a9a9;
}
.weui-tab__content-item3-detail-label {
  color: #d0a763;
}
.weui-tab__content-item3-gap image {
  width: 100%;
  height: 30rpx;
}
複製程式碼

*.js

tabs3Content: [
  {
    title: '員工發明創造是否屬於職務發明的認證標準?',
    content: '隨著企業對智慧財產權在企業發展中核心競爭力的認識力提高，企業保護自身智慧財產權的意識不斷增強，使其技術得......',
    datatime: '2018-03-05',
    reader: '2081',
    label: '智慧財產權'
  }
]
複製程式碼

3.7 background-image 套用本地圖片無效

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 在小程式中，如果你使用 wxss，你是可以發現有 background-image 的提示的。但是，如果你設定它的背景圖是本地圖片，你會發現，它是不生效的。
 解決方案：

1. 在使用背景圖片的時候用網路圖片，就是用外鏈的形式，比如你將這張圖片放到你的伺服器，如：https://xxxx/xxx.jpg；
2. 將背景圖片使用編碼base64進行轉換，可以在這個網址進行 點我前往 轉換，如：background-image: url("轉換後得到的編碼文字")，如果多次使用的話可以將該值設定為全域性變數，再在js檔案進行引用即可。
3. 使用 image 元件 + position 定位而不是使用 background-image 。

3.8 <block> 與 <view>

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 兩者的區別是，<view> 是一個元件，會在頁面上做渲染；<block> 不是一個元件，它僅僅是一個包裝元素，只接受控制屬性，不會在頁面中做任何渲染。
 所以，如果你僅僅是需要包裹，而不是渲染一個層，可以使用 <block> 提升效能。

3.9 搜尋框

 返回目錄

本節目前已有 2 個坑，有興趣的小夥伴可以詳看。

3.9.1 margin-top 無法上浮

 返回目錄

 首先，我們要實現的效果是：

 然後， jsliang 的想法是：

*.wxml

<view class="search">
  <input class="search-product-input" bindinput="bindKeyInput" auto-focus maxlength='10'></input>
  <label class="search-placeholder">
    <image class="search-placeholder-icon" src="../../public/index_indexProduct_icon_search.png"></image>
    <text class="search-placeholder-text">搜尋產品</text>
  </label>
  <view></view>
</view>
複製程式碼

*.wxss

.search {
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.search-product-input {
  background: #f5f5f5;
  width: 650rpx;
  height: 65rpx;
  border-radius: 30rpx;
  font-size: 30rpx;
  padding-left: 20rpx;
}
.search-placeholder {
  font-size: 26rpx;
  text-align: center;
  margin-top: -65rpx;
  z-index: 2;
}
.search-placeholder-icon {
  width: 24rpx;
  height: 24rpx;
}
.search-placeholder-text {
  margin-left: 10rpx;
}
複製程式碼

 你注意到了嗎？在 *.wxml 中， jsliang 設定了個空的 <view> ，如果你把這個 <view> 去掉，你會驚奇地發現，它……下來了……

 好吧，可能有其他的實現方式，但是如果你下次使用這種方式，注意上面這個坑~

3.9.2 改造 WeUI 搜尋框

 返回目錄

 回頭看了下 WeUI 的實現方式，發現跟我的思路是挺像的，關於 input 的實現方式，現在依據 WeUI ，成功實現了輸入框：

 原始碼奉上：

*.wxml

<!-- 搜尋框 -->
<view class="search">
  <view class="weui-search-bar">
    <view class="weui-search-bar__form {{inputShowed ? 'form-border' : ''}}">
      <view class="weui-search-bar__box">
        <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
        <input type="text" class="weui-search-bar__input" placeholder="搜尋" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
        <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
          <icon type="clear" size="14"></icon>
        </view>
      </view>
      <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
        <icon class="weui-icon-search" type="search" size="14"></icon>
        <view class="weui-search-bar__text">搜尋</view>
      </label>
    </view>
    <view wx:if="{{inputVal.length <= 0}}" class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
    <view wx:if="{{inputVal.length > 0}}" class="weui-search-bar__submit-btn" hidden="{{!inputShowed}}" bindtap="searchInput">搜尋</view>
  </view>
</view>
複製程式碼

*.js

Page({
  data: {
    inputShowed: false,
    inputVal: ""
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function (e) {
    this.setData({
      inputVal: e.detail.value
    });
  }
})
複製程式碼

*.wxss

.search {
  height: 100rpx;
  padding: 18rpx 30rpx;
}
.weui-search-bar {
  padding: 0;
  background-color: #fff;
  border-top: none;
  border-bottom: none;
  height: 64rpx;
}
.weui-search-bar__form {
  border: none;
}
.form-border {
  border: 1rpx solid #f5f5f5;
  background: #f5f5f5;
}
.weui-search-bar__label {
  background: #f5f5f5;
  border-radius: 30rpx;
}
.weui-search-bar__cancel-btn {
 font-size: 26rpx; 
 background: rgb(8, 202, 186);
 color: #fff;
 padding: 2rpx 20rpx 0 20rpx;
 border-radius: 10rpx;
}
.weui-search-bar__submit-btn {
  font-size: 26rpx; 
  background: rgb(8, 200, 248);
  color: #fff;
  padding: 10rpx 20rpx 0 20rpx;
  border-radius: 10rpx;
}
複製程式碼

3.10 微信小程式分享

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 官方文件：地址
 在這裡，提醒廣大小夥伴注意了，注意了，注意了！重要的事說三遍。
 當你新建 page 的時候，微信 web 開發者工具會自動幫你新增分享事件:

/**
  * 使用者點選右上角分享
  */
onShareAppMessage: function (res) {
  // 實現分享功能
  return {
    title: this.data.productName,
    path: '/pages/indexProductDetail.js?productId=' + this.data.productId,
    imageUrl: this.data.videoImageSrc,
    success: (res) => {
      console.log("分享成功~");
    },
    fail: (res) => {
      console.log("分享失敗~");
    }
  }
}
複製程式碼

 所以，如果你在前面定義了，它會在最下面偷偷幫你清空，然後你就覺得無法自定義分享事件……
 是的，jsliang 打死都不承認這是我自己的鍋，新手注意！新手注意！！新手注意！！！

3.11 border-box 設定

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 熟知盒模型的小夥伴應該知道，盒模型有兩種計算方式：

1. box-sizing: border-box;
2. box-sizing: content-box;

 在 border-box 中，整個 view 的寬、高，包括 margin、padding、border。
 而在 content-box 中，整個 view 的寬、高，則不包括上面元素。

 如上圖，如果一個 view ，你的程式碼如下：

view {
  box-sizing: border-box;
  margin: 10rpx;
  width: 100rpx;
  height: 100rpx;
  padding: 10rpx;
}
複製程式碼

 那麼，你的整個寬高還是 100rpx。
 但是，如果你的程式碼如下：

view {
  box-sizing: content-box;
  margin: 10rpx;
  width: 100rpx;
  height: 100rpx;
  padding: 10rpx;
}
複製程式碼

 那麼，你的整個盒子寬高是 120rpx。

 如果你在設計頁面中，發現內容區被撐爆了，那麼，請檢查下現在的 border-box 是什麼。

3.12 自定義選項卡

 返回目錄

本節目前已有 6 個坑，有興趣的小夥伴可以詳看。

3.12.1 WeUI 選項卡

 返回目錄

 使用 WeUI 的導航條，首先需要引用 WeUI 的 CSS 樣式：地址

 下載 weui.wxss 並在 app.wxss 中引用即可

app.wxss

/* 引用WeUI */
@import 'weui.wxss';
複製程式碼

 然後，我們直接往頁面加入它的選項卡並根據專案需求修改其樣式：

*.wxml

<view class="tab">
  <view class="weui-tab">
    <view class="weui-navbar">
      <block wx:for="{{tabs}}" wx:key="*this">
        <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
          <view class="weui-navbar__title">{{item}}</view>
        </view>
      </block>
      <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
    </view>
    <view class="weui-tab__panel">
      <!-- 全部 -->
      <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
        <view class="weui-tab__content-item1">
          <text>全部</text>
        </view>
      </view>
      <!-- 已付款 -->
      <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
        <view class="weui-tab__content-item2">
          <text>已付款</text>
        </view>
      </view>
      <!-- 待付款 -->
      <view class="weui-tab__content" hidden="{{activeIndex != 2}}">
        <view class="weui-tab__content-item3">
          <text>待付款</text>
        </view>
      </view>
    </view>
  </view>
</view>
複製程式碼

*.wxss

.tab {
  font-size: 26rpx;
}
.tab image {
  width: 173rpx;
  height: 29rpx;
}
.weui-navbar {
  border-top: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
}
.weui-navbar__slider {
  background: #d0a763;
  width: 4em;
}
.weui-navbar__item.weui-bar__item_on {
  color: #d0a763;
}
.weui-tab__content {
  margin-bottom: 100rpx;
}
複製程式碼

*.js

var sliderWidth = 52; // 需要設定slider的寬度，用於計算中間位置

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    // 選項卡導航
    tabs: ["全部", "已付款", "待付款"],
    activeIndex: 1,
    sliderOffset: 0,
    sliderLeft: 0,
  },
  // 選項卡切換
  tabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    // 計算搜尋框活躍條
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
  }
})
複製程式碼

3.12.2 自定義選項卡效果與實現

 返回目錄

 自定義選項卡的程式碼實現：

 實現效果圖如下：

 實現程式碼如下：

*.wxml

<view>
  <view class="weui-tab__nav">
    <text wx:for="{{tabs2Nav}}" wx:key="item.index" class="{{item.state == 1 ? 'weui-tab__nav-active' : ''}}" bindtap="tabs2NavClick" data-labelId="{{item.id}}">{{item.label}}</text>
  </view>
  <view class="weui-tab__content-item2" wx:for="{{tabs2Content}}" wx:key="{{item.index}}">
    <view class="weui-tab__content-item-descritpion">
      <view class="{{item.type == 1 ? 'weui-tab__content-item-icon-type' : 'hide'}}">
        <image src="../../public/index_productDetail_icon_word.png"></image>
      </view>
      <view class="{{item.type == 2 ? 'weui-tab__content-item-icon-type' : 'hide'}}">
        <image src="../../public/index_productDetail_icon_excel.png"></image>
      </view>
      <view class="{{item.type == 3 ? 'weui-tab__content-item-icon-type' : 'hide'}}">
        <image src="../../public/index_productDetail_icon_ppt.png"></image>
      </view>
      <view class="{{item.type == 4 ? 'weui-tab__content-item-icon-type' : 'hide'}}">
        <image src="../../public/index_productDetail_icon_pdf.png"></image>
      </view>
      <view class="weui-tab__content-item-descritpion-content">
        <text class="weui-tab__content-item-descritpion-content-title">{{item.title}}</text>
        <view class="weui-tab__content-item-descritpion-content-datatime">
          <text class="weui-tab__content-item-descritpion-content-datatime1">釋出時間：{{item.datatime}}</text>
          <text class="{{item.effectiveTime ? 'weui-tab__content-item-descritpion-content-datatime2' : 'hide'}}">生效時間：{{item.effectiveTime}}</text>
        </view>
      </view>
    </view>
    <view class="weui-tab__content-item-download-state" bindtap='downloadFile' data-url="{{item.url}}">
      <image src="../../public/index_productDetail_icon_undown.png"></image>
    </view>
  </view>
</view>
複製程式碼

*.wxss

.weui-tab__nav {
  background: #f5f5f5;
  border: 1rpx 0rpx solid #e6e6e6;
  height: 90rpx;
  padding: 17rpx 41rpx;
  display: flex;
  justify-content: space-between;
}
.weui-tab__nav text {
  border-radius: 56rpx;
  height: 56rpx;
  line-height: 56rpx;
  padding: 15rpx 23rpx;
  font-size: 26rpx;
  font-weight: bold;
}
.weui-tab__nav-active {
  color: #fefefe;
  background: #d0a763;
}
.weui-tab__content-item2 {
  display: flex;
  justify-content: space-between;
  padding: 25rpx 30rpx;
}
.weui-tab__content-item-descritpion {
  display: flex;
  justify-content: space-between;
}
.weui-tab__content-item-descritpion image {
  width: 60rpx;
  height: 70rpx;
}
.hide {
  display: none;
}
.weui-tab__content-item-descritpion-content {
  margin-left: 26rpx;
}
.weui-tab__content-item-descritpion-content-title {
  font-size: 28rpx;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.weui-tab__content-item-descritpion-content-datatime {
  font-size: 22rpx;
  color: #bbb;
}
.weui-tab__content-item-descritpion-content-datatime1 {
  margin-right: 35rpx;
}
.weui-tab__content-item-download-state image {
  width: 64rpx;
  height: 64rpx;
}
複製程式碼

*.js

data: {
  tabs2Nav: [
    {
      id: '1',
      label: '法律大全',
      state: 1
    },
    {
      id: '2',
      label: '合同模板',
      state: 0
    },
    {
      id: '3',
      label: '民事',
      state: 0
    },
    {
      id: '4',
      label: '行政',
      state: 0
    },
    {
      id: '5',
      label: '執行',
      state: 0
    }
  ],
  tabs2Content: [
    {
      title: '中華人名共和國民用航空法(2015年...).doc',
      url: 'https://wxmcard.imusic.cn/testfordocdownload.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    },
    {
      title: '原生申訴表格.xls',
      url: 'https://wxmcard.imusic.cn/testfordocdownload.doc',
      datatime: '2018-01-26',
      type: '2'
    },
    {
      title: '法律常識大彙集及範例.ppt',
      url: 'https://wxmcard.imusic.cn/testforpptdownload.pptx',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '3'
    },
    {
      title: '事業單位法律基礎知識總結.pdf',
      url: 'https://wxmcard.imusic.cn/testforpdfdownload.pdf',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '4'
    }
  ],

  // 選項卡第二屏分組
  tabs2Content1: [
    {
      title: '中華人名共和國民用航空法(2015年...).doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    },
    {
      title: '原生申訴表格.xls',
      datatime: '2018-01-26',
      type: '2'
    },
    {
      title: '法律常識大彙集及範例.ppt',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '3'
    },
    {
      title: '事業單位法律基礎知識總結.pdf',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '4'
    }
  ],
  tabs2Content2: [
    {
      title: '合同模板.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    }
  ],
  tabs2Content3: [
    {
      title: '民事合同模板.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    }
  ],
  tabs2Content4: [
    {
      title: '行政合同模板.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    }
  ],
  tabs2Content5: [
    {
      title: '執行合同模板.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    }
  ]
},
// 選項卡2切換
tabs2NavClick: function(e) {
  var that = this;
  console.log("完整的資料是：");
  console.log(that.data.tabs2Nav);
  
  console.log("點選的標籤是：");
  console.log(e.currentTarget.dataset.labelid);

  var newTabs2Content;

  console.log("正在經歷的標籤是：");
  for(var i=0; i<that.data.tabs2Nav.length; i++) {
    console.log(that.data.tabs2Nav[i].id);
    that.data.tabs2Nav[i].state = 0;
    if (that.data.tabs2Nav[i].id == e.currentTarget.dataset.labelid) {
      that.data.tabs2Nav[i].state = 1;
      console.log("將改變的標籤是：");
      console.log(that.data.tabs2Nav[i]);

      // 改變內容
      var changeContentName = "tabs2Content" + (i + 1);
      if (changeContentName == "tabs2Content1") {
        console.log(that.data.tabs2Content1);
        newTabs2Content = that.data.tabs2Content1;
      } else if (changeContentName == "tabs2Content2") {
        newTabs2Content = that.data.tabs2Content2;
      } else if (changeContentName == "tabs2Content3") {
        newTabs2Content = that.data.tabs2Content3;
      } else if (changeContentName == "tabs2Content4") {
        newTabs2Content = that.data.tabs2Content4;
      } else {
        newTabs2Content = that.data.tabs2Content5;
      }

      console.log("希望轉換內容到：");
      console.log(changeContentName);
    }
  }

  this.setData({
    tabs2Nav: that.data.tabs2Nav,
    tabs2Content: newTabs2Content
  })
},
複製程式碼

3.12.3 繫結事件如何傳遞資料

 返回目錄

 繫結事件如何傳遞資料：
 如果學過 Vue 的同學，應該知道 Vue 的資料傳遞形式是： @click='tabs2NavClick(item.id)'
 那麼，在微信小程式中，你千萬記得，繫結時間的傳遞引數的方式不是這樣子的，而是：

<text wx:for="{{tabs2Nav}}" wx:key="item.index" bindtap="tabs2NavClick" data-labelId="{{item.id}}">{{item.label}}</text>
複製程式碼

 通過 data-*="{{item}}" 的形式傳遞的~然後你需要在 js 中，通過 e.currentTarget.dataset.labelid 來獲取。

3.12.4 不允許駝峰

 返回目錄

 然後，注意了，這裡還有個小 bug。在程式碼中，我們使用的是 data-labelId="{{item.id}}"，而獲取資料的時候，我們獲取的是 labelid，是的，駝峰不見了~

 參考連結：連結

3.12.5 獲取 data 資料

 返回目錄

 如何在方法中獲取 data 中定義的資料：
 如果我想在選項卡切換的方法 tabs2NavClick 中獲取 data 裡面的資料，那麼我應該怎麼做呢？
 是的，通過:

tabs2NavClick: function(e) {
  var that = this;
  console.log(that.data.tabs2Nav);
}
複製程式碼

 這種形式，我們就可以獲取到 data 中的資料。
 參考連結：連結

3.12.6 實現文字省略

 返回目錄

 如何實現文字省略：
 加入你有一段文字，你想讓頁面根據自身寬度，自動省略多餘長度，那麼，我們可以設定下面的 css 程式碼，從而實現文字省略效果（不使用 js 的原因，是因為 js 沒有 css 那麼靈活）

text {
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
}
複製程式碼

 參考連結：連結

3.13 黑科技：<modal>

 返回目錄

本節目前已有 2 個坑，有興趣的小夥伴可以詳看。

3.13.1 被遺棄的 <modal>

 返回目錄

 一個坑就是一個故事。
 故事都有四元素：時間，地點，人物，事情。
 前三個自不必說，我們直接講事情經過：我們專案的負責人需要一個留言彈窗，然後裡面有個文字框可以填資訊，最後點選【留言】按鈕將資料傳到後端，點選【取消】按鈕關閉彈窗。
 需求是不是很簡單~既然微信小程式有自己的官方文件。那麼，怎麼方便怎麼來吧，於是 jsliang 在微信小程式中搜尋關鍵字 彈窗：

 看了下搜尋記錄，最匹配的就是上面這個了。enm...好像沒看到放文字框的？先試試：

 額(⊙o⊙)…

 不好意思打擾了，我去百度看看：連結

 咦~ 它這裡好像有個 <modal> 標籤？Ctrl+C、Ctrl+V 試試先~

 Duang~~~這不就是我要的效果麼，挖槽，黑科技？於是 jsliang 去小程式那裡搜了下 modal ……enm...蜜汁尷尬，好像只有上面的 wx.showModal() 方法……於是 jsliang 滿頭黑線……好嘛，黑科技黑科技！！！
 下面貼出實現程式碼：

*.wxml

<text class="article-message-board-head-addMessage" bindtap="modalinput">寫留言</text>
複製程式碼

*.js

Page({
  data: {
    // 彈窗
    hiddenmodalput: true, //可以通過hidden是否掩藏彈出框的屬性，來指定那個彈出框
  },
  //點選按鈕指定的hiddenmodalput彈出框    
  modalinput: function () {
    this.setData({
      hiddenmodalput: !this.data.hiddenmodalput
    })
  },
  //取消按鈕    
  cancel: function () {
    this.setData({
      hiddenmodalput: true
    });
  },
  //確認    
  confirm: function () {
    wx.showToast({
      title: '留言成功！',
    })
    this.setData({
      hiddenmodalput: true
    })
  }
})
複製程式碼

 好的，上面就實現了一個簡單的可填寫文字的彈窗了。

3.13.2 四種彈窗寫法

 返回目錄

 作為一枚職業填坑人，怎麼能滿足於上面的兩種彈窗形式呢！於是，使用百度大法又找到了一篇填坑文：連結

 所以，總結下就有了四種彈窗寫法：

型別	說明	地址
模態彈窗	wx.showModal(Object) - 模態彈窗就是上面的第一種彈窗，它可以給你選擇【取消】或者【確定】	連結
<modal>	<modal>是上面的第二種彈窗，可以提供使用者填寫	連結
訊息彈窗	wx.showToast(Object) - 訊息彈窗就是操作成功或者操作失敗的那一刻，系統的提示彈窗，無需使用者操作，可設定幾秒自動關閉	連結
操作選單	wx.showActionSheet(Object) - 操作選單類似於彈出的下拉選單，提供你選擇其中某項或者【取消】	連結

 在這裡，就講完了微信小程式的四種彈窗形式了。如果你改樣式改的煩啊煩的，可能你需要封裝一個屬於自己的彈窗？嘿嘿，說不定你的產品經理會有興趣讓你開發一個 beautiful 彈窗的~
 這坑我不填，我沒碰到~碰到了再說！在這裡預留下這個坑，哈哈。

3.14 小程式解析 HTML

 返回目錄

本節目前已有 6 個坑，有興趣的小夥伴可以詳看。

3.14.1 解析 HTML 的三種方法

 返回目錄

 在小程式的文章處理中，文章的主體內容，一般來說，後端會採用富文字的形式儲存資料到資料庫。就是說，你要在 view 中展示 html 變遷。但是，你知道的，小程式不採用瀏覽器的那一套，所以，你可能需要兜圈子了：連結

 在上面這篇文章中，講述了三種解析富文字的方法：

• wxParse 解析富文字
• rich-text 解析富文字
• web-view 解析富文字

3.14.2 wxParse

 返回目錄

 在百度大法的渲染下，jsliang 採用了 wxParse。

 Github 的 wxParse 地址：連結

 使用方法很簡單，照著它 GitHub 地址去擼就是了。然而，坑不是那麼容易填的 o(╥﹏╥)o

 （ bug1 ）wxParse 在其神祕原始碼中，會將你的 html+css 樣式弄亂，例如：px 要轉成 rpx，才能在小程式中正常顯示，如果你不處理……enm...你試試~

 （ bug2 ）然後，如果你突然發現，內容無法顯示，那麼，恭喜你又觸發了 bug，這個是 wxParse 程式碼的一個 bug,在一些特殊的手機裡面，在 wxparse/html2json.js 中的第 112 和 119行，都有一個 console.dir() 這個函式的使用，它使你的內容不能正常顯示了。把這個函式註釋掉，內容就可以正常顯示出來了。

if (name == 'class') {
    // console.dir(value); // 112 行
    //  value = value.join("")
    node.classStr = value;
}
// has multi attibutes
// make it array of attribute
if (name == 'style') {
    // console.dir(value);  // 119行
    //  value = value.join("")
    node.styleStr = value;
}
複製程式碼

 （ bug3 ）如果你需要引用圖片，那麼，你會發現引用不成功。這是因為，我們在網頁後臺編輯器裡面上傳的圖片，是採用相對路徑的，上傳成絕對網路地址路徑之後，換成域名，就沒法很好的展示了。所以最好的方法，就是修改 html2json.js 這個檔案，讓 wxParse 自動新增域名字首：地址

 （ bug4 ）空格沒法被正確替換，需要修改 wxDiscode.js 中的 strcharacterDiscode ：

// 將原語句註釋掉，替換為下面的語句
// str = str.replace(/ /g, ' ');
  str = str.replace(/ /g, '\xa0');
複製程式碼

 （ bug5 ）如何幹掉控制檯 console 中 wxParse 的一大串輸出：

wxParse.js

// 36行註釋掉
console.log(JSON.stringify(transData, ' ', ' '));
// 41行註釋掉
console.log(JSON.stringify(transData, ' ', ' '));
複製程式碼

 綜上，jsliang 氣得差口吐白沫了……換換換！有空要換成其他兩種方式才行！！！

3.14.3 rich-text

 返回目錄

 jsliang 還未使用過 rich-text，這裡先預留個坑。如果小夥伴們在開發 rich-text 過程中碰到過各種坑，可以跟 jsliang 提一下，我會寫進這章節，順帶在章節尾寫上你的大名，辛苦了~

3.14.4 web-view

 返回目錄

 jsliang 還未使用過 web-view，這裡先預留個坑。如果小夥伴們在開發 web-view 過程中碰到過各種坑，可以跟 jsliang 提一下，我會寫進這章節，順帶在章節尾寫上你的大名，辛苦了~

3.15 詭異的 open-type

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 在小程式中，它有一些自定義的方法，例如 open-type ，是需要 <button> 來承接的。
 所以，如果你寫好了一個 view，裡面有很好看的樣式了，你本來打算用 bindtap 來搞事情的。但是，突然接到資訊，需要外套一層 <button open-type="***"> ，然後發現，樣式需要重新跳過……
 enm...加油不哭，重新寫過樣式吧~

3.16 <button>去樣式及其內嵌<image>

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 就像上一章所說的，有時候，迫不得已，我們必須在 <button> 中內嵌個 <image> 或者 <text> 之類的，那麼，一般怎麼做呢？
 現在，假設我有一個 42*40 的圖片，我來試試調下它的樣式：

*.wxml

<button open-type='share'>
  <image src="../../public/explore_activityDetail_icon_share.png"></image>
</button>
複製程式碼

*.wxss

.activity-user-action button {
  width: 42rpx;
  height: 80rpx;
  margin: 0;
  padding: 0;
  margin-top: -21rpx;
  background: #fff;
}
.activity-user-action button::after {
  border: none;
}
.activity-user-action image:last-child {
  width: 42rpx;
  height: 40rpx;
}
複製程式碼

 如上，我們需要設定這個按鈕的高度是圖片高度的 2 倍，然後還需要設定 margin-top 的高度為圖片高度的 1/2（注意 margin 與 margin-top 的順序，如果你不知道順序的重要性，推薦你使用 margin: -21rpx 0 0 0），同時 margin、padding、background、border 需要清空。

3.17 下拉重新整理和上拉載入

 返回目錄

本節目前已有 2 個坑，有興趣的小夥伴可以詳看。

 在瀏覽器中，有 F5 重新整理，有滑鼠滾輪滑動載入。
 那麼，換到微信小程式，又是怎樣子的呢？
 是的，這就要說說使用者下拉動作和上拉觸底了：

 下拉事件在小程式文件的解釋：連結

/**
  * 頁面相關事件處理函式--監聽使用者下拉動作
  */
onPullDownRefresh: function () {

},
複製程式碼

 上拉觸底在小程式文件的解釋：連結

/**
  * 頁面上拉觸底事件的處理函式
  */
onReachBottom: function () {

},
複製程式碼

 這兩個事件，都是在你新建 page 的時候，會自動新增的，小夥伴們注意下，免得前面寫了，被後面的覆蓋了哦~

3.18 獲取 input 的值

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 <input class="phone-number"></input>
 <button>獲取電話號碼</button

 現在，假設我們在小程式中輸入了一個 class 為 phone-number 的input 框，並且有一個 <button> 。那麼，我們在微信小程式中，需要如何獲取該 phone-number 的值呢？

1. 先在 <input> 中設定 name 為 phoneNumber
2. 然後 data 中設定 phoneNumber: ''
3. 接著 bindinput="phoneCodeInput'
4. 再來設定 phoneCodeInput 方法來修改 this.data.phoneNumber
5. 最後在 <button> 的繫結事件中獲取 phoneNumber

 步驟繁雜，下面貼出實現程式碼：

*.wxml

<input maxlength='11' placeholder='請輸入手機號碼' placeholder-class="phone-number" name="phoneNumber" bindinput='phoneNumberInput'></input>

<button class="get-phone-number" bindtap="getPhoneNumber">獲取驗證碼</button>
複製程式碼

*.js

Page({
  data: {
    // 輸入的手機號碼
    phonenumber: '',
  },
  // 獲取手機號碼
  phoneNumberInput: function(e) {
    this.setData({
      phonenumber: e.detail.value
    })
  },
  // 點選獲取驗證碼
  getPhoneNumber: function (e) {
    var phoneNumber = this.data.phonenumber
    console.log(phoneNumber);
  }
})
複製程式碼

 看到這裡，如果有習慣 jQuery ，習慣操作 dom 節點的小夥伴可能會抱有很大疑惑：“它就不能像 jQuery 一樣直接獲取 dom 的內容麼？”
 答案是，有的：地址。但是，在這裡， jsliang 並不推薦小夥伴這麼做，想要學好一門新的技術，就不能因為舊的技術而限制了自己的觀念。時代在進步，科技在發展，我們不學更多的知識，只能被淘汰在前端的潮流中。

3.19 onLaunch 載入問題與路由守衛

 返回目錄

本節目前已有 2 個坑，有興趣的小夥伴可以詳看。

3.19.1 小程式執行順序

 返回目錄

 這次的需求是：判斷使用者是否登入，如果登入了就跳轉到首頁，如果沒登入就跳轉到登入頁。
 我們都知道，在微信小程式中，有個 onLaunch 方法，微信小程式官方文件對其描述就是：每個頁面進來需要先載入 onLaunch 方法，再去執行其他方法。然後，在 jsliang 嘗試設定在 onLaunch 中呼叫 wx.login()，卻發現，index.js 的 onLoad 方法是先於 onLaunch 執行的，這導致我們沒法預先獲取到需要的資訊：

1. 先執行 index.js 的 onload
2. 再才執行 app.js 中的 onLaunch

 迫於無奈，jsliang 對其進行了百度：地址 。通過百度這篇文章發現，有兩個解決方案：

1. 設定啟動頁，成功再返回首頁
2. 使用 Promise 來進行程式管理

 但是，由於 jsliang 對於 Promise 的做法，覺得其太過複雜，故新增了一個 page/login。

3.19.2 路由守衛

 返回目錄

 那麼，如何在使用者進入首頁閱讀文章、檢視產品之前，先對使用者進行微信授權、賬號登入呢？

1. 設定 onLogin 的 Storage，在 index.js 中的 onload 進行判斷，如果使用者未進行登入，則使用 wx.redirectTo() 跳轉到登入頁面：

index.js

onLoad: function (options) {
  if (!wx.getStorageSync('isLogin')) {
    wx.redirectTo({
      url: '../login/login',
    })
  }
}
複製程式碼

2. 如果使用者進行了登入，在登入時設定 onLogin 為 true。

login.js

loginSubmit: function(e) {
  wx.setStorageSync('isLogin', true);
}
複製程式碼

 這樣，我們就做到了路由守衛，即你不登入，不給跳轉到首頁。

3.20 request 封裝與 api 抽離

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 在 Ansen江 的推薦下，參照 Ansen江 的 api.js，對我這邊的小程式介面 request 進行了 promise 封裝，並做了 api.js 的分離。

api.js

/*
 * @Author: jsliang
 * @Date: 2018-10-11 09:11:26
 * @LastEditors: jsliang
 * @LastEditTime: 2018-10-11 09:11:29
 * @Description: 介面檔案
 */

// 引入請求標頭檔案
import header from './header.js';

// 載入中
const Loading = {
  show() {
    wx.showLoading({
      title: '載入中'
    });
  },
  hide() {
    wx.hideLoading()
  }
};

// 載入中白名單
const loadingWhite = [
  'index/index'
]

// 將請求進行 Promise 封裝
const fetch = ({url, data, header}) => {
  // 白名單地址會顯示載入中狀態
  if(loadingWhite.includes(url)) {
    Loading.show();
  }
  
  // 列印介面請求的資訊
  console.log(`【step1】API介面：${url}`);
  console.log("【step2】header請求頭：");
  console.log(header);
  console.log("【step3】data傳參：");
  console.log(data);

  // 返回 Promise
  return new Promise((resolve, reject) => {
    wx.request({
      url: getApp().globalData.api + url,
      header: header,
      data: data,
      success: res => {
        Loading.hide();
        
        // 成功時的處理 
        if (res.data.code == 0) {
          console.log("【step4】請求成功：");
          console.log(res.data);
          return resolve(res.data);
        } else {
          wx.showModal({
            title: '請求失敗',
            content: res.data.message,
            showCancel: false
          });
        }
      },
      fail: err => {
        Loading.hide();

        // 失敗時的處理
        console.log(err);
        return reject(err);
      }
    })
  })

}

/**
 * code 換取 openId
 * @data {
 *   jsCode - wx.login() 返回的 code
 * }
 */
export const wxLogin = data => {
  return fetch({
    url: "tbcUser/getWechatOpenId",
    header: header.newHeader(),
    data: data
  })
}
複製程式碼

 在上面進行了分離 api.js 後，接著在其他地方呼叫 api.js：

login.js

import {
  wxLogin
} from "../../utils/api.js"

// 登入
wx.login({
  success: res => {

    // 傳送 code ，獲取 openId
    console.log("\n【API：獲取 openId】");

    wxLogin({
      jsCode: res.code
    }).then(
      res => {
        console.log("【step5】返回成功處理：");
        console.log(res);
      },
      err => {
        console.log("【step5】返回失敗處理：");
        console.log(err);
      }
    )

  }
})
複製程式碼

 輸出結果：

 這樣，我們就成功做了 request 的封裝，並通過呼叫 api.js 的形式，分離了程式碼，從而更方便地進行程式設計。

3.21 判斷資料是否讀取完

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 在頁面佈局中，我們經常使用列表展示，然後在列表展示上，有時候該列表的最後一條資料下面是沒有下劃線或者虛線的。
 那麼，當資料讀取到最後一條的時候，如何判斷已經到了最後一條，不再展示下劃線或者虛線呢？

• 方法一

*.wxml

<view class="content">
  <view wx:for="{{topRecommended}}" wx:key="{{item.recommendId}}" wx:for-index="index">
    <navigator url="../indexProduct/indexProduct">
      <view class="content-item">
        <image src="{{item.coverImage}}"></image>
        <view class="content-item-text">
          <text class="content-item-text-title">{{item.recommendTitle}}</text>
          <text class="content-item-text-content">{{item.recommendDescription}}</text>
          <view class="content-item-text-row">
            <text class="content-item-text-user">{{item.userCount}}人在用</text>
            <text class="content-item-text-price">￥{{item.productPrice}}</text>
          </view>
        </view>
      </view>
    </navigator>
    <view class="{{(index+1) == topRecommended.length ? 'content-item-gap-hide' : 'content-item-gap'}}">
      <image src="../../public/index_top_recommended_content_item_gap.png"></image>
    </view>
  </view>
</view>
複製程式碼

 在這裡，我們對要迴圈的物件使用 wx:for-index="index ，即：

<view wx:for="{{topRecommended}}" wx:key="{{item.recommendId}}" wx:for-index="index">
複製程式碼

 然後，我們在下劃線/點虛線位置進行 class 判斷，如果 index+1 == topRecommended.length，那麼我們就換一個樣式：class="{{(index+1) == topRecommended.length ? 'class1' : 'class2'}}"，即：

<view class="{{(index+1) == topRecommended.length ? 'content-item-gap-hide' : 'content-item-gap'}}">
複製程式碼

 這樣，我們就做到了判斷是否處於最後一條資料，從而通過 class 來隱藏下劃線或者虛線。

• 方法二

 通過 CSS 的 last-child { ... }，可以直接修改最後的 view樣式：

*.wxss

.content-item-gap:last-child {
  display: none;
}
複製程式碼

 這樣，就不需要複雜的 JS 邏輯，從而實現最後一個下劃線的顯示影藏。
 如果你想了解下 last-child 為何物：連結

3.22 客服系統研究

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 在微信小程式中，客服系統也是個相當詭異的玩意。
 目前實現：

*.wxml

<button open-type="contact" send-message-title='{{productName}}' send-message-img='{{videoImageSrc}}' send-message-path='../indexProductDetail/indexProductDetail?productId={{productId}}' show-message-card='true'>
  <view class="nav-service">
    <image src="../../public/index_productDetail_icon_service.png"></image>
    <text>線上諮詢</text>
  </view>
</button>
複製程式碼

1. 能夠進行正常的通訊
2. 能夠傳送產品資訊給客服

 但是，這不能滿足我的要求：

1. 不能修改對話方塊的標題（查的資料標明需要進行小程式配置後後端返回？來源地址）
2. 暫時無法驗證是否能實現客服點選使用者分享的產品卡片，跳轉到小程式對應的產品頁面上。

 這些，都需要我們的小程式釋出後進行驗證。

3.23 檔案線上預覽

 返回目錄

本節目前已有 2 個坑，有興趣的小夥伴可以詳看。

 話不多說，先丟出實現程式碼：

*.wxml

<view class="container" bindtap='downloadFile' data-url="{{downloadUrl}}">
  <button>點我下載</button>
</view>
複製程式碼

*.js

Page({
  data: {
    downloadUrl: '網上隨便找一個下載地址'
  },
  downloadFile: function(e) {
    // 獲取傳遞過來的下載地址
    var url = e.currentTarget.dataset.url;
    // 呼叫下載 API
    wx.downloadFile({
      url: url,
      success: function (res) {
        console.log("下載檔案成功");
        console.log(res);
        
        var tempFilePath = res.tempFilePath;

        // 線上預覽文件
        wx.openDocument({
          filePath: tempFilePath,
          success: res => {
            console.log("開啟成功");
          },
          fail: res => {
            console.log(res);
          },
          complete: res => {
            console.log(res);
          }
        })

      },
      fail: function () {
        console.log("下載失敗");
      }
    })
  }
})
複製程式碼

 然後，在下載的時候，後端小夥伴偷懶，上傳的是沒有資料的 Word、PPT，這時候，小程式會報：openDocument:fail filetype not supported 的 error，所以小夥伴們要注意下。

3.24 儘量使用 ES6

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 由於 jsliang 平時都是使用 ES5 ，一直口嚷嚷說要步入 ES6 大堂，但是一直就是沒入門，所以乘著有功夫，儘量使用 ES6 ，用熟了才能進步。

 繫結方法寫法修改：

• 原寫法：

getUserPhone: function(e) {
  console.log(e);
}
複製程式碼

• 現寫法：

getUserPhone(e) {
  console.log(e);
}
複製程式碼

 迴圈寫法：

• 原寫法

for(var i = 0; i <= array.length; i++) {
  console.log(array[i]);
}
複製程式碼

• 新寫法

for (let i of array) {
  console.log(i);
}
複製程式碼

3.25 視訊功能實現

 返回目錄

本節目前已有 1 個坑，有興趣的小夥伴可以詳看。

 官方地址：地址

 官方實現效果：

 專案實現效果：

 從圖中可以看出，我們大概要實現3個步驟：

1. 調整 CSS，使 Video 佔滿 100% 的寬，並且居頂。

2. 調整 HTML+CSS，使圖片覆蓋住視訊。

3. 編寫 JS，使圖片點選時，隱藏圖片，播放視訊。

*.wxml

<view class="video">

  <!-- 
    1. 繫結介面視訊路徑
    2. controls - 可控制播放暫停
    3. show-fullscreen-btn - 顯示全屏按鈕
  -->
  <video id="video" src="{{videoSrc}}" controls show-fullscreen-btn></video>

  <!-- 通過 playVideo 這個方法來控制 showVideo 這個屬性，從而控制遮罩的產品圖片是否隱藏 -->
  <cover-view class="{{showVideo ? 'video-mask' : 'hide-video-mask'}}" bindtap='playVideo'>
    <cover-image class="video-image" src="{{videoImageSrc}}"></cover-image>
  </cover-view>

  <!-- 通過 playVideo 這個方法來控制 showVideo 這個屬性，從而控制遮罩的播放按鈕是否隱藏 -->
  <cover-view class="{{showVideo ? 'video-mask' : 'hide-video-mask'}}" bindtap='playVideo'>
    <cover-image class="video-button" src="../../public/index_productDetail_video_button.png"></cover-image>
  </cover-view>

</view>
複製程式碼

*.wxss

/* 設定視訊寬高 */
video {
  width: 100%;
  height: 420rpx;
}
/* 隱藏遮罩層 */
.hide-video-mask {
  display: none;
}
/* 遮罩層 */
.video-mask {
  width: 100%;
  height: 420rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
}
/* 遮罩層圖片 */
.video-image {
  width: 100%;
  height: 420rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}
/* 遮罩層播放按鈕 */
.video-button {
  width: 98rpx;
  height: 98rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -49rpx;
  margin-left: -49rpx;
  z-index: 99;
}
複製程式碼

*.js

Page({
  data: {
    // 視訊欄位
    // videoSrc: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
    videoSrc: '',
    videoImageSrc: '',
    showVideo: true,
  },

  /**
   * 播放視訊
   */
  playVideo: function () {
    var that = this;
    that.setData({
      showVideo: false
    });
    // videoContext 的定義在 onReady 上
    this.videoContext.play();
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
    this.videoContext = wx.createVideoContext("video")
  },

})
複製程式碼

 如上，實現了視訊播放。

四 網友補充

 返回目錄

 這章主要講解小夥伴們發現的 bug 及其解決思路，有興趣的小夥伴可以私我QQ：1741020489，我將把你提出的 bug 寫進這篇文章並附上你的大名（看個人意願），謝謝小夥伴們的支援~

注：小夥伴們提出的 bug，如果包含詳細的問題描述和解決方案，我會統計進該文章的 bug 清單。

4.1 資料夾讀取報錯

 返回目錄

本元件目前已有 ? 個坑，有經驗的小夥伴可以進行補充。

 問題提出者：掘金 史前圖騰。
 問題反饋：wx.getFileSystemManager().readdir 資料夾讀取 api 報錯，但仍會返回結果。
 問題解決：這個 api 作用是讀取某個目錄下的檔名，正常會返回檔名陣列，但是現在 IDE 在返回資料之前會報 'indexOf' 未定義的錯誤，並不影響api 使用。我看官方論壇上月就有人反應了，至今未修復。

4.2 textarea問題多多

 返回目錄

本元件目前已有 ? 個坑，有經驗的小夥伴可以進行補充。

 問題提出者：掘金 jilaokang。
 問題反饋：textare問題非常多，補一個。
 問題解決：已聯絡大佬，等待回覆。

jsliang 的文件庫 由 樑峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/LiangJunron…上的作品創作。
本許可協議授權之外的使用許可權可以從 creativecommons.org/licenses/by… 處獲得。