• css樣式不能引用本地圖片資源，只能引用線上資源( background-image )，引用本地圖片資源只能用 <image> 標(biāo)簽。

• {{}} 不能執(zhí)行函數(shù)方法， {{}} 只支持基本的簡(jiǎn)單運(yùn)算和ES6拓展運(yùn)算符。如價(jià)格格式化這種常用的處理，只能在js代碼中處理好然后再模板中渲染。

  this.setData({
   price: this.formatPrice(this.data.price)
  })
  復(fù)制代碼

• 可以通過 wxs 模塊解決 {{}} 中不能執(zhí)行函數(shù)的問題?？梢宰龅侥Mvue.js中過濾器的功能。

  <!-- wxml模板 -->
  <wxs src="../../modules/formatPrice.wxs" module="tools" />
  
  <view>價(jià)格：{{tools.formatPrice(price)}}</view>
  復(fù)制代碼

  // wxs模塊
  var formatPrice = function (price){
      price = price >> 0;
      return Number(price / 100).toFixed(2);
  }
  
  module.exports = {
      formatPrice
  }
  復(fù)制代碼

• 小程序不支持分享鏈接到朋友圈，暫時(shí)的通用做法是生成保存有頁面小程序嗎的圖片到本地相冊(cè)。又用戶自行發(fā)朋友圈轉(zhuǎn)發(fā)。前端可以利用 canvas 來實(shí)現(xiàn)，減輕服務(wù)端壓力。但是會(huì)有圖片鋸齒不清晰的問題。建議預(yù)覽圖和保存到真機(jī)的圖片采用不同的尺寸。保存在真機(jī)的圖片按照750的寬度實(shí)現(xiàn)。相比于預(yù)覽圖要大一些，這樣保存到手機(jī)的圖片會(huì)清晰很多。

• 小程序布局采用rpx單位，UI稿按照750的寬度出圖?？芍苯邮褂肬I稿的尺寸。但是在某些機(jī)型上 1rpx 會(huì)無法顯示。可以用H5的方式實(shí)現(xiàn)1px效果。

• iphoneX吸底按鈕的適配，可以用媒體查詢獲取wx.getSystemInfo獲取機(jī)型。參考

  @media only screen 
      and (device-width : 375px) 
      and (device-height : 812px) 
      and (-webkit-device-pixel-ratio : 3) { }
  復(fù)制代碼

• 頁面A -> 頁面B，頁面B的操作觸發(fā)了頁面A的數(shù)據(jù)更新。返回更新頁面A的數(shù)據(jù)，通常有兩種方式來實(shí)現(xiàn)(我司采用了方案二)：

  1. 在頁面A監(jiān)聽onShow事件，在onShow事件觸發(fā)時(shí)無腦更新頁面數(shù)據(jù)。
  2. 通過EventBus來實(shí)現(xiàn)跨頁面通信。

• 復(fù)雜組件的開發(fā)，省市區(qū)三級(jí)聯(lián)動(dòng)選擇器的開發(fā)，獲取微信地址庫的地址的編碼和業(yè)務(wù)采用的省市區(qū)編碼對(duì)不上。

• 頁面路徑的層級(jí)，最大不能超過10層。

• 小程序小程序分包加載，微信對(duì)小程序包的大小有如下限制。

• 整個(gè)小程序所有分包大小不超過 8M
• 單個(gè)分包/主包大小不能超過 2M

微信小程序主流框架對(duì)比

• wepy
• mpvue
• Taro

wepy

wepy應(yīng)該算是最早發(fā)布的小程序開發(fā)框架，提供了類vue.js的語法風(fēng)格和特性，現(xiàn)階段應(yīng)該也是應(yīng)用最廣泛的框架吧。我開發(fā)的幾個(gè)小程序也都是采用了wepy這個(gè)框架。我先來說說當(dāng)初為什么選擇這個(gè)框架的原因吧。

1. 類Vue.js的語法風(fēng)格，適合我們團(tuán)隊(duì)原有的的技術(shù)棧
2. 支持組件化（當(dāng)時(shí)微信官方的API還不支持組件化）
3. 支持加載外部npm包
4. 支持ES6的寫法

前期使用wepy的過程中，wepy自帶bug。不過好在開發(fā)者響應(yīng)及時(shí)，基本上都能覆蓋大部分場(chǎng)景。

但是有個(gè)最大的坑點(diǎn)就是，wepy組件的實(shí)現(xiàn)方式。 組件使用的是靜態(tài)編譯組件，即組件是在編譯階段編譯進(jìn)頁面的，每個(gè)組件都是唯一的一個(gè)實(shí)例。 多個(gè)組件共享同一個(gè)數(shù)據(jù)。并且靜態(tài)編譯組件。導(dǎo)致組件A，在頁面A和頁面B被引用，會(huì)copy兩份代碼到頁面A和頁面B內(nèi)部。導(dǎo)致拆分組件并沒有對(duì)包的體積有任何減少。后期微信官方API支持組件化編程后，我們逐步把一些比較核心，體積較大的組件用原聲API重構(gòu)了。

mpvue

由美團(tuán)團(tuán)隊(duì)開發(fā)，mpvue和wepy一樣也是在小程序上提供了類vue.js的開發(fā)體驗(yàn)。作為后來者，搶占了很多wepy的市場(chǎng)份額（ps：我們團(tuán)隊(duì)近期也在考慮從wepy遷移到mpvue）。這個(gè)框架的原理相比wepy要更加復(fù)雜一點(diǎn)，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，提供了更加接近于vue.js的開發(fā)體驗(yàn)。

Taro

Taro是由京東團(tuán)隊(duì)開源的一套遵循 React 語法規(guī)范的多端開發(fā)解決方案。本身我對(duì)React和Taro都不是很了解，就不多解釋了。具體可以看開發(fā)團(tuán)隊(duì)的博客和代碼了解更多細(xì)節(jié) 多端統(tǒng)一開發(fā)框架 - Taro