谈谈微信内置浏览器自带的JS API的应用

工作趣谈

背景

开发过微信公众帐号应用的朋友一定对这个Javascript API WeixinApi有所知晓。感谢@zxlie同学的分享。
使用WeixinApi，确实方便了开发人员对微信内置浏览器的WeixinJSBridge API的调用。

问题出现

最近在开发一款微信公众帐号的应用时，遇到一个奇怪的问题，苦思冥想始终不得要领无法解决。直到一次偶然的走查代码时才发现了问题所在，并且是由于自己手贱引发的悲剧！下面就和大家分享一下这个问题，如有遇到类似问题的朋友，可考虑一下是否是同样的原因引起的。

使用WeixinApi调起微信客户端的图片播放组件：
[html]代码示例：

<a href='javascript:void(0);' onclick="onImagePreviewClick()">
<img src='http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46'/>
</a>

[js]代码示例：

function onImagePreviewClick() {
    var protocol = ("https:"==document.location.protocol)?" https:\/\/":" http:\/\/";
    var domain = window.location.host;
    var url = protocol + domain+ "/img/sample.png";
    WeixinApi.ready(function(Api){
        var srcList = [url];
        var curSrc = url;
        Api.imagePreview(curSrc, srcList);
    });
}

奇怪的现象出现了，使用Android（2.3.6）版的微信（5.3.1）时可以正常调起图片播放组件，且图片也可以正常显示；使用IOS(7)版的微信（5.4.0.16）也可以调起图片播放组件，但是图片却一直处于加载中的状态。
这个现象很诡异，我有仔细地翻了一下作者的另外一篇介绍微信内置浏览器的JsAPI(WeixinJSBridge续)的文章，发现其中关于调用图片播放组件的说明中指出【Api.imagePreview的参数是会进行强检测的】，但是翻看源码发现这里的检测是指：if(!curSrc || !srcList || srcList.length == 0),源码如下：

/**
 * 调起微信Native的图片播放组件。
 * 这里必须对参数进行强检测，如果参数不合法，直接会导致微信客户端crash
 *
 * @param {String} curSrc 当前播放的图片地址
 * @param {Array} srcList 图片地址列表
 */
function imagePreview(curSrc,srcList) {
    if(!curSrc || !srcList || srcList.length == 0) {
        return;
    }
    WeixinJSBridge.invoke('imagePreview', {
        'current' : curSrc,
        'urls' : srcList
    });
}

显然不是参数引起的问题，否则的话Android也会出现问题。
最后走查代码时发现自己的js中有这么一句：
var protocol = ("https:"==document.location.protocol)?" https:\/\/":" http:\/\/";
三目运算表达式的红色部分，https和http前面都多了一个半角空格！
去掉空格测试发现一切OK。

总结

Android中微信浏览器内置的Js Api有可能对这种情况进行了处理亦或是微信的图片播放组件内部对这种情况进行了处理。
IOS中则没有对这种情况进行处理。