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

最近开发微信小程序，遇到到过种坑，例如什么前端发送请求，后端请求成功，没有获取到前端传递的值；后端请求成功，并且值，前端就是出不来数据；请求接口出现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属性照常写，来兼容低版本。

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