小程序兼容安卓和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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
js去除重复字符串两种实现方法
2013/01/09 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
VUE重点问题总结
2018/03/19 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Django中使用group_by的方法
2015/05/26 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
介绍一下MD5加密算法
2016/11/12 面试题
四风问题查摆材料
2014/08/25 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
团组织关系介绍信
2019/06/24 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python