小程序兼容安卓和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属性照常写,来兼容低版本。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程(cainiaojc.com)。

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。