最近恰好有機會研究微信小程序，簡單記錄一下遇到的點點滴滴～

微信小程序算是在微信裡的迷你 App，有自己的一套開發工具，架構和語言與傳統 HTML + CSS + JS 十分類似，但有些標籤和特性要使用微信所提供的 API。要發佈 App 必須要註冊，海外只能以企業名義註冊，並且需要付 300 人民幣認證。App 打包限制為 2M，因此圖片和資源會建議以伺服器提供。

樣式

使用 rpx 單位（responsive pixel）

可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

iPhone 的瀏海和底部安全區域

一開始我使用 wx.getSystemInfo 取得裝置後偽裝置作特化，但想想覺得這樣太傻，最後查到可以使用 CSS 的屬性 env(safe-area-inset-bottom) 。關於 env() 或 constant() 可以參考這篇：网页适配 iPhoneX，就是这么简单。

組件限制

<image> 以外圖片須採 base64 或網路資源

若是要在 <image> 標籤以外地方使用圖片，如背景圖，無法透過 CSS 引入本地圖片（模擬器看似可以，但其實是個幻覺），只能採用 base64 或伺服器資源引入。

<scroll-view> 組件使用 flex 樣式無效

製作清單、卡片等項目時經常會使用 <scroll-view> 包裹項目，但卻發現 flexbox 的 CSS 不會起作用。最簡單的解決方式是在 <scroll-view> 下再額外包裹一層 <view>，由其來完成 flexbox 排版。

<swiper> 中無法使用 <video> 組件

<video> 層級較高，參照官方文檔「原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。」可以透過點擊後開啟 dialog 播放影片的方式作為 workaround。

開放資料

openid 無法直接取得

為避免小程序直接隱含 App 密鑰，小程序呼叫 wx.login 後，只能取得 code，必須用此 code 和 App 相關資訊另外從微信 API 取得 openid 做使用。後端透過 API 會取得 openid、session key 等敏感資料。

openid 是該用戶在小程序中的身份識別，而 session key 是用來驗證後續取得的資料完整性。可以用 raw data + session key 產出簽名，比對簽名驗證。

API

wx.request()

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

類似 fetch 或 $.ajax 的方法，帶有 success、fail、complete callback。需注意的是，只要從伺服器端取得回應，都會進到 success 之中，因此要記得判斷 statusCode。

wx.switchTab()

當如果導向的頁面是 tabBar 其中一員，要使用 switchTab()，navigateTo() 不作用。