小程序兼容安卓和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 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
javascript数组排序汇总
Jul 07 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
JS实现的找零张数最小问题示例
Nov 28 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
Node.JS如何实现JWT原理
Sep 18 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 信息采集程序代码
2009/03/17 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
php实现的生成排列算法示例
2019/07/25 PHP
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
python enumerate函数的使用方法总结
2017/11/15 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
Python之list对应元素求和的方法
2018/06/28 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
交通文明倡议书
2014/05/16 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS