基于后端云微信小程序開(kāi)發(fā)

開(kāi)發(fā)小程序時(shí)，使用bmob后端云提供數(shù)據(jù)存儲(chǔ)服務(wù)，文檔詳細(xì)簡(jiǎn)練，主要是縮短了開(kāi)發(fā)周期，不過(guò)對(duì)于復(fù)雜的項(xiàng)目，還是推薦使用自己服務(wù)器提供數(shù)據(jù)服務(wù)。

源碼地址： github.com/alex1504/wx…

下面分點(diǎn)分享下小程序的開(kāi)發(fā)過(guò)程中的關(guān)鍵點(diǎn)及感受，說(shuō)明：

1. 小程序標(biāo)簽統(tǒng)稱組件，Html標(biāo)簽統(tǒng)稱元素。
2. 部分內(nèi)容會(huì)與vuejs及jQuery作對(duì)比

使用iconfont字體圖標(biāo)

新建項(xiàng)目并添加圖標(biāo)

 

在app.wxss中以u(píng)nicode方式引入

@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');
}
復(fù)制代碼

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

.icon{
  display: inline-block;
  font-family: 'iconfont';
}
.icon-home::before{
  content: "\e600";
}
復(fù)制代碼

使用

<view class="icon icon-home"</view>
復(fù)制代碼

小程序事件綁定及處理器

小程序并沒(méi)有類似vuejs的v-model進(jìn)行雙向綁定，使用bindinput類似jQuery監(jiān)聽(tīng)input事件在事件處理器中更新數(shù)據(jù)，通過(guò)event對(duì)象e.data.value即可獲得input的值。

// bindconfirm監(jiān)聽(tīng)鍵盤回車事件，focus屬性聚焦渲染組件時(shí)會(huì)自動(dòng)彈出手機(jī)軟鍵盤
<input type='text' placeholder='歌曲名 / 歌手' bindinput='bindSearchInput' bindconfirm='onSearch' focus></input>
復(fù)制代碼

bindSearchInput(e) {
  this.setData({
    searchTxt: e.detail.value
  })
}
復(fù)制代碼

小程序中的事件處理器并不能像vue一樣傳入?yún)?shù)，因?yàn)槭录幚砥髦挥幸粋€(gè)默認(rèn)的參數(shù)event對(duì)象，在for循環(huán)的組件中如果要想獲取元素綁定的id，可以通過(guò)和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>
復(fù)制代碼

獲取id：

//事件處理函數(shù)
navigateToDetail: function (e) {
  const id = e.currentTarget.dataset.id;
}
復(fù)制代碼

阻止事件冒泡

bindtap、bindlongtap、bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancle
復(fù)制代碼

對(duì)應(yīng)阻止冒泡事件將bind用catch替代

setData

小程序的視圖更新需要調(diào)用setData修改綁定數(shù)據(jù)，直接對(duì)數(shù)據(jù)進(jìn)行修改是不會(huì)觸發(fā)視圖層更新的。setData接受一個(gè)對(duì)象，為需要添加或修改的屬性。屬性名有點(diǎn)特殊，[]中的值會(huì)被識(shí)別為變量，因此如果要對(duì)對(duì)象數(shù)組中的某個(gè)屬性進(jìn)行修改，只能預(yù)先拼接好屬性名。 錯(cuò)誤做法：

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

正確做法：

setSongFlag(e) {
// 注意setData屬性名[]中的非整數(shù)值會(huì)被識(shí)別為變量
let key = 'searchSongs[' + index + '].love_flag'
this.setData({
  [key]: 2
})
復(fù)制代碼

關(guān)于image組件

小程序wxss的background-image及image組件都不支持本地url 在H5的開(kāi)發(fā)中，通常我們會(huì)將頁(yè)面一些不需要根據(jù)容器大小來(lái)選擇顯示方式的圖片使用img標(biāo)簽，需要一些特殊顯示方式的使用background。但小程序只需要image組件便可。它提供的mode屬性和背景定義圖片及img元素控制圖片顯示方式對(duì)比

mode屬性	background-size	html img元素
scaleToFill	100%,100%(默認(rèn))	width:100%;height:100%
aspectFit	contain	js實(shí)現(xiàn)
aspectFill	cover	js實(shí)現(xiàn)
widthFix	100%, auto	width: 100%;

其他的top、bottom、right、left等不縮放圖片調(diào)整位置的屬性與background-position作用相同，img元素則只能通過(guò)定位控制。

小程序API異步方案

如果沒(méi)有強(qiáng)迫癥，小程序API使用默認(rèn)回調(diào)的方式即可；另外由于小程序只支持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)//執(zhí)行函數(shù)，obj為傳入函數(shù)的參數(shù)
    })
  }
}
module.exports = {
    promisify: promisify
}
復(fù)制代碼

使用：

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

request({
    url: 'some URL'
    method: 'GET',
}).then(res => {   
    console.log(res)                 
}
復(fù)制代碼

小程序問(wèn)題

• 調(diào)試器沒(méi)有css快捷提示功能和顏色面板，影響布局及顏色調(diào)整效率（隨性派）
• 無(wú)法引入第三方j(luò)s庫(kù)
• 內(nèi)置組件單調(diào)，沒(méi)有考慮字體數(shù)量比較多時(shí)的自適應(yīng)情況
• 不支持跳轉(zhuǎn)外部鏈接
• 背景圖片或者image組件不能用本地圖片

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看：小程序商店