线上示例

使用发布

使用期间有任何疑问,或者问题反馈,RTX联系erikqin或者warrenyang,QQ咨询请联系757995271(秦睦迪)或499045849(杨岱宗)

配合Axure使用

提供Axure配套WAU插件,让开发流程更快捷~ 点击下载WAU插件

2.0.4版本以后的Loader使用方式

Loader模式和生命周期

在dev2.0.4版本中,加入了loader模式和生命周期的概念。

  • 目前最新version: '2.1.0.180824'
  • loader模式是通过loader进行版本控制和文件加载,优化了之前的四个关键文件替换的繁琐操作,目前只需要在页面引入 //mat1.gtimg.com/auto/2018/wau/wau-common/loader/20181008/index.js即可,配置在下文会详细讲解
  • 生命周期目前加入了wau渲染前before和完成渲染后after两个生命周期,支持在这两个生命周期中引入css和js文件,执行顺序即引入顺序。

    生命周期引入后,支持在before引入vue组件进行混合模式开发,具体见vue混合模式开发

1、loader模式的配置和使用

loader在页面中的基础配置如下所示

<-- no-skin必须引入 -->
<body class="no-skin">
    <!-- 渲染区域,必须按照本代码编写。 -->
    <div id="app">
        <app :data=data></app>
    </div>
    <!-- loading效果代码,如不需要可以不写,或者替换成自己的loading效果亦可。 -->
    <div id="preloading" class="csshub-page">
        <div class="csshub-page">
            <div class="csshub-circle-loader">
                <div class="csshub-circle-line">
                    <div class="csshub-circle csshub-circle-blue"></div>
                    <div class="csshub-circle csshub-circle-blue"></div>
                    <div class="csshub-circle csshub-circle-blue"></div>
                </div>
                <div class=csshub-circle-line>
                    <div class="csshub-circle csshub-circle-yellow"></div>
                    <div class="csshub-circle csshub-circle-yellow"></div>
                    <div class="csshub-circle csshub-circle-yellow"></div>
                </div>
                <div class=csshub-circle-line>
                    <div class="csshub-circle csshub-circle-red"></div>
                    <div class="csshub-circle csshub-circle-red"></div>
                    <div class="csshub-circle csshub-circle-red"></div>
                </div>
                <div class=csshub-circle-line>
                    <div class="csshub-circle csshub-circle-green"></div>
                    <div class="csshub-circle csshub-circle-green"></div>
                    <div class="csshub-circle csshub-circle-green"></div>
                </div>
            </div>
        </div>
        <div class="csshub-bg"></div>
    </div>
    <script>
        //暴露全局对象,WAU用以渲染需要的配置和数据模型
        var wau = '{%后端输出的json%}';
        window.wauLoaderConfig = {
          mode: 'json', //该配置会读取wau-json
          version: '2.1.0.180824' //wau版本号
        };
    </script>

    <!-- 在body后引入loader.js,用来加载wau必须的资源文件 -->
    <script type="text/javascript" src="//mat1.gtimg.com/auto/2018/wau/wau-common/loader/20181008/index.js"></script>
</body>

2、生命周期说明

生命周期示意图

生命周期目前分为beforeafter,使用方式如下

wau_lifecycle:
  before:
    css:
      - '/static/plugin/test/life1.css'
    js:
      - '/static/plugin/test/life1.js'
  after:
    css:
      - '/static/plugin/test/life2.css'
    js:
      - '/static/plugin/test/life2.js'

2.0.4版本之前的使用方式

此处是2.0.4以前的版本使用方式,如果您是最新的项目,请参考上方的loader加载方式来使用

2018.1.15更新

新增本地开发模式 【点击获取开发包】

开发包下wau是所有引入的资源路径,根据index.html文件的配置方式进行配置,index.html可直接点开使用

资源获取

由于开源方案还在筹划中,所以目前大家只是使用线上版本。 功能依赖库,随着使用版本不同引用的文件版本也不同,如下使用为1.9版本的sdk。

<!-- 在头部引入 -->
<link href="http://mat1.gtimg.com/auto/wau/wii2-wau/release/app_2.0.2.180126_beta.css" rel="stylesheet">

