原生代码和JS交互说明

JavaScript06

原生代码和JS交互说明,第1张

JS调用OC接口WKWebView提供了postMessage的机制来让JS调用OC接口:

bridge.js 在webview加载页面时会自动注入到页面中,JS端可直接调用这里声明的函数

Android端只要调用: webview.addJavascriptInterface(obj, "kf")

方法即可将obj对象中被 @JavascriptInterface 注解的方法提供给JS端调

webview.loadUrl("javascript:" + function + "("" + data + "")")通过此方法可以调用JS中的函数,该函数必须在window对象下。

和iOS端不同的时,Android端仅需要重新声明带回调函数的方法,无返回值的不需要重新声明

jquery.downCount.js是依赖于jQuery的插件(效果:倒计时),所以我们需要查看该插件的源码才能将其变成源生代码。

html代码:

<div class="p1">

    <span class="days"></span><span class="days_ref"></span>

    <span class="hours"></span><span class="hours_ref"></span>

    <span class="minutes"></span><span class="minutes_ref"></span>

    <span class="seconds"></span><span class="seconds_ref"></span>

  </div>

上面span中的class类是用于显示需要的类,在插件中days、hours、minutes、seconds分别用于显示天数、小时、分钟、秒,days_ref、hours_ref、minutes_ref、seconds_ref分别用于显示单位days或day,hours或hour、minutes或minute、seconds或second。这些类都没有定义相应的样式,需要自己自定义样式。

js代码,只是简易的提了出来,如果需要更灵活的配置,自己再做进一步封装:

(function () {

    var container = document.querySelector(".p1")

    var mydate = '1/27/2019 00:00:00', 

        myoffset = 10,

        callback = function () {

          alert("执行完毕")

        }

    /**

     * Change client's local date to match offset timezone

     * @return {Object} Fixed Date object.

     */

    var currentDate = function () {

        // get client's current date

        var date = new Date()

        // turn date to utc

        var utc = date.getTime() + (date.getTimezoneOffset() * 60000)

        // set new Date object

        var new_date = new Date(utc + (3600000*myoffset))

        return new_date

    }

    /**

     * Main downCount function that calculates everything

     */

    function countdown () {

        var target_date = new Date(mydate), // set target date

            current_date = currentDate() // get fixed current date

        // difference of dates

        var difference = target_date - current_date

        // if difference is negative than it's pass the target date

        if (difference < 0) {

            // stop timer

            clearInterval(interval)

            if (callback && typeof callback === 'function') {

              callback()

            }

            return

        }

        // basic math variables

        var _second = 1000,

            _minute = _second * 60,

            _hour = _minute * 60,

            _day = _hour * 24

        // calculate dates

        var days = Math.floor(difference / _day),

            hours = Math.floor((difference % _day) / _hour),

            minutes = Math.floor((difference % _hour) / _minute),

            seconds = Math.floor((difference % _minute) / _second),

            // fix dates so that it will show two digets

            days = (String(days).length >= 2) ? days : '0' + days,

            hours = (String(hours).length >= 2) ? hours : '0' + hours,

            minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes,

            seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds

        // based on the date change the refrence wording

        var ref_days = (days === 1) ? 'day' : 'days',

            ref_hours = (hours === 1) ? 'hour' : 'hours',

            ref_minutes = (minutes === 1) ? 'minute' : 'minutes',

            ref_seconds = (seconds === 1) ? 'second' : 'seconds'

        // set to DOM

        document.querySelector('.days').innerHTML = days

        document.querySelector('.hours').innerHTML = hours

        document.querySelector('.minutes').innerHTML = minutes

        document.querySelector('.seconds').innerHTML = seconds

        document.querySelector('.days_ref').innerHTML = ref_days

        document.querySelector('.hours_ref').innerHTML = ref_hours

        document.querySelector('.minutes_ref').innerHTML = ref_minutes

        document.querySelector('.seconds_ref').innerHTML = ref_seconds

    }

    // start

    var interval = setInterval(countdown, 1000)

})()