• 搭建avalon移动端项目


    此项目是根据本人公司项目的要求搭建的,也许适用于很多其他的大部分项目。

    准备好gulp环境

    首先可以使用gulp创建项目,配置一下gulpfile.js文件,我把gulpfile.js放于根目录下

    具体配置以及安装命令方法参见这里

    我的项目目录

    我的项目目录是这样:

    ==build        //项目构建目录
     | html        //html文件目录
     | images      //图片文件目录
     | javascripts //javascript文件目录
    	| libs     //js库文件
     | stylesheets //样式文件目录
     
    ==gulpfile.js
    

      


    在程序中使用的avalonjs可以在
    这里看到,同时s使用了mmRouter主要的文件如下

    当你看到下面的时候会发现有个slideout.js文件,这是我们移动端用的侧边栏,我是拿别人的代码改来自己用,参见这里

    main.html

    build 目录下

    <!DOCTYPE html>
    <html ms-controller="main">
    <head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
      <meta name="apple-mobile-web-app-capable" content="yes"/>
      <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
      <meta name="format-detection" content="telephone=no, email=no"/>
      <meta name="fragment" content="!"/>
      <link rel="stylesheet" href="stylesheets/normalize.css"/>
      <link rel="stylesheet" href="stylesheets/sildeout.css"/>
      <script src="avalon.mobile.min.js" data-main="javascripts/main"></script><!-- 这里引入最重要的js -->
      <title>柏小生</title>
    </head>
    <body>
    <nav id="BXS_menu"><!-- 这里是我们的菜单 -->
      <a href="#!/" ms-click="slideoutClose">home</a>
      <a href="#!//test" ms-click="slideoutClose">test</a>
    </nav>
    <div id="BXS_main" ms-click="slideoutClose">
      <div ms-view></div><!-- 所有的页面都会在这里显示(当然除了菜单栏) -->
    </div>
    
    <script src="javascripts/libs/slideout.js"></script><!-- 引入的侧边栏插件 -->
    <script>
      var slideout = new Slideout({
        'panel': document.getElementById('BXS_main'),
        'menu': document.getElementById('BXS_menu'),
        'padding': 220,
        'tolerance': 85
      });
    </script>
    </body>
    </html>
    

      

    avalon.mobile.min.js在build目录下

    主要的main.js

    build/javascripts 目录下

    require.config({//配置avalonjs
    baseUrl: 'javascripts',//基础路径
    paths: {
    avalon: '../avalon.mobile.min.js'
    },
    shim: {
    avalon: {
    exports: 'avalon'
    }
    },
    debug: false
    });
    require(['avalon', 'ready!', 'libs/mmState'], function (avalon) {
    console.log(avalon);
    //定义顶层的VM
    avalon.define({
    $id: 'main',
    slideoutClose: function() {
    slideout.close();
    }
    });
    //定义各种状态,内部会转换为一个路由表,交由mmRouter去处理
    avalon.state('index', {
    controller: 'main',
    url: '/',
    views: {
    '': {
    templateUrl: 'templates/index.html' //templates下的index.html片段
    }
    },
    onBeforeEnter: function() {
    require(['index'], function(index) {
    index.init();
    });
    },
    onError: function(err) {
    avalon.log(err);
    }
    });
    avalon.state('test', {
    controller: 'main',
    url: '/test',
    views: {
    '': {
    templateUrl: 'templates/test.html'//templates下的test.html片段
    }
    },
    onBeforeEnter: function() {
    require(['test'], function(test) {
    test.init();
    });
    },
    onError: function(err) {
    avalon.log(err);
    }
    });
    //启动历史管理器
    avalon.history.start({
    basepath: '/app'
    });
    //开始扫描
    avalon.scan();
    });
    

      


    路径build/templates
    以下两段为html片段

    index.html片段

    <div ms-controller="index" id="index">
        <p ms-text="testName"></p>
    </div>

    test.html片段

    <div ms-controller="test">
      <p ms-text="testName"></p>
    </div>
    

      

    libs文件

    在libs下放了需要的js文件,包括mmState、mmHistory、mmRouter等

    最后使用gulp命令生成assets目录
    参考资料

    https://github.com/gulpjs/gulp
    https://github.com/baixiaosh/avalon
    https://github.com/RubyLouvre/mmRouter
    https://github.com/baixiaosh/slideout

    如果本文有什么不对的地方,希望大神们指出,以免误导其他撸码哥,谢谢

    本文地址:http://www.cnblogs.com/baixiaosheng/p/4390253.html 

  • 相关阅读:
    论程序员的自我修养
    设计模式之:行为型设计模式(11种)
    设计模式之:结构型设计模式(7种)
    @import "../style/lines.scss" 导致background: url()路径无效问题
    node express 设置重定向
    png8和png24的区别
    vue scss 使用 及 踩坑
    js 防抖 节流
    js 次方 开方 对数
    css 修改placeholder样式
  • 原文地址:https://www.cnblogs.com/baixiaosheng/p/4390253.html
Copyright © 2020-2023  润新知