2007 年 1 月 9 號，蘋果一代在功能機盛行的年代中出世。

2017 年 1 月 9 號，微信小程序在重型app風靡的壓力下上線。

蘋果的出世掀起了互聯網一波又一波的浪潮，而微信小程序( Wa )能帶給開發者和用戶什么呢？我們先從頭到尾做一個 Wa ，再來看看它的價值。

For Users

如果你的微信還沒有找到小程序的入口，可以在微信中搜索已有小程序(如: "姨媽日歷")，進入后再退出就能在發現欄中看到小程序入口。

For Developers

1. 認證

在注冊 Wa 賬號時，會讓你填寫組織主體并認證主體真實性，如果你是一個單純的個人開發者，可以隨意填寫，不要花錢去認證就是了。

2. 開發者工具

下載并打開開發者工具，呈現出來的三個區域從左至右分別是: 功能區，視圖區，調試區。給開發者一種 IDE 即視感，特別是調試區，不就是 F12 么= =！什么 React，Angular 之流，你們再強還不是沒自帶 IDE，這點微信做的確實好，從開發者的體驗先下手，利用我等之手將 Wa 推向市場。

3. 文件類型

對于開發者，你只需要關注三種文件類型: .js ，.wxss ，.wxml 。特喵這不就是披著微信皮的前端代碼嗎？的確如此，.wxss => .css ，.wxml => .html ，這個轉換會在代碼構建階段發生，這里先不提。

Preparation

這次我們以"網易云音樂客戶端"為原型做一款能跑在 Wa 的播放器小程序，廢話不說了，直接開搞。

1. wxml

首先會看到示例中各種 view ，text ... 如果你使用過 React Native 或者阿里最近開源的 Rax 就不會陌生，這些標簽實質上就是已經封裝好的組件，這個時候就可以推斷 Wa 很可能使用了 RN 的源碼。官方文檔 - 組件 羅列了 Wa 中幾大類組件，對于播放器而言，view，text，image，audio 這幾個組件就夠了，它們可以理解為分別對應了 html 中的 div，span，img，audio 標簽。

2. wxss

css 基本沒有變化，除了像素單位改成了 rpx，這里要說的是 Wa 將設備總寬規定為 750rpx。除此之外，flex 布局也是需要大量使用的。

3. js

js 也是基本沒有變化，而且可以使用部分 ES6 的語法。需要注意的是在 Wa 中沒有 document 對象，因此不能操作 DOM 。Wa 組件化開發風格比較明顯，會有一種寫 React 的感覺。

4. API

官方文檔 - API 都是微信上的常用API。

5. 資源服務器

這是比較坑的一個地方，首先你得去開發設置中添加你的服務器配置

當你使用 wx.request() 時候如果沒有用綁定好的 url 是不能進行資源訪問的。同時必須要以 https 的方式請求，所以必須要給服務器配置 https 服務，我使用的是 Let's Encrypt ，這是個免費的證書機構，每 90 天才會過期，及時更新就行，配置方法網上有非常多。

Coding Time

最終形態

1. 模板編寫

首先來搭建 wxml。如上圖可以分為三個模塊

頂部固定的播放列表: 顯示音樂數量

中間的音樂清單: 顯示音樂的名字和作者

底部固定的功能欄: 顯示當前的播放的音樂和可簡單操作的三個按鈕

模板的編寫如下:

<!--index.wxml-->
<view class="container music-list">
  <audio id="myAudio" src=""></audio>
  <view class="music-menu">
    <view class="menu-btn">
      <image class="menu-play-pause-btn" src="xxx.png"/>
    </view>
    <view class="menu-desc">
      <text class="normal">播放列表(</text>
      <text class="bold">{{musics.names.length}}</text>
      <text class="normal">)</text>
    </view>
  </view>
  <block wx:for="{{musics.names}}">
    <view class="music-item" bindtap="changeToThis" data-mid="{{index}}">
      <view class="left-item">
        <image class="{{ index == MIndex ? 'voice-img' : 'no-img'}}" src="{{ index == MIndex ? 'xxx.png' : ''}}"></image>
        <text class="music-index">{{ index + 1 }}</text>
      </view>
      <view class="right-item">
          <text class="music-name">{{ item }}</text>
          <text class="music-singer">{{ musics.singers[index]}}</text>
      </view>
    </view>
  </block>
  <view class="fixed-box">
    <view class="fixed-img">
      <image class="head-img" src="xxx.png" />
    </view>
    <view class="fixed-mesg">
      <text class="mesg-name">{{names[MIndex]}}</text>
      <text class="mesg-singer">{{singers[MIndex]}}</text>
    </view>
    <view class="fixed-btn">
      <image class="prev-btn" src="xxx.png" bindtap="changeToPrev"/>
      <image class="play-pause-btn" bindtap="changeLargeBtn" src="{{largeBtnSrc}}"/>
      <image class="next-btn" src="xxx.png" bindtap="changeToNext"/>
    </view>
  </view>
