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


Posted in Javascript onSeptember 18, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
快速排序 php与javascript的不同之处
Feb 22 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 Javascript
解决vue attr取不到属性值的问题
Sep 18 #Javascript
vue动画打包后失效问题的解决方法
Sep 18 #Javascript
vue自定义全局共用函数详解
Sep 18 #Javascript
vue-自定义组件传值的实例讲解
Sep 18 #Javascript
vuex actions传递多参数的处理方法
Sep 18 #Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 #Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
jquery网页加载进度条的实现
2017/06/01 jQuery
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
实例讲解python函数式编程
2014/06/09 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
浅谈Python peewee 使用经验
2017/10/20 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
C#面试问题
2016/07/29 面试题
记者岗位职责
2014/01/06 职场文书
演讲稿怎么写
2014/01/07 职场文书
探矿工程师自荐信
2014/01/24 职场文书
高中家长寄语
2014/04/02 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书