当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序兼容性问题该如何解决

微信小程序兼容性问题该如何解决

2018-08-28 11:15 来源: 霸界科技

摘要:在微信小程序开发中,经常会遇到一些兼容性的问题,比如,就是在时间字符串转化为时间戳的方法中,我用的Date.parse(new Date())这个方法,但是在微信开发者工具中这个方法正常实现,...

期权保本理财
  在微信小程序开发中,经常会遇到一些兼容性的问题,比如,就是在时间字符串转化为时间戳的方法中,我用的Date.parse(new Date())这个方法,但是在微信开发者工具中这个方法正常实现,但是在一些iphone设备和安卓的部分设备中不会实现相关功能,为了解决这个问题我只能导入了momentjs,不在调用系统方法了。这里我们就来讨论一下一些兼容性问题。
 
微信小程序兼容性问题该如何解决
 
  运行环境差异
 
  微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具。
 
  三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的:
 
  在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8以上
 
  在 Android 上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由 X5 基于 Mobile Chrome 53/57 内核来渲染的
 
  在 开发工具上, 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的
 
  尽管三端的环境是十分相似的,但是还是有些许区别:
 
  ES6 语法支持不一致 语法上开发者可以通过开启 ES6 转 ES5 的功能来规避。
 
  wxss 渲染表现不一致 尽管可以通过开启样式补全来规避大部分的问题,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。
 
  ES6 转 ES5
 
  在 0.10.101000 以及之后版本的开发工具中,会默认使用 babel 将开发者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码,帮助开发者解决环境不同所带来的开发问题。
 
  样式补全
 
  开启此选项,开发工具会自动检测并补全缺失样式,保证在低版本系统上的正常显示。尽管可以规避大部分的问题 ,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。
 
  兼容
 
  小程序的功能不断的增加,但是旧版本的微信客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容。
 
  文档会在组件,API等页面描述中带上各个功能所支持的版本号。
 
  可以通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到小程序的基础库版本号。
 
  可以通过 wx.canIUse 来判断是否可以在该基础库版本下直接使用对应的API或者组件
 
  获取系统信息
 
  同步
 
  let res = wx.getSystemInfoSync()
 
  console.log("同步获取系统信息:" + res);
 
  console.log(res);
 
  异步:
 
  wx.getSystemInfo({
 
  success: function(res) {
 
  console.log("异步获取系统信息:");
 
  console.log(res);
 
  },
 
  })
 
  版本比较
 
  微信客户端和小程序基础库的版本号风格为 Major.Minor.Patch(主版本号.次版本号.修订号)。 开发者可以根据版本号去做兼容
 
  function compareVersion(v1, v2) {
 
  v1 = v1.split('.')
 
  v2 = v2.split('.')
 
  var len = Math.max(v1.length, v2.length)
 
  while (v1.length < len) {
 
  v1.push('0')
 
  }
 
  while (v2.length < len) {
 
  v2.push('0')
 
  }
 
  for (var i = 0; i < len; i++) {
 
  var num1 = parseInt(v1[i])
 
  var num2 = parseInt(v2[i])
 
  if (num1 > num2) {
 
  return 1
 
  } else if (num1 < num2) {
 
  return -1
 
  }
 
  }
 
  return 0
 
  }
 
  compareVersion('1.11.0', '1.9.9')
 
  // 1
 
  该基础库版本下直接使用对应的API或者组件的API
 
  wx.canIUse(String)判断小程序的API,回调,参数,组件等是否在当前版本可用。此接口从基础库 1.1.1 版本开始支持。
 
  String参数说明: 使用{API}.{method}.{param}.{options}或者{component}.{attribute}.{option}方式来调用,例如:
 
  {API} 代表 API 名字  {method} 代表调用方式,有效值为return, success, object, callback  {param} 代表参数或者返回值  {options} 代表参数的可选值  {component} 代表组件名字  {attribute} 代表组件属性  {option} 代表组件属性的可选值
 
  例子:
 
  wx.canIUse('openBluetoothAdapter')
 
  wx.canIUse('getSystemInfoSync.return.screenWidth')
 
  wx.canIUse('getSystemInfo.success.screenWidth')
 
  wx.canIUse('showToast.object.image')
 
  wx.canIUse('onCompassChange.callback.direction')
 
  wx.canIUse('request.object.method.GET')
 
  wx.canIUse('live-player')
 
  wx.canIUse('text.selectable')
 
  wx.canIUse('button.open-type.contact')
 
  Javascript 标准库兼容性问题
 
  微信小程序的兼容性问题除了微信本身的 Bug 外,大部分是目标平台对 JavaScript 标准库支持程度不同造成的。像我最上面遇到的问题就是Javascript 标准库兼容性问题。对于这类问题我们可以打补丁,从其他地方找到比较完善的js代码,然后我们拷贝到我们的项目中。
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088