基於bmob後端雲小程序開發——口袋吉他

人的一輩子90%的時間都在作着無聊的事情，社會的發展使得咱們的閒暇時間愈來愈多，咱們把除了工做的其餘時間放在各類娛樂活動上。

程序員有點特殊，他們把敲代碼當作娛樂活動的一部分，以此打發時間的不佔少數。這不最近無聊搞了一個口袋吉他小程序，使用bmob後端雲提供數據存儲服務，除吉他譜圖片，其餘圖片存儲在七牛。

關於bmob小程序開發文檔請戳這裏，文檔詳細簡練，主要是縮短了開發週期，不過對於複雜的項目，仍是推薦使用本身服務器提供數據服務。

使用微信掃描二維碼預覽

源碼地址：https://github.com/alex1504/wx-guita_tab

下面分點分享下小程序的開發過程當中的關鍵點及感覺，說明：

1. 小程序標籤統稱組件，Html標籤統稱元素。
2. 部份內容會與vuejs及jQuery做對比

使用iconfont字體圖標

新建項目並添加圖標

在app.wxss中以unicode方式引入

@font-face {
  font-family: 'iconfont';  /* project id 431644 */
  src: url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.eot');
  src: url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.svg#iconfont') format('svg');
}

定義通用icon樣式，定義僞元素

.icon{
  display: inline-block;
  font-family: 'iconfont';
}
.icon-home::before{
  content: "\e600";
}

使用

<view class="icon icon-home"</view>

小程序事件綁定及處理器

小程序並無相似vuejs的v-model進行雙向綁定，使用bindinput相似jQuery監聽input事件在事件處理器中更新數據，經過event對象e.data.value便可得到input的值。

// bindconfirm監聽鍵盤迴車事件，focus屬性聚焦渲染組件時會自動彈出手機軟鍵盤
<input type='text' placeholder='歌曲名 / 歌手' bindinput='bindSearchInput' bindconfirm='onSearch' focus></input>

bindSearchInput(e) {
  this.setData({
    searchTxt: e.detail.value
  })
}

小程序中的事件處理器並不能像vue同樣傳入參數，由於事件處理器只有一個默認的參數event對象，在for循環的組件中若是要想獲取元素綁定的id，能夠經過和jQuery相同的方式綁定data屬性。

<!-- 輪播圖 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{banner_list}}" wx:key="{{index}}">
    <swiper-item bindtap="navigateToDetail"  data-id="{{item.href}}">
      <image src="{{item.image}}" class="slide-image" mode="widthFix"></image>
    </swiper-item>
  </block>
</swiper>

獲取id：

//事件處理函數
navigateToDetail: function (e) {
  const id = e.currentTarget.dataset.id;
}

阻止事件冒泡

bindtap、bindlongtap、bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancle

對應阻止冒泡事件將bind用catch替代

setData

小程序的視圖更新須要調用setData修改綁定數據，直接對數據進行修改是不會觸發視圖層更新的。setData接受一個對象，爲須要添加或修改的屬性。屬性名有點特殊，[]中的值會被識別爲變量，所以若是要對對象數組中的某個屬性進行修改，只能預先拼接好屬性名。
錯誤作法：

// 視圖不更新
this.data.searchSongs[index].love_flag': 2
// SyntaxError: unknown: Unexpected token
this.setData({
  'searchSongs[' + index + '].love_flag': 2
})

正確作法：

setSongFlag(e) {
// 注意setData屬性名[]中的非整數值會被識別爲變量
let key = 'searchSongs[' + index + '].love_flag'
this.setData({
  [key]: 2
})

關於image組件

小程序wxss的background-image及image組件都不支持本地url
在H5的開發中，一般咱們會將頁面一些不須要根據容器大小來選擇顯示方式的圖片使用img標籤，須要一些特殊顯示方式的使用background。但小程序只須要image組件即可。它提供的mode屬性和背景定義圖片及img元素控制圖片顯示方式對比
| mode屬性 | background-size| html img元素|
| -------- | -----: | -----: |
| scaleToFill | 100%,100%(默認) | width:100%;height:100% |
| aspectFit | contain | js實現 |
| aspectFill | cover | js實現 |
| widthFix | 100%, auto | width: 100%;|
其餘的top、bottom、right、left等不縮放圖片調整位置的屬性與background-position做用相同，img元素則只能經過定位控制。

小程序API異步方案

若是沒有強迫症，小程序API使用默認回調的方式便可；另外因爲小程序只支持es6，不支持async及await，也能夠將API封裝成promise的方式，參考funnycoder的這篇文章。

function promiseify(func) {
    return (args = {}) => {
        return new Promise((resolve, reject) => {
            func.call(wx, Object.assign(args, {
                success: resolve,
                fail: reject,
            }));
        })
    }
}
for (const key in wx) {
    if (Object.prototype.hasOwnProperty.call(wx, key) && typeof wx[key] === 'function') {
        wx[`_${key}`] = promiseify(wx[key]);
    }
}

小程序問題

• 調試器沒有css快捷提示功能和顏色面板，影響佈局及顏色調整效率（隨性派）
• 沒法引入第三方js庫
• 內置組件單調，沒有考慮字體數量比較多時的自適應狀況
• 不支持跳轉外部連接
• 背景圖片或者image組件不能用本地圖片

關於小程序審發佈或更新

小程序上線須要通過審覈、發佈兩個過程。
審覈經過後有全量更新、或者分階段發佈，小程序纔會更新，首次發佈沒有選項。

全量發佈：即時向全量微信用戶發佈新版小程序。
分階段發佈：新版小程序將在15天內以開發者自定義比例，向微信用戶發佈更新
詳情見知乎：發佈小程序時選擇全量發佈和分階段發佈是什麼意思？

不得不說小程序審覈速度是很是快的，即使是我的申請（相比以企業帳號申請會有應用服務類型限制），一般小程序沒有涉及政策不容許的內容或者超太小程序容許的應用服務類型，都是能夠順利經過，初次體驗，即使在國慶期間，也是有工做團隊進行審覈，審覈時間一般在幾小時內。

未完待續

一直關注着小程序，一直處於不慍不火的狀態，但微信團隊一直堅持在更新。從小程序的歷史更新日誌能夠看到，不管是開發工具、基礎庫、與原生硬件交互API都在不斷的更新或者修復異常bug，有時間但願作些與硬件交互更有趣的小程序和你們分享。

這個簡易小程序將加入評論功能，用戶系統功能、樂譜本地收藏、分享、改善圖片加載、滑動位置保存等功能及問題，藉此熟悉小程序開發以便作出更有趣的東西出來，所以本篇文章隨開發過程持續更新。
但願這篇分享對你有所幫助，更但願能與一樣熱愛前端的你交流心得體會抑或工做經歷、困擾等，歡迎知乎私信或郵件交流。

知乎：https://www.zhihu.com/people/huzerui 郵箱：me@huzerui.com