视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
小程序兼容安卓和IOS数据处理问题及坑
2020-11-27 22:07:33 责编:小采
文档


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

下载本文
显示全文
专题