用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-3-27 00:43:02 天下雪原创达人 造轮子 人生巅峰 楼主 04568
微信小程序中,遇到的最坑爹的一件事情就是:就是不知道是哪个函数有问题。。。然后就是找不出问题所在,尤其是在使用了es6的时候,在ios和安卓上都可能出问题,所以我就节选两篇文章中的内容作为一个辅助参考:

由于我个人对此了解极少,假如你对这方面有较多研究或者有实际的踩坑经验,欢迎分享出来,以便给更多人参考啊!

官方提示:
微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具。
三端的脚本执行环境聚以及用于渲染非原生组件的环境是各不相同的:
  • 在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10
  • 在 Android 上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由 X5 基于 Mobile Chrome 37 内核来渲染的
  • 在 开发工具上, 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的
尽管三端的环境是十分相似的,但是还是有些许区别:
  • ES6 语法支持不一致 语法上开发者可以通过开启 ES6 转 ES5 的功能来规避。
  • ES6 API 支持不一致 考虑到代码包大小的限制,API 上目前需要开发者自行引入相关的类库来进行处理,可以通过 caniuse 或者 X5兼容 查询到相关 API 的支持情况


开发者工具内相关功能:
项目--es6转es5:仅仅是语法转换,有些API不支持,比如Promise,具体请参考以下的ES6支持度说明;
QQ截图20170327004556.jpg


