小程序兼容安卓和IOS数据处理问题及坑

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了小程序兼容安卓和IOS数据处理问题及坑，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4408字，纯文字阅读大概需要7分钟。

内容图文

最近开发微信小程序，遇到到过种坑，例如什么前端发送请求，后端请求成功，没有获取到前端传递的值；后端请求成功，并且值，前端就是出不来数据；请求接口出现Provision headers are shown的现象；到最后苹果手机上出现数据，安卓手机出现不了数据等等，非常多的bug。备注后端我用的php开发的，框架用的TP5.0，我一度怀疑是我框架的原因。安卓需要的是字符串，苹果好像都行吧，我是做的兼容处理。

作为一名程序员，连bug都没有，你还开发什么软件？废话不说了先上问题吧；

1.小程序前端发送请求给后端，常用的有2中方式，一种是get请求，一种是POST请求，首先举例get请求吧，

wx.request({
      url: that.globalData.baseUrl + 'user/add',//请求后台接口
      data: {
       code: avatarUrl,
       username: nickName }
      header: {
       'content-type':'application/json',// 默认值
        token: wx.getStorageSync('token')
       },
      method: "get",
      success: function (res) {
       // console.log(res)
      }
     }) 

这种传递方式是没有什么问题，后端怎么都会接受到数据，前端也可以接受到数据。

主要是看第二种post方法；

wx.request({
      url: that.globalData.baseUrl + 'wx/getToken',//请求后台接口
      data: {
       code: res.code
      },
      header: {
       "Content-Type": "application/x-www-form-urlencoded",
      },
      method: "POST",
       success: function (res) {
       console.log(res);
       wx.setStorageSync('token', res.data.data)

      }
     })

这种情况是后端是可以接受到数据的，，但是把  "Content-Type": "application/x-www-form-urlencoded",换成 'content-type':'application/json'，后端接口就接收不到数据，但是有的小程序上面post请求中header头换成'content-type':'application/json'，也能接受到数据。但是我后端就是不能，后来我就换成了这个。

2.后端请求成功，并且值，前端就是出不来数据？

 主要是请求的类型和你返回给前端的数据类型不对一致。这是你就需要及时检测数据类型，并且换成对应的数据类型。

3.请求接口出现Provision headers are shown的现象

出现上述现象主要是应为阻塞的原因，主要需要下面几个方面，首先是否用了断点，断点没注意，就会出现；数据库方面的请求连接是否过长，否则也会出现。小程序要求速度快，所以一般都用原生数据库接口更好点，响应速度短，界面反应也快。

4.到最后苹果手机上出现数据，安卓手机出现不了数据

例如后端返回数据出现是这种 "{"code":1,"data":"4f756fd91b8a81f1","msg":"请求成功"}" ，那么需要对应处理：首先判断是那种数据类型

var json =res.data
if (typeof json != 'object') {
 if (json != null) {
json = json.replace("\ufeff", "")
var ob = JSON.parse(json)
  } }

转字符串还是json对象，一般都是转json对象，传值得时候转json字符串比较多。有时候返回的值可能会出现前面有个隐藏的点，JSON.parse处理返回什么“token 有个0”，那么需要用下面的处理一下数据var aa = res.data.trim();var bb = JSON.parse(aa)；谢谢大家，第一次写。以前都是印象笔记上写；现在简书上写。请多多指教

我总结下我印象深刻的几个坑~

1.回答下最开始的那个问题，手写一个日历，为什么在安卓能遍历显示，而苹果里却不显示？

首先确定这并不是遍历的bug,肯定是兼容性问题，遍历这是最基本的语法，问题肯定出在遍历的数据处理阶段，看了代码果不其然，结论就是：ios 系统的问题，比如newDate(“2018-08-08”)，在ios会出现NaN的情况，ios只支持newDate(“2018/08/08”)

2.video 视频格式m3u8,在ios里边儿不能播放，但是安卓能正常播放？

分析

官方给的例子，是mp4格式的文件，ios可以播放，微信小程序开发者平台的论坛也有类似的问题，但是没有准确的答案，我开始考虑转换下格式，奈何，技术不够，尝试添加在image 标签 添加 custom-cache={{cache}} ,data 中添加 cache:false问题解决了。

解决

<video src="{{sbDress}}" controls  custom-cache="{{cache}}"></video>

3.微信小程序WxParse 包含图片安卓端无法加载

分析

wxparse 是微信小程序用于解析富文本编辑器生成代码的插件，用于展示一般的图文。在安卓手机端如果内容包含图片的标签时整个内容都无法加载出来，在手机端查看console，发现安卓机在console.dir()的时候报错，这是由于安卓机不支持console.dir()的语法。

结论：这是安卓机不支持console.dir()的语法,使用console.log()代替。

4.安卓上图片会出现卡顿，变形，然后才会显示正常的图片大小

分析

开发文档里写明：注：image组件默认宽度300px、高度225px，开发时所有image的小图标都使用了mode=”widthFixed”,只设置了宽度，让高度自适应，就会出现图片加载时初始化高度位225px,加载完毕才显示mode的高度，由于安卓机这个卡顿教明显，才会出现瞬时的变形。

结论：今后使用image 标签，尽量固定宽高。

5.navigationBar 在安卓机中位置为左边，在苹果中居中显示，那么标题字数多了之后苹果就会默认使用…代替剩余的文字

分析

这个也不是bug，只不过时显示问题，目前版本6.6.0里支持在window属性里设置navigationStyle由默认样式修改为custom,支持自定义样式。所谓的自定义样式，就是默认导航，只剩一个胶囊的导航。

结论：app.json里边儿设置window{“navitionStyle”:”custom”},后要自己使用在wxml，and wxss里写样式显示头部的导航栏。

注意

由于该属性是微信6.6.0才支持，所以需要将其他的window属性照常写，来兼容低版本。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的小程序兼容安卓和IOS数据处理问题及坑全部内容，希望文章能够帮你解决小程序兼容安卓和IOS数据处理问题及坑所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---