iframe中如何使用微信API

搜索本文的其他小伙伴，可能也会搜索类似的关键词，我就先写着，方便遇到相同问题的朋友寻找本文答案：

1、layui弹出层中无法使用微信sdk，但单独抽出页面使用却是正常的；
2、iframe中无法使用微信api
3、iframe 微信 sdk api

ok，上面相当于描述了所有跟本文相关的关键词与搜索问题，接下来出干货。

首先感谢这篇文章，让我找到解决办法，不过是在墙外搜到的，大家如果打不开，也可以看我下面更加详细的答案：

先直接给出造成这个问题的原因：

微信api是不能在iframe中进行签名认证的！

接下来就是解决方法：

把签名认证放到主页A（这里说的主页，即iframe页面所依托的页面），而微信的api放在子页B（即iframe页面），然后我们来看下具体怎么操作。

举栗：

我要调用的是wx.chooseImage()这个api，那么我要把签名认证写在主页A：

**A.html**

<!-- 页面加载时，可以直接签名认证，也可以将下列代码放在其他事件中 -->

<load href="http://code.jquery.com/jquery-2.1.1.min.js" />

<load href="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" />

<script>

// 我的这个页面是php的页面，所以上面使用load标签也可以，当然，你可以使用script标签，一样作用

wx.config({

    debug: false,

    appId: "{{$jsSdkData.appId}}", // 我的后台是php，所以这几个数据他配好插入页面，我并未用ajax请求

    timestamp: "{{$jsSdkData.timestamp}}",

    nonceStr: "{{$jsSdkData.nonceStr}}",

    signature: "{{$jsSdkData.signature}}",

    jsApiList: [

        // 所有要调用的 API 都要加到这个列表中

        'chooseImage',

        'previewImage',

        'uploadImage',

        'downloadImage'

    ]

});

wx.ready(function () {

    wx.checkJsApi({

        jsApiList: [

            'chooseImage',

            'previewImage',

            'uploadImage',

            'downloadImage'

        ]

    });

});

wx.error(function(res){

    alert("微信公众号接口有问题，请联系管理员！");

    wx.closeWindow();

});

</script>

接下来是B页面调用api：

B.html

<load href="/Public/Admin/manager/js/swiper.min.js" />
<script>
var myArr = []; // 存储上传的图片链接
var myNum = 0; // 计算已上传的图片数量

$("#uploadButton").click(function () {
    wxChooseImage();
});
var images = {
    localId: [],
    serverId: []
};
//拍照或从手机相册中选图接口
function wxChooseImage() {
    var countNum = 6 - myNum;

    parent.wx.chooseImage({
        count: countNum, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
            images.localId = res.localIds;
            if (images.localId.length == 0) {
                alert('请先使用 chooseImage 接口选择图片');
                return;
            }
            var i = 0, length = images.localId.length;
            images.serverId = [];
            function upload() {
                //图片上传
                parent.wx.uploadImage({
                    localId: images.localId[i],
                    success: function(res) {
                        i++;
                        $.ajax({
                            url: "/index.php?s=/Weixin/common/showImages",
                            type: "post",
                            async: true,
                            dataType: "html",
                            data: {
                                media_id: res.serverId,
                            },
                            success: function (data) {
                                var  mydata = JSON.parse(data);
                                if(mydata.code == '0001'){
                                    myArr.push(mydata.localData);
                                    console.log(myArr);
                                    $(".imgxians").prepend(`
                                        <input type='hidden' name='${'imag'+myArr.length}' value='${mydata.localData}' />
                                        <img width='30%' height='80' src='${mydata.localData}' onClick='showBigImgModal(this);' class='addImg' />
                                    `);
                                    myNum = $(".imgxians .addImg").length;
                                    $(".imgxians").attr("oil",myNum);
                                }else{
                                    alert('第：' + i + '/' + length+'上传失败');
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert(errorThrown);
                            },
                        });
                        
                        if (i < length) {
                            upload();
                        }
                    },
                    fail: function(res) {
                        //alert(JSON.stringify(res));
                    }
                });
            }
            upload();
        }
    });
}
</script>

代码粘贴进来好像横向范围有点长，如果有需要看得仔细点的，可以复制到sublime，然后右键JS Format一下就ok了（前提是你安装了这个插件）。

到这里就完全实现了在iframe中使用微信API的功能。值得注意的是：

你会发现我在wx.chooseImage()和wx.uploadImage()前面写了一个“parent.”，这个属性的调用对象是window，因此你也可以写为window.parent.xxx，具体什么作用你可以百度。