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

svtter 發布于2019-08-23 15:58 / 1488人閱讀

摘要：前言歷時一周，終于成功兼容了和小程序，在此使用的框架，遇到的問題在此記錄一下。四表單手百小程序組件是支持模式，直接可以實現省市區選擇，但是框架不支持，需要用的功能來實現省市區的選擇。

前言

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

一、環境判斷

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動小程序、H5、React-Native 等）運行的代碼。
因為是一套代碼兼容不同容器，所以在有些不兼容的情況下，判斷所在環境就成了非常重要的一環，taro框架自帶環境判斷如下圖。

二、編譯配置

在小程序中不存在接口訪問跨域的問題，但是轉成h5后開發時這個問題就會出現了，taro有一個專屬于h5的編譯配置，使用方法和webpack幾乎一模一樣，可以非常方便的做proxy轉發,使用方法參考webpack-dev-server配置。

三、地圖功能

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

四、表單

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

五、涉及登錄的接口請求

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

六、總結

這次大概遇到的問題就是這些，以后遇到新的問題再隨時補充，歡迎大家提出意見，一起交流進步。

云服務器 GPU云服務器 h5框架和js框架 h5服務器框架使用方法總結 Taro

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102590.html

前端頁面實現分享

摘要：首先，有自己的配置，可以直接調起右上角的自帶分享，，轉成微信或手百小程序都可用。其次，如果頁面內想通過按鈕調用分享功能的話，的組件可以將，這個值轉為微信小程序和手百小程序都適用。最近在做小程序項目，選用的京東的taro框架，一套代碼可編譯多個環境，不需要一個環境寫一套代碼，用著還不錯。現在分享已經成為一個日常操作，下面就來簡單說下我最近調研的分享功能。首先，taro有自己的配置，可...

littlelightss 2019-08-23 18:23 評論0 收藏0
Taro 簡介

摘要：讓人又愛又恨的微信小程序自微信小程序以下簡稱小程序誕生以來，就伴隨著贊譽與爭議不斷。同時于開發者來說，小程序的生態不斷在完善，許多的坑已被踩平，雖然還是存在一些令人詬病的問題，但已經足見微信的誠意了。 Taro 介紹在互聯網不斷發展的今天，前端程序員們也不斷面臨著新的挑戰，在這個變化多端、不斷革新自己的領域，每一年都有新的美好事物在發生。從去年微信小程序的誕生，到今年的逐漸火熱，以及...

sixgo 2019-08-23 16:18 評論0 收藏0
Taro 優秀學習資源匯總

摘要：多端統一開發框架優秀學習資源匯總官方資源項目倉庫官方文檔項目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學從到構建適配不同端微信小程序等的應用小程序最 Awesome Taro 多端統一開發框架 Taro 優秀學習資源匯總 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 評論0 收藏0
開源中國專訪：Chameleon原理首發，其它跨多端統一框架都是假的？

摘要：中國互聯網絡信息中心發布的中國互聯網絡發展狀況統計報告顯示，截至年月，我國網民規模達億人，微信月活億支付寶月活億百度月活億另一方面，中國手機占智能手機整體的比例超過，月活約億。在年末正式發布了面向未來的跨端的。開源中國專訪：Chameleon原理首發，其它跨多端統一框架都是假的？原創：嘉賓-張楠開源中國以往我們說某一功能跨多端，往往是指在諸如 PC、移動等不同類型的設備之...

GraphQuery 2019-08-23 15:29 評論0 收藏0