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

前言

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

六、总结

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!