资讯专栏INFORMATION COLUMN

使用taro框架将手百小程序转成h5总结

svtter / 1481人阅读

摘要:前言历时一周,终于成功兼容了和小程序,在此使用的框架,遇到的问题在此记录一下。四表单手百小程序组件是支持模式,直接可以实现省市区选择,但是框架不支持,需要用的功能来实现省市区的选择。

前言

历时一周,终于成功兼容了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即可解决问题。

六、总结

这次大概遇到的问题就是这些,以后遇到新的问题再随时补充,欢迎大家提出意见,一起交流进步。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102590.html

相关文章

  • 前端页面实现分享

    摘要:首先,有自己的配置,可以直接调起右上角的自带分享,,转成微信或手百小程序都可用。其次,如果页面内想通过按钮调用分享功能的话,的组件可以将,这个值转为微信小程序和手百小程序都适用。 最近在做小程序项目,选用的京东的taro框架,一套代码可编译多个环境,不需要一个环境写一套代码,用着还不错。现在分享已经成为一个日常操作,下面就来简单说下我最近调研的分享功能。 首先,taro有自己的配置,可...

    littlelightss 评论0 收藏0
  • Taro 简介

    摘要:让人又爱又恨的微信小程序自微信小程序以下简称小程序诞生以来,就伴随着赞誉与争议不断。同时于开发者来说,小程序的生态不断在完善,许多的坑已被踩平,虽然还是存在一些令人诟病的问题,但已经足见微信的诚意了。 Taro 介绍 在互联网不断发展的今天,前端程序员们也不断面临着新的挑战,在这个变化多端、不断革新自己的领域,每一年都有新的美好事物在发生。从去年微信小程序的诞生,到今年的逐渐火热,以及...

    sixgo 评论0 收藏0
  • Taro 优秀学习资源汇总

    摘要:多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

    toddmark 评论0 收藏0
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?

    摘要:中国互联网络信息中心发布的中国互联网络发展状况统计报告显示,截至年月,我国网民规模达亿人,微信月活亿支付宝月活亿百度月活亿另一方面,中国手机占智能手机整体的比例超过,月活约亿。在年末正式发布了面向未来的跨端的。 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的? 原创: 嘉宾-张楠 开源中国 以往我们说某一功能跨多端,往往是指在诸如 PC、移动等不同类型的设备之...

    GraphQuery 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<