成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用taro框架將手百小程序轉(zhuǎn)成h5總結(jié)

svtter / 1496人閱讀

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

前言

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

一、環(huán)境判斷

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節(jié)跳動(dòng)小程序、H5、React-Native 等）運(yùn)行的代碼。
因?yàn)槭且惶状a兼容不同容器，所以在有些不兼容的情況下，判斷所在環(huán)境就成了非常重要的一環(huán)，taro框架自帶環(huán)境判斷如下圖。

二、編譯配置

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

三、地圖功能

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

四、表單

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

五、涉及登錄的接口請(qǐng)求

上線之后我發(fā)現(xiàn)需要登錄的接口使用Taro.request都得不到正確返回，抓包發(fā)現(xiàn)是沒有帶cookie，原因是taro有一個(gè)屬性credentials，只有在h5端有這個(gè)參數(shù)，它的默認(rèn)值是omit，是請(qǐng)求時(shí)不帶cookie的，有效值：include, same-origin, omit。需要在請(qǐng)求時(shí)修改它的值才可以正確傳遞cookie，上線后發(fā)現(xiàn)安卓手機(jī)請(qǐng)求有問題，但iOS手機(jī)都可以正常返回結(jié)果，可能因?yàn)镾afari自帶了cookie相關(guān)的設(shè)置，使同源的請(qǐng)求都可以正確攜帶cookie吧，安卓就沒有這個(gè)功能，導(dǎo)致了這個(gè)問題，加上credentials： same-origin即可解決問題。

六、總結(jié)

這次大概遇到的問題就是這些，以后遇到新的問題再隨時(shí)補(bǔ)充，歡迎大家提出意見，一起交流進(jìn)步。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102590.html

相關(guān)文章

  • 前端頁面實(shí)現(xiàn)分享

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

    littlelightss 評(píng)論0 收藏0

  • Taro 簡介

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

    sixgo 評(píng)論0 收藏0

  • Taro 優(yōu)秀學(xué)習(xí)資源匯總

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

    toddmark 評(píng)論0 收藏0

  • 開源中國專訪：Chameleon原理首發(fā)，其它跨多端統(tǒng)一框架都是假的？

    摘要：中國互聯(lián)網(wǎng)絡(luò)信息中心發(fā)布的中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告顯示，截至年月，我國網(wǎng)民規(guī)模達(dá)億人，微信月活億支付寶月活億百度月活億另一方面，中國手機(jī)占智能手機(jī)整體的比例超過，月活約億。在年末正式發(fā)布了面向未來的跨端的。 開源中國專訪：Chameleon原理首發(fā)，其它跨多端統(tǒng)一框架都是假的？ 原創(chuàng)： 嘉賓-張楠 開源中國 以往我們說某一功能跨多端，往往是指在諸如 PC、移動(dòng)等不同類型的設(shè)備之...

    GraphQuery 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<