taro 小程序转h5之后报错_使用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功