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功能来实现省市区的选择。所以还需要一个城市列表的接口。

五、涉及登录的接口请求

上线之后我发现需要登录的接口使用Taro.request都得不到正确返回，抓包发现是没有带cookie，原因是taro有一个属性credentials，只有在h5端有这个参数，它的默认值是omit，是请求时不带cookie的，有效值：include, same-origin, omit。需要在请求时修改它的值才可以正确传递cookie，上线后发现安卓手机请求有问题，但iOS手机都可以正常返回结果，可能因为Safari自带了cookie相关的设置，使同源的请求都可以正确携带cookie吧，安卓就没有这个功能，导致了这个问题，加上credentials： same-origin即可解决问题。

六、总结

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

taro 小程序转h5之后报错_使用taro框架将手百小程序转成h5总结相关推荐

taro 小程序转h5之后报错_原生小程序转H5
原生小程序转Taro,Taro转多端这里先讲一下需求,公司之前的小程序是用原生开发的,目前有客户需要同样的H5版本的项目,考虑短时间内开发出一个差不多100个页面左右的H5项目不太现实.所以这里就用 ...
taro 小程序转h5之后报错_记录微信小程序转Taro中遇到的问题
环境系统:windows 开发工具:微信开发工具RC V1.02.1907301 + vscode 微信基础库版本:2.8.1 Taro:v1.3.15 npm: 6.4.1 node: v8.12 ...
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
微信小程序云开发用户身份登录_云开发版的微信商城小程序第一章
我们经过前面小程序基础和云开发基础的学习,今天就来带大家实现一个综合项目,上线一款属于自己的微信商城小程序. 文末有彩蛋如果你有小程序基础可以跳过上面的基础,直接看下面的,如果没有小程序基础,建议你 ...
h5 加载完成_开业通知朋友圈怎么写？新店开业宣传H5
点击上方蓝字关注我们! 电子邀请函作为当下做流行的传播途径,有着制作简单,传播广泛,而且电子邀请函无需下载又可以从微信.朋友圈加载,尤其适用于新店开业邀请.结婚邀请.同学会邀请. 跟着小编一起看看开业 ...
java网上商城学年论文_基于java框架的网上购物商城程序(毕业设计)+论文
这是一份网上购物商城程序毕业设计开发语言是java,数据库是mysql 摘要随着现在社会信息化的高度发展,中国的互联网迎来了新一轮的发展高潮,人们选择上网的方式更加多样化了,同时网上购物作为电子商 ...
VMware 丢失vmx文件恢复后报错：找不到磁盘文件，“另一个程序已锁定文件的一部分，进程无法访问”解决办法
从vmware.log日志里恢复vmx配置后,启动老是提示已锁定 1.删除带lck文件 2.修改vmx文件,删除类似下面的恢复点checkpoint设置 checkpoint.vmState = &q ...
微信小程序识别图片并提取文字_图片转文字识别功能的小程序，超精准识别——闪电识字...
假设你得到了一个纸质文件的任务.比如,杂志.彩页或者你合作伙伴发给你的PDF合同需要你重新编辑,很明显,用人工手打的方式,会耗费不少时间. 相信在如今这个智能化时代,多数人第一时间想到的都会是利用工具 ...
一个程序如何连接到外网_如何从头开始开发一个微信小程序
网上有很多的人在问:怎么开发一个微信小程序?今天我来给大家详细讲讲如何申请开发并部署一个微信小程序,大家看完这篇文章后就能够自己运营一个属于自己的小程序了. 现在的小程序有百度小程序,头条小程序,支付 ...

taro 小程序转h5之后报错_使用taro框架将手百小程序转成h5总结

taro 小程序转h5之后报错_使用taro框架将手百小程序转成h5总结相关推荐

最新文章

热门文章