微信开发,也就是开发一套在微信浏览器上跑的网页,所以还算是web,但是是限制后的web.会有很多限制,就像阉割了一样,用的时候会很难受.
比如说,window.open(),window.close(),window.opener(),这些页面窗口开关和互相调用传值的就直接被砍掉或是没法用了.
而我的工作,是需要在当前页面调用微信api实现操作,然后返回值,但是当前页面的数据不能丢,当前页面得继续保持活动,这样的话,微信就呵呵了.
且听我微信页面传值的一番苦斗吧.

微信浏览器限制

首先来说明一下自己开发中感觉到的微信浏览器的一下限制.

1. window.opener()不可用.微信浏览器是单页面的.也就是说,你用window.open()打开一个页面后,opener()就已经被关闭了,是没有办法通过window.opener()与之前的页面或窗口进行交互.
2. window.close()不可用,直接使用控制台会输出提示,

   Scripts may close only the windows that were opened by it” (脚本只能关闭它所打开的窗口)

也不能使用形如

1
2

var a=window.open("www.jacean.cn");
a.close();

会提示不能这样用.因为微信是单页面的,之前的opener已经被关闭了,那么也就没谁能关闭这个页面了.
不过,微信实现了关闭当前网页窗口接口

wx.closeWindow();

使用这个接口,微信会关闭网页窗口,但因为是单页面,所以就会直接回到对话界面.也不能让我们开心使用.

1. 微信api不能在iframe中使用.凡是调用微信api的,那么签名认证必须得是在主页面,内嵌iframe是不可以进行签名认证的.
   但是,在主页面认证后,可以通过window.parent.function()或window.top.function()来执行父页面的函数,微信api自然也可以.

所以,在微信浏览器中,能够传值的网页也就是同时存活的网页,就只有iframe和其父页面了.

微信页面传值

上面的坑是我踩过的,看到的人可记得不要再踩了.
然后看我的传值方法吧.

iframe父子互相调用

且看演示如下:

子调父

我这里用的是window.top,如果是一层嵌套那么window.parent足够了,多的话可以用top.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//父
function closemedia(status,result){
            if(status=="ok"){
                if(result instanceof Array)
                {//上传图片
                    alert(result[0]);
                }else
                {//录音和文件上传属于此类
                    alert(result);
                }
            }else if(status=="error"){
                alert("error");
            }else{
                alert("cancel");
            }
            
        }
//子
function cancelVoice() {
            status = "cancel";
            result = "";
            window.top.closemedia();
        }

可以利用这种办法实现结果回传.

父调子

父页面通过contentWindow来调用子页面的内容.

//父
$('#iframeid')[0].contentWindow.stopRecord();

............

//开始录音
function startRecord() {
    c = 0;
    timedCount();
    window.top.wx.startRecord();
    onVoiceRecordEnd();
}

可以看到,子调父,父调子还是很灵活的.

值的中转站

逻辑上被调用的页面把结果写下来,然后关闭,逻辑上的主页面再扫描结果,把值读取到.中间通过唯一的UID来进行标识认领.
其实也相当于是进行post或get再呼叫一次,看需求是什么来用.
这个的不足是可能会造成主页面的当前数据丢失.
这个就不放代码了,大家都是用过的.