使用taro框架將手百小程序轉成h5總結

前言

歷時一週，終於成功兼容了h5和小程序，在此使用的taro框架，遇到的問題在此記錄一下。

1、環境判斷

使用 Taro，咱們能夠只書寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信/百度/支付寶/字節跳動小程序、H五、React-Native 等）運行的代碼。
由於是一套代碼兼容不一樣容器，因此在有些不兼容的狀況下，判斷所在環境就成了很是重要的一環，taro框架自帶環境判斷以下圖。

2、編譯配置

在小程序中不存在接口訪問跨域的問題，可是轉成h5後開發時這個問題就會出現了，taro有一個專屬於h5的編譯配置，使用方法和webpack幾乎如出一轍，能夠很是方便的作proxy轉發,使用方法參考webpack-dev-server配置。

3、地圖功能

小程序中自帶地圖api，如手百小程序中有專門的map組件，涉及位置信息的功能能夠直接調用swan.openLocation跳轉內置地圖頁面，十分方便，可是轉成h5以後沒有子帶的地圖功能怎麼辦。。。沒錯，本身手寫一個，使用process.env.TARO_ENV判斷環境爲h5時跳轉到本身寫的map頁，百度地圖有封裝好的各類api，能夠在頁面中調用，詳見百度地圖開放平臺。

4、表單

手百小程序picker組件是支持region模式，直接能夠實現省市區選擇，可是taro框架h5不支持，須要用picker的multiSelector功能來實現省市區的選擇。因此還須要一個城市列表的接口。

5、涉及登陸的接口請求

上線以後我發現須要登陸的接口使用Taro.request都得不到正確返回，抓包發現是沒有帶cookie，緣由是taro有一個屬性credentials，只有在h5端有這個參數，它的默認值是omit，是請求時不帶cookie的，有效值：include, same-origin, omit。須要在請求時修改它的值才能夠正確傳遞cookie，上線後發現安卓手機請求有問題，但iOS手機均可以正常返回結果，可能由於Safari自帶了cookie相關的設置，使同源的請求均可以正確攜帶cookie吧，安卓就沒有這個功能，致使了這個問題，加上credentials： same-origin便可解決問題。

6、總結

此次大概遇到的問題就是這些，之後遇到新的問題再隨時補充，歡迎你們提出意見，一塊兒交流進步。