搭建avalon移动端项目-优快云博客

本文介绍如何根据公司项目需求搭建一个适用于多种项目的移动端应用，重点在于使用gulp环境、前端框架AvalonJS和侧边栏插件Slideout.js进行高效开发。详细配置了项目目录、引入关键文件及脚本，并通过AvalonJS和mmRouter实现路由管理与状态切换，最终通过gulp命令生成资产目录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

准备好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

转载于:https://www.cnblogs.com/baixiaosheng/p/4390253.html