一:Javascript 标准库兼容性问题
节选自:微信小程序兼容性问题
微信小程序的兼容性问题除了微信本身的 Bug 外,大部分是目标平台对 JavaScript 标准库支持程度不同造成的。
微信本身的 Bug 引起的
微信本身的 Bug 引发的兼容性问题有个现成的例子,就是 wx.request() 返回的状态码 res.statusCode 的值在 iOS 下是 int 型数据,而在 Android 6.0.1 上却是 String 型数据。如果你判断服务器的返回状态码方法不当,可能就踩到坑里了。
[AppleScript] 纯文本查看 复制代码
wx.request({
    url: 'http://api.example.com',
    success: function (res) {
        if (res.statusCode === 200) {
            // success
        } else {
            // server failure
        }
    }
})
上述代码就踩坑了,正确的做法是使用 == 而不是使用 === 来判断。另外一个更规范的方法是使用 parseInt(res.statusCode) === 200 来实现。
Javascript 标准库兼容性问题
比如 Array.find() 方法在 iOS 10.2/Android 7.0 上完美支持,但在 Android 6.0.1 上却不支持。如果代码里用到了这个接口,就会导致在 Android 6.0.1 上无法正常工作。通过对比发现,这类接口不支持的个数还是比较多的。特别是 Android 平台版本众多,兼容性问题就更严重,可能一不小小心就掉到坑里。
解决方法
微信本身 Bug 只能绕过去,但对 JavaScript 引擎的兼容性,可以有更优雅的解决方法。比如,我们可以打补丁,使用 polyfill 来实现这些不支持的标准库方法。比如,修复 Android 6.0.1 平台不支持 String.startsWith() 的问题,可以使用下面的 polyfill 代码:
[AppleScript] 纯文本查看 复制代码
if (!String.prototype.startsWith) {
    console.warn('define polyfill for Array.prototype.startsWith');
    String.prototype.startsWith = function (searchString, position) {
      position = position || 0;
      return this.substr(position, searchString.length) === searchString;
  };
}
推而广之,我们可以把平台不支持的标准库方法,使用 polyfill 实现。这就是 minapp-polyfill 这个项目的目的。
使用方法很简单,把 minapp-polyfill 项目里的 polyfill.js 拷贝到小程序源码目录下,在需要打补丁的 JavaScript 源文件头部引入如下代码即可:
[AppleScript] 纯文本查看 复制代码
import 'path/to/polyfill.js'
目前这个项目只是搭了个骨架,还有很多方法需要实现。PRs is welcome。
各个平台对 JavaScript 标准库支持情况
条件限制,这里统计了四个平台对 JavaScript 标准库的支持情况,分别是 iOS 10.2, Android 6.0.1, Android 7.0, 微信开发者工具,具体数据如下:
Component.apiName
iOS 10.2
Android 6.0.1
Android 7.0
devtool
Array.toString
YES
YES
YES
YES
Array.values
YES
N/A
YES
N/A
Array.toLocaleString
YES
YES
YES
YES
Array.concat
YES
YES
YES
YES
Array.fill
YES
N/A
YES
YES
Array.join
YES
YES
YES
YES
Array.pop
YES
YES
YES
YES
Array.push
YES
YES
YES
YES
Array.reverse
YES
YES
YES
YES
Array.shift
YES
YES
YES
YES
Array.slice
YES
YES
YES
YES
Array.sort
YES
YES
YES
YES
Array.splice
YES
YES
YES
YES
Array.unshift
YES
YES
YES
YES
Array.every
YES
YES
YES
YES
Array.forEach
YES
YES
YES
YES
Array.some
YES
YES
YES
YES
Array.indexOf
YES
YES
YES
YES
Array.lastIndexOf
YES
YES
YES
YES
Array.filter
YES
YES
YES
YES
Array.reduce
YES
YES
YES
YES
Array.reduceRight
YES
YES
YES
YES
Array.map
YES
YES
YES
YES
Array.entries
YES
N/A
YES
YES
Array.keys
YES
N/A
YES
YES
Array.find
YES
N/A
YES
YES
Array.findIndex
YES
N/A
YES
YES
Array.includes
YES
N/A
N/A
YES
Array.copyWithin
YES
N/A
YES
YES
Array.constructor
YES
YES
YES
YES
Buffer
N/A
N/A
N/A
N/A
DataView.getInt8
YES
YES
YES
YES
DataView.getUint8
YES
YES
YES
YES
DataView.getInt16
YES
YES
YES
YES
DataView.getUint16
YES
YES
YES
YES
DataView.getInt32
YES
YES
YES
YES
DataView.getUint32
YES
YES
YES
YES
DataView.getFloat32
YES
YES
YES
YES
DataView.getFloat64
YES
YES
YES
YES
DataView.setInt8
YES
YES
YES
YES
DataView.setUint8
YES
YES
YES
YES
DataView.setInt16
YES
YES
YES
YES
DataView.setUint16
YES
YES
YES
YES
DataView.setInt32
YES
YES
YES
YES
DataView.setUint32
YES
YES
YES
YES
DataView.setFloat32
YES
YES
YES
YES
DataView.setFloat64
YES
YES
YES
YES
DataView.constructor
YES
YES
YES
YES
Date.toString
YES
YES
YES
YES
Date.toISOString
YES
YES
YES
YES
Date.toDateString
YES
YES
YES
YES
Date.toTimeString
YES
YES
YES
YES
Date.toLocaleString
YES
YES
YES
YES
Date.toLocaleDateString
YES
YES
YES
YES
Date.toLocaleTimeString
YES
YES
YES
YES
Date.valueOf
YES
YES
YES
YES
Date.getTime
YES
YES
YES
YES
Date.getFullYear
YES
YES
YES
YES
Date.getUTCFullYear
YES
YES
YES
YES
Date.getMonth
YES
YES
YES
YES
Date.getUTCMonth
YES
YES
YES
YES
Date.getDate
YES
YES
YES
YES
Date.getUTCDate
YES
YES
YES
YES
Date.getDay
YES
YES
YES
YES
Date.getUTCDay
YES
YES
YES
YES
Date.getHours
YES
YES
YES
YES
Date.getUTCHours
YES
YES
YES
YES
Date.getMinutes
YES
YES
YES
YES
Date.getUTCMinutes
YES
YES
YES
YES
Date.getSeconds
YES
YES
YES
YES
Date.getUTCSeconds
YES
YES
YES
YES
Date.getMilliseconds
YES
YES
YES
YES
Date.getUTCMilliseconds
YES
YES
YES
YES
Date.getTimezoneOffset
YES
YES
YES
YES
Date.setTime
YES
YES
YES
YES
Date.setMilliseconds
YES
YES
YES
YES
Date.setUTCMilliseconds
YES
YES
YES
YES
Date.setSeconds
YES
YES
YES
YES
Date.setUTCSeconds
YES
YES
YES
YES
Date.setMinutes
YES
YES
YES
YES
Date.setUTCMinutes
YES
YES
YES
YES
Date.setHours
YES
YES
YES
YES
Date.setUTCHours
YES
YES
YES
YES
Date.setDate
YES
YES
YES
YES
Date.setUTCDate
YES
YES
YES
YES
Date.setMonth
YES
YES
YES
YES
Date.setUTCMonth
YES
YES
YES
YES
Date.setFullYear
YES
YES
YES
YES
Date.setUTCFullYear
YES
YES
YES
YES
Date.setYear
YES
YES
YES
YES
Date.getYear
YES
YES
YES
YES
Date.toJSON
YES
YES
YES
YES
Date.toUTCString
YES
YES
YES
YES
Date.toGMTString
YES
YES
YES
YES
Date.constructor
YES
YES
YES
YES
Error.toString
YES
YES
YES
YES
Error.constructor
YES
YES
YES
YES
Float32Array.constructor
YES
YES
YES
YES
Float64Array.constructor
YES
YES
YES
YES
Function.constructor
YES
YES
YES
YES
Int16Array.constructor
YES
YES
YES
YES
Int32Array.constructor
YES
YES
YES
YES
Int8Array.constructor
YES
YES
YES
YES
Map.forEach
YES
N/A
YES
YES
Map.clear
YES
N/A
YES
YES
Map.delete
YES
N/A
YES
YES
Map.get
YES
N/A
YES
YES
Map.has
YES
N/A
YES
YES
Map.set
YES
N/A
YES
YES
Map.keys
YES
N/A
YES
YES
Map.values
YES
N/A
YES
YES
Map.entries
YES
N/A
YES
YES
Map.constructor
YES
N/A
YES
YES
Math.abs
YES
YES
YES
YES
Math.acos
YES
YES
YES
YES
Math.asin
YES
YES
YES
YES
Math.atan
YES
YES
YES
YES
Math.acosh
YES
N/A
YES
YES
Math.asinh
YES
N/A
YES
YES
Math.atanh
YES
N/A
YES
YES
Math.atan2
YES
YES
YES
YES
Math.cbrt
YES
N/A
YES
YES
Math.ceil
YES
YES
YES
YES
Math.clz32
YES
N/A
YES
YES
Math.cos
YES
YES
YES
YES
Math.cosh
YES
N/A
YES
YES
Math.exp
YES
YES
YES
YES
Math.expm1
YES
N/A
YES
YES
Math.floor
YES
YES
YES
YES
Math.fround
YES
N/A
YES
YES
Math.hypot
YES
N/A
YES
YES
Math.log
YES
YES
YES
YES
Math.log10
YES
N/A
YES
YES
Math.log1p
YES
N/A
YES
YES
Math.log2
YES
N/A
YES
YES
Math.max
YES
YES
YES
YES
Math.min
YES
YES
YES
YES
Math.pow
YES
YES
YES
YES
Math.random
YES
YES
YES
YES
Math.round
YES
YES
YES
YES
Math.sign
YES
N/A
YES
YES
Math.sin
YES
YES
YES
YES
Math.sinh
YES
N/A
YES
YES
Math.sqrt
YES
YES
YES
YES
Math.tan
YES
YES
YES
YES
Math.tanh
YES
N/A
YES
YES
Math.trunc
YES
N/A
YES
YES
Math.imul
YES
YES
YES
YES
Object.toString
YES
YES
YES
YES
Object.toLocaleString
YES
YES
YES
YES
Object.valueOf
YES
YES
YES
YES
Object.hasOwnProperty
YES
YES
YES
YES
Object.propertyIsEnumerable
YES
YES
YES
YES
Object.isPrototypeOf
YES
YES
YES
YES
Object._defineGetter_
YES
YES
YES
YES
Object._defineSetter_
YES
YES
YES
YES
Object._lookupGetter_
YES
YES
YES
YES
Object._lookupSetter_
YES
YES
YES
YES
Object.constructor
YES
YES
YES
YES
Promise.then
YES
YES
YES
YES
Promise.catch
YES
YES
YES
YES
Promise.constructor
YES
YES
YES
YES
RegExp.compile
YES
YES
YES
YES
RegExp.exec
YES
YES
YES
YES
RegExp.toString
YES
YES
YES
YES
RegExp.test
YES
YES
YES
YES
RegExp.constructor
YES
YES
YES
YES
Set.forEach
YES
N/A
YES
YES
Set.add
YES
N/A
YES
YES
Set.clear
YES
N/A
YES
YES
Set.delete
YES
N/A
YES
YES
Set.has
YES
N/A
YES
YES
Set.entries
YES
N/A
YES
YES
Set.values
YES
N/A
YES
YES
Set.keys
YES
N/A
YES
YES
Set.constructor
YES
N/A
YES
YES
String.match
YES
YES
YES
YES
String.padStart
YES
N/A
N/A
N/A
String.padEnd
YES
N/A
N/A
N/A
String.repeat
YES
N/A
YES
YES
String.replace
YES
YES
YES
YES
String.search
YES
YES
YES
YES
String.split
YES
YES
YES
YES
String.toString
YES
YES
YES
YES
String.valueOf
YES
YES
YES
YES
String.charAt
YES
YES
YES
YES
String.charCodeAt
YES
YES
YES
YES
String.codePointAt
YES
N/A
YES
YES
String.concat
YES
YES
YES
YES
String.indexOf
YES
YES
YES
YES
String.lastIndexOf
YES
YES
YES
YES
String.slice
YES
YES
YES
YES
String.substr
YES
YES
YES
YES
String.substring
YES
YES
YES
YES
String.toLowerCase
YES
YES
YES
YES
String.toUpperCase
YES
YES
YES
YES
String.localeCompare
YES
YES
YES
YES
String.toLocaleLowerCase
YES
YES
YES
YES
String.toLocaleUpperCase
YES
YES
YES
YES
String.big
YES
YES
YES
YES
String.small
YES
YES
YES
YES
String.blink
YES
YES
YES
YES
String.bold
YES
YES
YES
YES
String.fixed
YES
YES
YES
YES
String.italics
YES
YES
YES
YES
String.strike
YES
YES
YES
YES
String.sub
YES
YES
YES
YES
String.sup
YES
YES
YES
YES
String.fontcolor
YES
YES
YES
YES
String.fontsize
YES
YES
YES
YES
String.anchor
YES
YES
YES
YES
String.link
YES
YES
YES
YES
String.trim
YES
YES
YES
YES
String.trimLeft
YES
YES
YES
YES
String.trimRight
YES
YES
YES
YES
String.startsWith
YES
N/A
YES
YES
String.endsWith
YES
N/A
YES
YES
String.includes
YES
N/A
YES
YES
String.normalize
YES
YES
YES
YES
String.constructor
YES
YES
YES
YES
Symbol.toString
YES
N/A
YES
YES
Symbol.valueOf
YES
N/A
N/A
YES
Symbol.constructor
YES
N/A
YES
YES
TypeError.toString
YES
N/A
N/A
YES
TypeError.constructor
YES
YES
YES
YES
Uint16Array.constructor
YES
YES
YES
YES
Uint32Array.constructor
YES
YES
YES
YES
Uint8Array.constructor
YES
YES
YES
YES
Uint8ClampedArray.constructor
YES
YES
YES
YES
WeakMap.delete
YES
YES
YES
YES
WeakMap.get
YES
YES
YES
YES
WeakMap.has
YES
YES
YES
YES
WeakMap.set
YES
YES
YES
YES
WeakMap.constructor
YES
YES
YES
YES
N/A 表示这个标准库方法在平台上不支持

