-
css樣式不能引用本地圖片資源，只能引用線上資源( background-image )，引用本地圖片資源只能用 <image> 標簽。
-
{{}} 不能執行函數方法， {{}} 只支持基本的簡單運算和ES6拓展運算符。如價格格式化這種常用的處理，只能在js代碼中處理好然后再模板中渲染。
this.setData({
price: this.formatPrice(this.data.price)
})
復制代碼
-
可以通過 wxs 模塊解決 {{}} 中不能執行函數的問題。可以做到模擬vue.js中過濾器的功能。
<!-- wxml模板 -->
<wxs src="../../modules/formatPrice.wxs" module="tools" />
<view>價格：{{tools.formatPrice(price)}}</view>
復制代碼
// wxs模塊
var formatPrice = function (price){
price = price >> 0;
return Number(price / 100).toFixed(2);
}
module.exports = {
formatPrice
}
復制代碼
-
小程序不支持分享鏈接到朋友圈，暫時的通用做法是生成保存有頁面小程序嗎的圖片到本地相冊。又用戶自行發朋友圈轉發。前端可以利用 canvas 來實現，減輕服務端壓力。但是會有圖片鋸齒不清晰的問題。建議預覽圖和保存到真機的圖片采用不同的尺寸。保存在真機的圖片按照750的寬度實現。相比于預覽圖要大一些，這樣保存到手機的圖片會清晰很多。
-
小程序布局采用rpx單位，UI稿按照750的寬度出圖。可直接使用UI稿的尺寸。但是在某些機型上 1rpx 會無法顯示。可以用H5的方式實現1px效果。
-
iphoneX吸底按鈕的適配，可以用媒體查詢獲取wx.getSystemInfo獲取機型。參考
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
復制代碼
-
頁面A -> 頁面B，頁面B的操作觸發了頁面A的數據更新。返回更新頁面A的數據，通常有兩種方式來實現(我司采用了方案二)：
-
在頁面A監聽onShow事件，在onShow事件觸發時無腦更新頁面數據。
-
通過EventBus來實現跨頁面通信。
-
復雜組件的開發，省市區三級聯動選擇器的開發，獲取微信地址庫的地址的編碼和業務采用的省市區編碼對不上。
-
頁面路徑的層級，最大不能超過10層。
-
小程序小程序分包加載，微信對小程序包的大小有如下限制。
-
整個小程序所有分包大小不超過 8M
-
單個分包/主包大小不能超過 2M
微信小程序主流框架對比
wepy
wepy應該算是最早發布的小程序開發框架，提供了類vue.js的語法風格和特性，現階段應該也是應用最廣泛的框架吧。我開發的幾個小程序也都是采用了wepy這個框架。我先來說說當初為什么選擇這個框架的原因吧。
-
類Vue.js的語法風格，適合我們團隊原有的的技術棧
-
支持組件化（當時微信官方的API還不支持組件化）
-
支持加載外部npm包
-
支持ES6的寫法
前期使用wepy的過程中，wepy自帶bug。不過好在開發者響應及時，基本上都能覆蓋大部分場景。
但是有個最大的坑點就是，wepy組件的實現方式。 組件使用的是靜態編譯組件，即組件是在編譯階段編譯進頁面的，每個組件都是唯一的一個實例。 多個組件共享同一個數據。并且靜態編譯組件。導致組件A，在頁面A和頁面B被引用，會copy兩份代碼到頁面A和頁面B內部。導致拆分組件并沒有對包的體積有任何減少。后期微信官方API支持組件化編程后，我們逐步把一些比較核心，體積較大的組件用原聲API重構了。
mpvue
由美團團隊開發，mpvue和wepy一樣也是在小程序上提供了類vue.js的開發體驗。作為后來者，搶占了很多wepy的市場份額（ps：我們團隊近期也在考慮從wepy遷移到mpvue）。這個框架的原理相比wepy要更加復雜一點，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，提供了更加接近于vue.js的開發體驗。
Taro
Taro是由京東團隊開源的一套遵循 React 語法規范的多端開發解決方案。本身我對React和Taro都不是很了解，就不多解釋了。具體可以看開發團隊的博客和代碼了解更多細節 多端統一開發框架 - Taro
|
