模拟微信小程序页面Page方法

1、依赖

a、jQuery

b、angularjs

2、page.js文件

var Page = function (options) {
    var myApp = angular.module('myApp', []);
    myApp.controller('myCtrl', function ($scope) {
        $scope.setData = function (obj) {
            for (let key in obj) {
                var contains = false;
                for (var i = 0; i < $scope.$$watchers.length; i++) {
                    if ($scope.$$watchers[i].exp == key) {
                        contains = true;
                        break;
                    }
                }
                if (!contains) {
                    $scope.$watch(key, function (newValue) {
                        options.data[key] = newValue;
                    }, true)
                }
                eval("$scope." + key + "=obj[key]");
            }
            $scope.$applyAsync();
        }
    });
    const {
        onLoad,
        onReady,
        onPullDownRefresh,
        onReachBottom,
        onPageScroll
    } = options;
    options.onLoad = function (obj) {
        options.setData(this.data);
        onLoad && onLoad.call(this, obj)
    }
    options.onReady = function (opts) {
        onReady && onReady.call(this, opts)
    }
    options.onPullDownRefresh = function (opts) {
        onPullDownRefresh && onPullDownRefresh.call(this, opts)
    }
    options.stopPullDownRefresh = function () {
        clearTimeout(__navAnimateGoTopTimeout);
        $("#TheStatusRefresh").stop().animate({ top: "-40px" }, "fast", function () {
            __navAnimatelock = false;
            $("#TheStatusRefresh img").removeClass("route");
        });
    }
    options.onReachBottom = function (opts) {
        onReachBottom && onReachBottom.call(this, opts)
    }
    options.onPageScroll = function (opts) {
        onPageScroll && onPageScroll.call(this, opts)
    }
    options.setData = function (obj) {
        for (let key in obj) {
            eval("options.data." + key + "=obj[key]");
        }
        var appElement = document.querySelector("[ng-controller=myCtrl]");
        var $scope = angular.element(appElement).scope();
        var fun = $scope.$eval("setData");
        fun(obj);
    };

    var __disY, __startY, __endY;
    var __navAnimatelock = false;
    var __navAnimateGoTopTimeout;
    var GetParamsToJson = function () {
        var obj = {};
        var url = $(location).attr('href');
        if (url.indexOf("?") == -1) {
            return {};
        }
        var arr = decodeURI(url).split("?")[1].split("&")
        for (var i = 0; i < arr.length; i++) {
            obj[arr[i].split("=")[0]] = unescape(arr[i].split("=")[1]);
        }
        return obj;
    }

    window.onload = function () {
        var opts = GetParamsToJson();
        options.onReady(opts);
    }
    $(document).ready(function () {
        var opts = GetParamsToJson();
        options.onLoad(opts);
        $("body").on("click", "[click]", function () {
            var func = $(this).attr("click");
            if (options.hasOwnProperty(func)) {
                options[func](this);
            }
        });
    });
    $(window).scroll(function (e) {
        var scrollTop = $(this).scrollTop();
        var viewH = $(this).height();
        var contentH = $(document).height();
        if (contentH - viewH - scrollTop <= 1) {
            options.onReachBottom();
        }
        options.onPageScroll({ scrollTop: scrollTop });
    });

    if (onPullDownRefresh) {
        $(document).on('touchstart', function (e) {
            if (__navAnimatelock) {
                return;
            }
            var scrollTop = $(this).scrollTop();
            __startY = e.originalEvent.changedTouches[0].pageY - scrollTop;
        });
        $(document).on('touchmove', function (e) {
            if (__navAnimatelock) {
                return;
            }
            var scrollTop = $(this).scrollTop();
            __endY = e.originalEvent.changedTouches[0].pageY;
            __disY = __endY - __startY - scrollTop;
            if (scrollTop > 0) {
                return;
            }
            $("body").addClass("StaticBody");
            if (__disY > -40 && __disY < 140) {
                $('#TheStatusRefresh').css({
                    top: -40 + __disY + 'px',
                });
            }
            else if (__disY >= 140) {
                $('#TheStatusRefresh').css({
                    top: 140 - 40 + 'px',
                });
            }
            else {
                $('#TheStatusRefresh').css({
                    top: -40 + 'px',
                });
            }
        });
        $(document).on('touchend', function (e) {
            if (__navAnimatelock) {
                return;
            }
            $("body").removeClass("StaticBody");
            var scrollTop = $(this).scrollTop();
            __endY = e.originalEvent.changedTouches[0].pageY;
            __disY = __endY - __startY - scrollTop;
            if (scrollTop > 0) {
                return;
            }
            if (__disY >= 70) {
                __navAnimatelock = true;
                $("#TheStatusRefresh").stop().animate({ top: "40px" }, "fast", function () {
                    __navAnimatelock = true;
                    $("#TheStatusRefresh img").addClass("route");
                    options.onPullDownRefresh();
                    __navAnimateGoTopTimeout = setTimeout(function () {
                        options.stopPullDownRefresh();
                    }, 3000);
                });
            }
            else {
                __navAnimatelock = true;
                options.stopPullDownRefresh();
            }
        });
    }
}