二:安卓及IOS特定问题:
请参考相应跳坑指南:
跳坑《一百四十四》ios苹果真机相关问题
跳坑《一百四十》Android安卓真机相关问题
或在官方FAQ内进行搜索:官方FAQ地址


三:ES6支持度说明:官方地址
ES6 APi 支持情况
微信小程序已经支持了绝大部分的 ES6 API 具体表格如下:
  • tip: TBS 3.0 是指微信小程序 Android 运行环境
  • tip: Array.values 不支持
  • tip: Proxy 不支持

StringiOS8iOS9iOS10TBS3.0
codePointAt
normalize
includes
startsWith
endsWith
repeat
String.fromCodePoint

ArrayiOS8iOS9iOS10TBS3.0
copyWithin
find
findIndex
fill
entries
keys
values
includes
Array.from
Array.of

NumberiOS8iOS9iOS10TBS3.0
isFinite
isNaN
parseInt
parseFloat
isInteger
EPSILON
isSafeInteger

MathiOS8iOS9iOS10TBS3.0
trunc
sign
cbrt
clz32
imul
fround
hypot
expm1
log1p
log10
log2
sinh
cosh
tanh
asinh
acosh
atanh
[td]
ObjectiOS8iOS9iOS10TBS3.0
is
assign
getOwnPropertyDescriptor
keys
getOwnPropertyNames
getOwnPropertySymbols


OtheriOS8iOS9iOS10TBS3.0
Symbol
Set
Map
Proxy
Reflect
Promise

四:引入Promise问题:
微信小程序填坑-Android真机环境下的bluebird.js



有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
发新帖
您需要登录后才可以回帖 登录 | 立即注册