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