知识教程 | sendEvent、execScript的应用附源码(下) - 开源技术

上篇说到，通过按钮来触发homepage页面的监听事件和待执行的函数。最后还有一个打开新win的按钮，点击进入下一个页面。

这个新win是干嘛的？一脸懵逼，点击去一看，还是几个按钮。但是你要清楚，这个win和index的win不是一个

win代码：

<!doctype html>

<html>

<head>

</head>

<body>

</a>

</header>

</body>

apiready = function(){

$api.fixStatusBar($api.dom('header'));

api.parseTapmode();

api.openFrame({

name:"newFrame",

url: "./new_frame.html",

rect: {

x:0,

y:$api.dom('header').offsetHeight,

w:"auto",

h:"auto"

});

fnInitEvent();

};

/**

* 修改标题

* @param {Object} title 标题内容

function fnExecScriptTest(title){

$api.text($api.dom(".aui-title"),title);

};

/**

* 返回按钮

function fnBackOff(){

api.closeWin()

};

/**

* 物初始化页面监听

function fnInitEvent(){

/**监听物理返回键 */

api.addEventListener({

}, function(ret, err) {

/**如果popwindow是打开状态*/

if ($api.getStorage('isPopOpen') == '1') {

/**执行popwindow中的关闭方法*/

api.execScript({

frameName: 'popWindow',

script: 'fnClosePop();'

});

}else{

api.closeWin();

};

});

};

</script>

</html>

复制代码

是的，这个页面也有一个待调用的函数，内容是修改标题，还有一个物理返回键监听，为什么监听呢？先卖个关子。请看frame代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="aui-text-center">也放几个按钮吧</div>

<p><div class="aui-btn aui-btn-primary aui-btn-block aui-btn-sm aui-margin-b-10" onclick="fnSendEvent()" tapmode>试试sendEvent</div></p>

<p><div class="aui-btn aui-btn-success aui-btn-block aui-btn-sm aui-margin-b-10" onclick="fnExecScript()" tapmode>试试execScript</div></p>

<p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm aui-margin-b-10" onclick="fnChangeTitle()" tapmode>改一下title</div></p>

<p><div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm aui-margin-b-10" onclick="fnOpenPop()" tapmode>打开一个popWindow</div></p>

</div>

<p>快去首页看执行效果，发送监听消息代码如下：</p>

<p>api.sendEvent({</p>

<p style="text-indent: 2em;">name: 'showCode',</p>

<p style="text-indent: 2em;">extra: {</p>

<p style="text-indent: 4em;">key1: 'value1',</p>

<p style="text-indent: 4em;">key2: 'value2'</p>

</div>

<p>快去首页看执行效果，发送跨页面执行函数代码：</p>

<p>api.execScript({</p>

<p style="text-indent: 2em;">frameName: 'homepage',</p>

<p style="text-indent: 2em;">script: "fnExecScriptTest(1)"</p>

</div>

</body>

/**

* api初始化

apiready = function(){

api.parseTapmode();

};

/**

* 发送监听消息

function fnSendEvent(){

$api.removeCls($api.dom("#sendEnvet-code"),"aui-hide");

api.sendEvent({

extra: {

key1: 'value1',

key2: 'value2'

}

});

};

/**

* 跨页面执行函数

function fnExecScript(){

$api.removeCls($api.dom("#execScript-code"),"aui-hide");

api.execScript({

name:'root',

frameName: 'homepage',

script: "fnExecScriptTest(1)"

});

};

function fnChangeTitle(){

var dialog = new auiDialog();

dialog.alert({

title:"改个啥好呢？",

buttons:['取消','确定'],

input:true

},function(ret){

if(ret.buttonIndex ==2 && ret.text!=""){

api.execScript({

script: "fnExecScriptTest('"+ret.text+"')"

});

};

});

};

/**

* 打开pop窗口

function fnOpenPop(){

$api.setStorage("isPopOpen",'1');

api.openFrame({

url: './popWindow.html',

rect: {

x: 0,

y: 0,

w: 'auto',

h: 'auto'

pageParam: {

frameName:api.frameName

}

});

};

/**

* 选择的回调

* @param {Object} data

function fnChooseCallback(data){

api.toast({

msg: '你点击了第'+data.index+'个按钮,数据为:'+JSON.stringify(data.data)

});

};

</script>

</html>

第三个按钮，修改title，title是在当前win里边的dom元素，所以跨页面执行win里边的修改title方法，并且把要修改的title用参数传过去。

但是这第四个按钮是来搞笑的吗？

是的，正如您看到的，点击第四个按钮，出来一个弹窗，动画效果有点屎。。。但不影响讲解

打开这个弹窗的时候，我设置了一个$api.setStorage("isPopOpen",'1');这个是我后来用作判断是否打开pop页面的。

这就是那个弹窗页面。点击空白处，和点击按钮都会退出这个页面，不同的是点击按钮会带着参数走，这次的参数不是string，是个json字符串。

代码：

<!DOCTYPE html>

<html>

<head>

<title>Pop Window</title>

<style>

html,body{background: rgba(0,0,0,0);width: 100%;height: 100%;}

.pop-fail{width: 100%;height: 100%;background: rgba(0,0,0,.6);}

.pop-content{position: fixed;width: 100%;left:100%;background: #FFFFFF;}

.pop-content.show{left: 0;transition: left 0.5s;}

.pop-content.hide{left: -100%;transition: left 0.2s;}

</style>

</head>

<body>

</div>

</body>

var vm;

/**

* api初始化

apiready = function(){

/**vue初始化*/

vm = new Vue({

el:'.pop-content',

data:{

data:[]

}

});

fnInitData();

};

/**

* 初始化页面数据

function fnInitData(){

var data = [{name:'按钮1'},{name:'按钮2'},{name:'按钮3'},{name:'按钮4'}];

fnInitView(data);

};

/**

* 初始化页面布局

* @param {Object} data

function fnInitView(data){

vm.data = data;

vm.$nextTick(function(){

var fail = $api.dom(".pop-fail");

var content = $api.dom(".pop-content");

var top = fail.offsetHeight/2 - content.offsetHeight/2;

content.style.top = top+'px';

$api.addCls($api.dom(".pop-content"),'show');

api.parseTapmode();

});

};

/**

* 点击某一个按钮

* @param {Object} dom

function fnClick(dom){

var index = $api.attr(dom,"data-tag");

var data = vm.data[index-1];

var newJson = {index:index,data:data};

$api.addCls($api.dom(".pop-content"),'hide');

setTimeout(function(){

api.execScript({

frameName:api.pageParam.frameName,

script: 'fnChooseCallback('+JSON.stringify(newJson)+')'

});

$api.setStorage("isPopOpen",'0');

api.closeFrame();

},200);

};

/**

* 关闭页面

function fnClosePop(){

$api.addCls($api.dom(".pop-content"),'hide');

$api.setStorage("isPopOpen",'0');

setTimeout(function(){

api.closeFrame();

},200);

};

</script>

</html>

点击按钮会退出，并且执行另一个frame里的api.toast。

你会不会疑问，点击物理返回键会怎样？

通常会closeWin也就是pop和上一个frame统统say goodbye。但是记不记得我在win里有一段返回键监听？

是的，根据$api.getStorage('isPopOpen');选择直接closeWin（）还是执行css动画再退出

本文转载自APICloud官方论坛，感谢“杨愿”的分享！

网站首页 > 开源技术正文

知识教程 | sendEvent、execScript的应用附源码(下)

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 开源技术 正文

知识教程 | sendEvent、execScript的应用附源码(下)

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 开源技术正文

取消回复欢迎你发表评论: