搜索本文的其他小伙伴，可能也会搜索类似的关键词，我就先写着，方便遇到相同问题的朋友寻找本文答案：
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，具体什么作用你可以百度。
网友评论