</view>

里面混雜了許多類似 xtpl 的語法，我通過 js 傳入的對象是 musics ，因此該模板渲染的數據皆來源于這個對象。其次要注意某些關鍵位置的 bindtap ，它其實就是 Wa 中對 fastclick 的實現，綁定的這個事件需要在 js 文件中實現。

2. 功能實現

模板寫完后，就是導入數據和簡單的功能實現了。在 Wa 的 js 文件中，有一個 Page({})，它內部的邏輯直接對應了一個模板。大致寫法如下

Page({
  data: {
    // 這里放置不需加載資源即可確定的屬性
    Mindex: 0, // 初始化歌曲的ID，0
    largeBtnSrc: 'xxx.png' // 初始化的播放按鈕路徑
  },
  onLoad: {
    // 這里是渲染模板之前一步的邏輯
    wx.request({
      url: 'https://xxx',
        type: 'GET', 
      success: function(res) {
        // 類似Jquery, 成功獲得數據后可對data進行修改
        this.setData({
           musics: res.xxx,
           srcs: res.xxx,
           names: res.xxx,
           singers: res.xxx
        });
        // native中audio沒有autoplay的功能，需要手動添加邏輯
        this.audioCtx = wx.createAudioContext('myAudio');
        this.audioCtx.setSrc('https://xxx.mp3');
        this.audioCtx.play();
        this.audioCtx.paused = false;
          // 最后別忘了綁定this對象
      }.bind(this)
    });
  },
  // 實現模板中綁定到bindtap的事件
  changeLargeBtn: function() {
    if (this.audioCtx.paused) {
      // 如果音樂暫停，需要處理的邏輯
    } else {
      // 如果音樂播放，需要處理的邏輯
    }
  },
  changeToNext: function() {
    // 播放下一首歌

    // 無論如何都變回播放狀態
    this.setData({
      largeBtnSrc: 'xxx.png'
    });
    this.audioCtx.play();
    this.audioCtx.paused = false;
    // 主邏輯
    if (this.data.MIndex == (this.data.srcs.length - 1)) {
      this.audioCtx.setSrc('https://xxx' + this.data.srcs[0]);
      this.setData({
        MIndex: 0
      });
      this.audioCtx.play();
    } else {
      this.audioCtx.setSrc('https://xxx' + this.data.srcs[this.data.MIndex + 1]);
      this.setData({
        MIndex: this.data.MIndex + 1
      });
      this.audioCtx.play();
    }
  },
  // 同理播放上一首歌
  changeToPrev: function() {},
  // 通過點擊清單中的音樂，指定跳轉到某首音樂
  changeToThis: function() {}
});

3. 強大的Flex

wxss 的代碼有一百多行，就不貼了，就說下用的比較多的 flex 語法。自從 RN 出世了，flex 的使用率是越來越高，因為用它布局實在是很方便，再也不用去設置可惡的 float 等屬性來做自適應。

如上圖，使用三次 flex 就能完成自適應的布局。

首先，將圖片，當前歌曲信息，按鈕的父級元素進行 flex 布局。

fixed-box {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 110rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: #fff;
}

通過 display: flex 啟動 flex 布局，flex-direction: row 指讓元素橫向排列，justify-content: space-around 指讓元素在主軸上伸縮性的居中。具體語法可以參考 Flex 布局教程 - 阮一峰 。

其次對歌曲信息進行 flex 布局。

width: 380rpx;
display: flex;
flex-direction: column;

flex-direction: column 指讓元素縱向排列。

最后再來對按鈕進行 flex 布局。

width: 240rpx;
height: 88rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;

align-items: center 指讓元素在交叉軸上居中。

項目發布

完成后選擇點擊項目，將編譯后的包上傳到云上，可以在開發管理中看到 Wa 當前的體驗版本 ，所以...發布吧~

由于我們是個人開發者，所以只能發布體驗版本，而且只能有20個體驗者= =！體驗者可以在用戶體驗中添加。

接下來進行一系列的掃碼任務...掃描你的二維碼，然后可以在 Wa 看到你的作品了。

感受

1. 開發者體驗

現如今各家各戶都在把 React 和 Jsbridge 往應用上搬，加上 nw 的加持，Wa 對開發體驗是非常不錯的。

2. 用戶體驗

因為小程序是"用完即走"的產品，一旦退出我的音樂就播放不了了，而且每次進入都會去加載音樂，心疼我的流量。但在使用的時候應用的帶給人的還是一種接近 native 的體驗。

瞎扯

總的來說 Wa 感覺有點被高估了，"用完即走"是把雙刃劍，注定不適合大流量和部分高使用量的應用，加上 Wa 規定打包后不能超過 1M ，最終在市場上受利的是那些中低頻的小流量的產品。