基於後端雲微信小程式開發

hzr發表於2018-07-23
後端微信小程式

人的一生90%的時間都在做著無聊的事情，社會的發展使得我們的閒暇時間越來越多，我們把除了工作的其他時間放在各種娛樂活動上。

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

關於bmob小程式開發文件請戳這裡，文件詳細簡練，主要是縮短了開發週期，不過對於複雜的專案，還是推薦使用自己伺服器提供資料服務。

使用微信掃描二維碼預覽

qrcode
原始碼地址：github.com/alex1504/wx…

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

  1. 小程式標籤統稱元件，Html標籤統稱元素。
  2. 部分內容會與vuejs及jQuery作對比

使用iconfont字型圖示

新建專案並新增圖示

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的方式。

function promisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        resolve(res)
      }

      obj.fail = function (res) {
        reject(res)
      }

      fn(obj)//執行函式，obj為傳入函式的引數
    })
  }
}
module.exports = {
    promisify: promisify
}
複製程式碼

使用：

const promisify = require('./promisify.js')
const request = promisify(wx.request);

request({
    url: 'some URL'
    method: 'GET',
}).then(res => {   
    console.log(res)                 
}
複製程式碼

小程式問題

  • 偵錯程式沒有css快捷提示功能和顏色皮膚，影響佈局及顏色調整效率（隨性派）
  • 無法引入第三方js庫
  • 內建元件單調，沒有考慮字型數量比較多時的自適應情況
  • 不支援跳轉外部連結
  • 背景圖片或者image元件不能用本地圖片

關於小程式審釋出或更新

小程式上線需要經過稽核、釋出兩個過程。 稽核通過後有全量更新、或者分階段釋出，小程式才會更新，首次釋出沒有選項。

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

不得不說小程式稽核速度是非常快的，即便是個人申請（相比以企業賬號申請會有應用服務型別限制），通常小程式沒有涉及政策不允許的內容或者超過小程式允許的應用服務型別，都是可以順利通過，初次體驗，即便在國慶期間，也是有工作團隊進行稽核，稽核時間通常在幾小時內。

總結

在開發這個小程式時，微信小程式只支援頁面級開發，如今小程式已支援元件開發和外掛開發。元件的結構和頁面並無區別，自定義元件可以引入其他的元件，具體的開發步驟可以參考這邊文章【微信小程式】自定義元件

小程式的興起使得前端開發又多了一個工作任務，但這也使得前端程式設計師的成就感越來越強，當然沒有經歷過瀏覽器刀耕火種年代的工程師難以體會這種辛酸，但也沒必要，只要跟上時代的潮流和注重自身的基礎建設便已足夠了，前端路途艱辛，我在路上與你共勉。

相關文章