使用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、总结

此次大概遇到的问题就是这些，之后遇到新的问题再随时补充，欢迎你们提出意见，一块儿交流进步。