context对象介绍

context对象介绍

一、MADP2.0 context对象

MADP2.0框架,给前端页面(用Weex、Vue、Vx写的)提供了一个context对象,用于功能场景间的跳转以及数据传递。

Weex页面里的context对象,其实是客户端原生代码实现的一个Weex扩展插件Module,注册的模块名字为context。

1、Weex源码文件里,在可编写js脚本代码的地方,先做声明引入context模块对象,再使用context对象。

例如:

      //先声明原生扩展Module名字为context的对象
      const context = weex.requireModule('context');
      export default {
         methods: {
              closePage() {
                context.finish();  //调用context对象提供的方法
                     }
          }
      }

2、仓库配置文件(repo.json)配置的某个Weex功能场景的module字段的值一定要配置为weex,表示要走MADP2.0客户端里的页面路由名字为"weex"来打开这个Weex页面。 例如:

"login": {
            "name": "登录",
            "module": "weex",
            "path": "./login/index.weex.js",
            "params": {
                "x-fullscreen": "yes"
            },
            "preferences": {},
            "icon": "icon.png",
            "auth_check": []
        }

采用MADP2.0框架开发的手机客户端App里内嵌的原生控件WebView在加载Web页面时,已经在产品库级别的代码serviceworker层里将context对象注入到Web页面中。编写功能业务的Web开发人员直接使用context对象即可。

Vx页面相当于Web页面。

1、Vx页面源码写js脚本的地方,可直接调用context对象的方法,无需做引入声明。

1)在纯Vx页面的初始化函数里执行的代码流程里(包括在初始化函数里调用的其他函数里使用context),使用context对象时需要放在setTimeout方法里使用。 因为这时候MADP SDK有可能还没把context对象注入到webView容器, 这时候使用这个context对象会报错context is undefined。

2)Vx的.js文件里,在不是初始化函数的地方,例如点击事件触发的方法里,可直接调用context对象的方法,无需做引入声明。

$scope.isLogin=function(){
  if(context.sessionGetString("isLogin")=="true"){
    return "true";
  }else{
     return "false";
  }
}  

2、仓库配置文件(repo.json)配置的某个Vx功能场景的module字段的值一定要配置为web,表示要走MADP2.0客户端里的页面路由名字为"web"来打开这个Vx页面。例如:

"myaccount": {
            "name": "我的账户",
            "module": "web",
            "path": "./vx/index.html#/MyAccount",
            "params": {
                "x-fullscreen": "yes"
            },
            "preferences": {},
            "icon": "icon.png",
            "auth_check": ["sub != '' | login?text=请先登录"]
        }

采用MADP2.0框架开发的手机客户端App里内嵌的原生控件WebView在加载Web页面时,已经在产品库级别的代码serviceworker层里将context对象注入到Web页面中。编写功能业务的Web开发人员直接使用context对象即可。

纯Vue.js框架写的Vue页面相当于Web页面。

1、纯Vue页面源码写js脚本的地方,可直接调用context对象的方法,无需做引入声明。 但是分两种情况,需要注意如下说明。

1)在纯Vue页面的生命周期函数create或mounted里执行的代码流程里(包括在生命周期方法mounted里调用的其他函数里使用context),使用context对象时需要放在setTimeout方法里使用, 因为这时候MADP SDK有可能还没把context对象注入到webView容器, 这时候使用这个context对象会报错context is undefined。

例如:

  mounted(){
        setTimeout(()=>{
            let flag = context.sessionGetString("isIphoneX");
            if(flag=="true"){
                //TODO
            }
        },100)
  }

2)在纯Vue页面已经显示的情况下,例如,用户行为触发的其他方法里,可以直接使用context对象,无需做引入声明。

2、仓库配置文件(repo.json)配置的某个Vue功能场景的module字段的值一定要配置为web,表示要走MADP2.0客户端里的页面路由名字为"web"来打开这个Vue页面。 例如:

"productIntroductions": {
            "name": "产品介绍",
            "module": "web",
            "path": "./vue/index.html#/productIntroductions",
            "params": {
                "x-fullscreen": "yes"
            },
            "preferences": {},
            "icon": "icon.png",
            "auth_check": []
        }