a：onPullDownRefresh

有个下拉动画

 3、页面

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <link href="page.css" rel="stylesheet" />
</head>
<body ng-controller="myCtrl" ng-app="myApp">
    <div style="100px;height:2000px;" >
        <p ng-bind="name" click="test" style="height:100px;100px;background-color:pink"></p>
    </div>
    <script src="jquery.js"></script>
    <script src="angular.js"></script>
    <script src="page.js"></script>
</body>
</html>

4、使用

Page({
            data: {
                name: '张三',
                age: 1
            },
            onLoad: function (options) {
                console.log("onLoad", options)
                this.myFun1();
            },
            onReady: function () {
                this.setData({
                    age: 222
                });
                console.log("onReady")
            },
            onReachBottom: function () {
                console.log("onReachBottom")
            },
            myFun1: function () {
                console.log('myFun1')
            },
            test: function (e) {
                this.stopPullDownRefresh();
            },
            onPullDownRefresh: function () {
                console.log(123)
            }
        })

a：绑定事件使用 click="方法名"，其他事件可自行扩展

b：设置属性也跟微信一致，使用setData，直接给this.data.list赋值无效

c：onload方法的参数为当前页面地址栏参数转成的对象

5、用到的css

[click] {
            cursor: pointer;
        }

        .StaticBody {
            position: absolute;
            overflow: hidden;
        }

        #TheStatusRefresh {
            height: 40px;
            width: 40px;
            background: white;
            position: fixed;
            top: -40px;
            border-radius: 100%;
            left: calc(50% - 20px);
            border: 1px solid #efefef;
            padding: 9px;
        }

            #TheStatusRefresh img {
                width: 20px;
                height: 20px;
            }

                #TheStatusRefresh img.route {
                    -webkit-transition-property: -webkit-transform;
                    -webkit-transition-duration: 0.8s;
                    -moz-transition-property: -moz-transform;
                    -moz-transition-duration: 0.8s;
                    -webkit-animation: refresh_rotate 0.8s linear infinite;
                    -moz-animation: refresh_rotate 0.8s linear infinite;
                    -o-animation: refresh_rotate 0.8s linear infinite;
                    animation: refresh_rotate 0.8s linear infinite;
                }

        @@-webkit-keyframes refresh_rotate {
            from {
                -webkit-transform: rotate(0deg)
            }

            to {
                -webkit-transform: rotate(360deg)
            }
        }

        @@-moz-keyframes refresh_rotate {
            from {
                -moz-transform: rotate(0deg)
            }

            to {
                -moz-transform: rotate(359deg)
            }
        }

        @@-o-keyframes refresh_rotate {
            from {
                -o-transform: rotate(0deg)
            }

            to {
                -o-transform: rotate(359deg)
            }
        }

        @@keyframes refresh_rotate {
            from {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(359deg)
            }
        }

 仅此记录一下