<!-- 在尾部引入 -->
<script src="http://mat1.gtimg.com/auto/wau/wii2-wau/release/manifest_2.0.2.180126_beta.js"></script>
<script src="http://mat1.gtimg.com/auto/wau/wii2-wau/release/vendor_2.0.2.180126_beta.js"></script>
<script src="http://mat1.gtimg.com/auto/wau/wii2-wau/release/app_2.0.2.180126_beta.js"></script>

如何集成

  • WAU是一个前端的自动化管理系统,所以不依赖与任何的后端语言,任何后端语言都可以用自己的方式进行集成。
  • 最好提取母版页(布局页),其它页面继承母版页进行管理。不要每个页面都如此引入。
  • 首先在页面的头部引入如下代码:
<!-- 如果不使用任何字体可以不引入 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 如果自己的CDN可以跨域也可以引入自己的 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- WAU核心样式库 -->
<link rel="stylesheet" type="text/css" href="http://mat1.gtimg.com/auto/2017/wau/wau-common/waubase.min.css">
<link rel="stylesheet" type="text/css" href="http://mat1.gtimg.com/auto/2017/wau/wau-common/css/acev1.min.css">
<link rel="stylesheet" href="http://mat1.gtimg.com/auto/2017/wau/wau-common/css/base.css">
<!-- 注意使用的版本号 -->
<link href="http://mat1.gtimg.com/auto/wau/wii2-wau/release/app_2.0.2.180126_beta.css" rel="stylesheet">
<!-- 如果不使用iframe嵌套可以不必引入 -->
<script src="http://mat1.gtimg.com/auto/2017/wau/wau-common/js/iframeResizer/iframeResizer.contentWindow.js"></script>
<!-- 核心依赖库请放置在头部 -->
<script src="http://mat1.gtimg.com/auto/2017/wau/wau-common/js/jquery/3.2.1/jquery.min.js"></script>
<script src="http://mat1.gtimg.com/auto/2017/wau/wau-common/js/vue/2.3.4/vue.min.js"></script>
  • 在body处引入如下代码:
<-- no-skin必须引入 -->
<body class="no-skin">
    <!-- 渲染区域,必须按照本代码编写。 -->
    <div id="app">
        <app :data=data></app>
    </div>
    <!-- loading效果代码,如不需要可以不写,或者替换成自己的loading效果亦可。 -->
    <div id="preloading" class="csshub-page">
        <div class="csshub-page">
            <div class="csshub-circle-loader">
                <div class="csshub-circle-line">
                    <div class="csshub-circle csshub-circle-blue"></div>
                    <div class="csshub-circle csshub-circle-blue"></div>
                    <div class="csshub-circle csshub-circle-blue"></div>
                </div>
                <div class=csshub-circle-line>
                    <div class="csshub-circle csshub-circle-yellow"></div>
                    <div class="csshub-circle csshub-circle-yellow"></div>
                    <div class="csshub-circle csshub-circle-yellow"></div>
                </div>
                <div class=csshub-circle-line>
                    <div class="csshub-circle csshub-circle-red"></div>
                    <div class="csshub-circle csshub-circle-red"></div>
                    <div class="csshub-circle csshub-circle-red"></div>
                </div>
                <div class=csshub-circle-line>
                    <div class="csshub-circle csshub-circle-green"></div>
                    <div class="csshub-circle csshub-circle-green"></div>
                    <div class="csshub-circle csshub-circle-green"></div>
                </div>
            </div>
        </div>
        <div class="csshub-bg"></div>
    </div>
    <script>
        //暴露全局对象,WAU用以渲染需要的配置和数据模型
        var wau = '{%后端输出的json%}';
    </script>
    <!-- 尾部引入wau需要的js文件 -->
</body>
  • 在尾部引入如下代码:
<!-- 注意使用的不同版本对应的功能不一致 -->
<script src="http://mat1.gtimg.com/auto/wau/wii2-wau/release/manifest_2.0.2.180126_beta.js"></script>
<script src="http://mat1.gtimg.com/auto/wau/wii2-wau/release/vendor_2.0.2.180126_beta.js"></script>
<script src="http://mat1.gtimg.com/auto/wau/wii2-wau/release/app_2.0.2.180126_beta.js"></script>

调试

在地址栏加入?wau=debug进入调试模式

results matching ""

    No results matching ""