乐趣区

使用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 即可解决问题。
六、总结
这次大概遇到的问题就是这些,以后遇到新的问题再随时补充,欢迎大家提出意见,一起交流进步。

退出移动版