weex中APP event

2020-08-04 16:47:42 阅读:5 编辑

js/pages/common/publish.js

 bindEvent(){
            const globalEvent = weex.requireModule('globalEvent')
            globalEvent.addEventListener('appDeactive', (options) => {
                var event = weex.requireModule('bmEvents')
                event.emit('w_onAppHide',{});
            })
            globalEvent.addEventListener('appActive', (options) => {
                var event = weex.requireModule('bmEvents')
                event.emit('w_onAppShow',{});
            })
            globalEvent.addEventListener('appError', (options) => {
                var event = weex.requireModule('bmEvents')
                event.emit('w_onError',options);
            })
        },

js/pages/common/wx.js

/************************ app event begin ********************************/
function onAppShow(callback) {
    var event = weex.requireModule('bmEvents')
    event.on('w_onAppShow',function(params){
        return callback(params);
    });
}
function onAppHide(callback) {
    var event = weex.requireModule('bmEvents')
    event.on('w_onAppHide',function(params){
        return callback(params);
    });
}
function offAppShow(callback) {
    var event = weex.requireModule('bmEvents')
    event.off('w_onAppShow',function(params){
        if(callback){
            return callback();
        }

    });
}
function offAppHide(callback) {
    var event = weex.requireModule('bmEvents')
    event.off('onAppHide',function(params){
        if(callback){
            return callback();
        }
    });
}
function onError(callback) {
    var event = weex.requireModule('bmEvents')
    event.on('w_onError',function(params){
        if(callback){
            return callback(params);
        }

    });
}
function offError(callback) {
    var event = weex.requireModule('bmEvents')
    event.off('w_onError',function(params){
        if(callback){
            return callback();
        }
    });
}
function nextTick(callback) {
    Vue.nextTick(callback);
}
function _translateNetworkType(status) {
    var type = "NOT_REACHABLE";
    if (status == "WIFI") {
        type = "wifi";
    } else if (status == "UNKNOWN") {
        type = "unknown";
    } else if (status == "3G/4G") {
        type = "4g";
    } else if (status == "NOT_REACHABLE") {
        type = "none";
    }
    return type;
}
function getNetworkType(obj) {
    const status = tools.networkStatus();
    var type = _translateNetworkType(status);
    if (obj.complete) {
         obj.complete({
            networkType: type
        });
    }
    if (obj.success) {
        return obj.success({
            networkType: type
        });
    }
}

function onNetworkStatusChange(callback) {
    tools.watchNetworkStatus((data) => {
        var type = _translateNetworkType(data);
        if(callback){
            var res = {
                isConnected:type != "none",
                networkType:type
            };
            return callback(res);
        }
    })
}
function offNetworkStatusChange(callback) {
    tools.clearWatchNetworkStatus();
    if(callback){
        return callback();
    }
}
function hideKeyboard(obj) {
    tools.resignKeyboard(function(resData){          // 回调
        if(resData.status == 0){
            if(obj.success){
               return obj.success();
            }
        }else{
            if(obj.fail){
                return obj.fail();
            }
        }
    });
}
/************************ app event  end ********************************/
onAppShow,
    onAppHide,
    offAppShow,
    offAppHide,
    onError,
    offError,
    nextTick,
    getNetworkType,
    onNetworkStatusChange,
    offNetworkStatusChange,
    hideKeyboard,

demo

<template>
  <scroller ref="list">

    <div ref="list2">
      <text style="padding:20px;font-size:50px;">xxyy</text>
      <text style="font-size:50px">{{msg}}</text>
      <div style="background-color: red"  @touchstart="ontouchstart" ref="div">
        <text style="font-size: 50px;">Hello</text>
        <text style="font-size: 50px;">Hello2</text>
      </div>
      <text @click="click" style="padding:20px;font-size:50px;">跳转第二页</text>
      <text @click="offEvent" style="padding:20px;font-size:50px;">offEvent</text>
      <text v-for="(num, index) in arr" class="text">这是第 {{num}} 条数据</text>
    </div>

  </scroller>
</template>
<style scoped>
  .text {
    font-size: 50px;
  }
  .refresh {
    width: 750px;
    position: absolute;
    height: 120px;
    top: 0;
    align-items: center;
  }
  .indicator-text {
    color: #888888;
    font-size: 42px;
    text-align: center;
  }
  .indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: blue;
  }
</style>
<script>
    import wx from './../../common/wx'
    import console from './../../common/console'
    export default {
        data() {
            return {
                arr: [],
                refreshing: false,
                msg:"",
                index:0,
            }
        },
        mixins: [require('./../../common/publish').publish],
        created() {
            var that = this;
            this.getData();
           /* wx.onAppShow(function () {
                that.msg = "appShow"+ that.index;
                that.index = that.index + 1;
            })
            wx.onAppHide(function () {
                that.msg = "appHide" + that.index;
                that.index = that.index + 1;
            })*/
            wx.onError(function (res) {
                that.msg = res;
            })

        },
        computed: {
            page_style: function () {
                var statusBarHeight = weex.config.eros.statusBarHeight ? weex.config.eros.statusBarHeight : 40;
                return {paddingTop: statusBarHeight};
            }
        },
        methods: {
            offEvent(){
              wx.offAppShow2();
            },
            ontouchstart(){
                wx.alert("ontouchstart")
            },
            click() {
                const dom = weex.requireModule('dom');
                const el = this.$refs.list2;
                dom.scrollToElement(el, { offset: 100 })
            },
            getData() {
                this.arr = [];
                var random = Math.random();
                for (let i = 0; i < 30; i++) {
                    this.arr.push(random + i + 1)
                }
            },
            onrefresh() {
                this.refreshing = true;
                setTimeout(() => {
                    this.getData();
                    this.refreshing = false;
                }, 1000)
            }
        }
    }
</script>