2007 年 1 月 9 號(hào)，蘋果一代在功能機(jī)盛行的年代中出世。

2017 年 1 月 9 號(hào)，微信小程序在重型app風(fēng)靡的壓力下上線。

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

For Users

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

For Developers

1. 認(rèn)證

在注冊(cè) Wa 賬號(hào)時(shí)，會(huì)讓你填寫組織主體并認(rèn)證主體真實(shí)性，如果你是一個(gè)單純的個(gè)人開發(fā)者，可以隨意填寫，不要花錢去認(rèn)證就是了。

2. 開發(fā)者工具

下載并打開開發(fā)者工具，呈現(xiàn)出來的三個(gè)區(qū)域從左至右分別是: 功能區(qū)，視圖區(qū)，調(diào)試區(qū)。給開發(fā)者一種 IDE 即視感，特別是調(diào)試區(qū)，不就是 F12 么= =！什么 React，Angular 之流，你們?cè)購(gòu)?qiáng)還不是沒自帶 IDE，這點(diǎn)微信做的確實(shí)好，從開發(fā)者的體驗(yàn)先下手，利用我等之手將 Wa 推向市場(chǎng)。

3. 文件類型

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

Preparation

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

1. wxml

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

2. wxss

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

3. js

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

4. API

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

5. 資源服務(wù)器

這是比較坑的一個(gè)地方，首先你得去開發(fā)設(shè)置中添加你的服務(wù)器配置

當(dāng)你使用 wx.request() 時(shí)候如果沒有用綁定好的 url 是不能進(jìn)行資源訪問的。同時(shí)必須要以 https 的方式請(qǐng)求，所以必須要給服務(wù)器配置 https 服務(wù)，我使用的是 Let's Encrypt ，這是個(gè)免費(fèi)的證書機(jī)構(gòu)，每 90 天才會(huì)過期，及時(shí)更新就行，配置方法網(wǎng)上有非常多。

Coding Time

最終形態(tài)

1. 模板編寫

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

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

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

底部固定的功能欄: 顯示當(dāng)前的播放的音樂和可簡(jiǎn)單操作的三個(gè)按鈕

模板的編寫如下:

<!--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 傳入的對(duì)象是 musics ，因此該模板渲染的數(shù)據(jù)皆來源于這個(gè)對(duì)象。其次要注意某些關(guān)鍵位置的 bindtap ，它其實(shí)就是 Wa 中對(duì) fastclick 的實(shí)現(xiàn)，綁定的這個(gè)事件需要在 js 文件中實(shí)現(xiàn)。

2. 功能實(shí)現(xiàn)

模板寫完后，就是導(dǎo)入數(shù)據(jù)和簡(jiǎn)單的功能實(shí)現(xiàn)了。在 Wa 的 js 文件中，有一個(gè) Page({})，它內(nèi)部的邏輯直接對(duì)應(yīng)了一個(gè)模板。大致寫法如下

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

    // 無論如何都變回播放狀態(tài)
    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() {},
  // 通過點(diǎn)擊清單中的音樂，指定跳轉(zhuǎn)到某首音樂
  changeToThis: function() {}
});

3. 強(qiáng)大的Flex

wxss 的代碼有一百多行，就不貼了，就說下用的比較多的 flex 語法。自從 RN 出世了，flex 的使用率是越來越高，因?yàn)橛盟季謱?shí)在是很方便，再也不用去設(shè)置可惡的 float 等屬性來做自適應(yīng)。

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

首先，將圖片，當(dāng)前歌曲信息，按鈕的父級(jí)元素進(jìn)行 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 啟動(dòng) flex 布局，flex-direction: row 指讓元素橫向排列，justify-content: space-around 指讓元素在主軸上伸縮性的居中。具體語法可以參考 Flex 布局教程 - 阮一峰 。

其次對(duì)歌曲信息進(jìn)行 flex 布局。

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

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

最后再來對(duì)按鈕進(jìn)行 flex 布局。

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

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

項(xiàng)目發(fā)布

完成后選擇點(diǎn)擊項(xiàng)目，將編譯后的包上傳到云上，可以在開發(fā)管理中看到 Wa 當(dāng)前的體驗(yàn)版本 ，所以...發(fā)布吧~

由于我們是個(gè)人開發(fā)者，所以只能發(fā)布體驗(yàn)版本，而且只能有20個(gè)體驗(yàn)者= =！體驗(yàn)者可以在用戶體驗(yàn)中添加。

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

感受

1. 開發(fā)者體驗(yàn)

現(xiàn)如今各家各戶都在把 React 和 Jsbridge 往應(yīng)用上搬，加上 nw 的加持，Wa 對(duì)開發(fā)體驗(yàn)是非常不錯(cuò)的。

2. 用戶體驗(yàn)

因?yàn)樾〕绦蚴?quot;用完即走"的產(chǎn)品，一旦退出我的音樂就播放不了了，而且每次進(jìn)入都會(huì)去加載音樂，心疼我的流量。但在使用的時(shí)候應(yīng)用的帶給人的還是一種接近 native 的體驗(yàn)。

瞎扯

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