开发方式

一、单页开发

下载单页开发包

  • 优点:体验好,媲美 app,操控强,按需加载或一次性加载;
  • 缺点:不支持后端语言输出展示,不支持 seo;

单页开发预览需要部署,或者 node 工程的支持,默认需要 3 个文件,。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>BUI</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.css"
    />
  </head>
  <body>
    <div id="bui-router"></div>

    <!-- content -->
    <script src="https://cdn.jsdelivr.net/npm/buijs@latest/lib/zepto.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.js"></script>
    <script>
      // router init
      window.router = bui.router();

      bui.ready(function (global) {
        // router init, will find default page. pages/main/main.html pages/main/main.js
        router.init({
          id: "#bui-router",
        });
      });
    </script>
  </body>
</html>

pages/main/main.html

<!-- BUI标准结构 -->
<div class="bui-page bui-box-vertical">
  <header>
    <!-- 顶部固定内容 -->
    <div class="bui-bar">
      <div class="bui-bar-left">
        <div class="bui-btn"><i class="icon-back"></i></div>
      </div>
      <div class="bui-bar-main">BUI首页</div>
      <div class="bui-bar-right"></div>
    </div>
  </header>
  <main>
    <!-- 中间滚动内容 -->
    <div class="bui-btn warning">中间按钮</div>
  </main>
  <footer>
    <!-- 底部固定内容 -->
    <div class="bui-btn primary">底部按钮</div>
  </footer>
</div>

pages/main/main.js 特定的模块包装

loader.define(function (requires, exports, module, global) {
  // requires: 加载模块
  // module: 模块信息
  // global: 获取全局方法
  bui.alert("done");
});

二、多页开发

下载多页开发包

  • 优点:简单,支持后端语言输出展示,支持 seo;
  • 缺点:体验较差,无法定制交互及路由操作;

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>BUI</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.css"
    />
  </head>
  <body>
    <!-- BUI标准结构 -->
    <div class="bui-page bui-box-vertical">
      <header>
        <!-- 顶部固定内容 -->
        <div class="bui-bar">
          <div class="bui-bar-left">
            <div class="bui-btn"><i class="icon-back"></i></div>
          </div>
          <div class="bui-bar-main">BUI首页</div>
          <div class="bui-bar-right"></div>
        </div>
      </header>
      <main>
        <!-- 中间滚动内容 -->
        <div class="bui-btn warning">中间按钮</div>
      </main>
      <footer>
        <!-- 底部固定内容 -->
        <div class="bui-btn primary">底部按钮</div>
      </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/buijs@latest/lib/zepto.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/buijs@latest/lib/latest/bui.js"></script>
    <script>
      bui.ready(function (global) {
        // init
        bui.alert("done");
      });
    </script>
  </body>
</html>

点击在线预览

Copyright ©2017-2022 easybui.com all right reserved,powered by Gitbook该文件修订时间: 2022-04-25 14:27:25

results matching ""

    No results matching ""