GitHub - ryouaki/Mobile-Module-Js: This is a Demo for Cordova front side and Nodejs server side.You can work base on it and create your mobile application solution quickly.

ryouaki / Mobile-Module-Js Public

Notifications You must be signed in to change notification settings
Fork 2
Star 12

This is a Demo for Cordova front side and Nodejs server side.You can work base on it and create your mobile application solution quickly.

12 stars 2 forks Branches Tags Activity

Star

Notifications

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
.settings		.settings
Demo		Demo
Docs		Docs
Lib/mmodulejs		Lib/mmodulejs
.project		.project
README		README

Repository files navigation

If you want to run the Demo app on IOS or Android 

You need launch this command line first

$ cordova platform add ios android

-------------------------EN-----------------------------------------------
This js lib is used to create a modular hybrid quickly.

And there is a simple demo on the folder named Demo,You can also read the API Reference from Docs

This is a simple introduction for how to use mmoduleJs on your project below:

The first we need import jquery into your project,And then add the code like below on your main html file.
<head>
...
<script src="lib/jquery/jquery.js"></script>
<script src="lib/mmodulejs/mmodulejs.js"></script>
...
</head>
<body>
...
<script type="text/javascript" src="js/moduleConfig.js"></script>
<!--moduleConfig.js you can assign another name-->
</body>

The moduleConfig.js like this:

moduleJs.init({
  mainDiv : "main-panel",   // This is the id of entry div ,we need display your template html here
  modules: {
    moduleLoginView : {     // Module name
      name : "moduleLoginView" ,   // Controller name,Must the same as module name.
      controller : "js/controllers/loginController.js", // The path of controller js file
      view : "templates/login.html"  // The path of template html file
    },
    ......
  }
});

When we want to display a html on you app,You need invoke this api 
moduleJs.showView(moduleName,{ paramName:paramData});
EX.
moduleJs.showView('moduleLoginView',{title:'Mobile-Module-JS Demo'});

·How to create a custom plugin
refer/Demo/ClientSide/customPlugin Folder structure and create package.json&plugin.xml
package.json
{
  "name": "custom-plugin",  // plugin name
  "version": "0.0.1",       
  "description": "Custom plugin",   //
  "cordova": {
    "id": "custom-plugin",  // id
    "platforms": [          // platform
      "ios"
    ]
  },
  "repository": {           // url
    
  },
  "keywords": [             // 
  ],
  "author": "Ryouaki([email protected])"  // 
}

plugin.xml
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
           id="custom-plugin"
      version="0.0.1">
    <name>custom-plugin</name>
    <description>Cordova Custom Plugin</description>
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="customPlugin">
                <param name="ios-package" value="CDVCustomPlugin" />
                <param name="onload" value="true" />
            </feature>
        </config-file>
        <header-file src="src/ios/CDVCustomPlugin.h" />
        <source-file src="src/ios/CDVCustomPlugin.m" />
    </platform>
    <info>
        This plugin is used for demo how to create a custom plugin
    </info>
</plugin>

*Notes that we need better copy this two files(package.json&plugin.xml) from other apache plugin
and create this two files base on it.
src/
    ios/
        CDVCustomPlugin.h
        CDVCustomPlugin.m
        
And then run this command line:
cordova plugin add ../customPlugin 

-------------------------CN-----------------------------------------------
Demo程序是基于Bootstrap+mmodulejs的一个模块化Hybrid app。

主要用于演示如何使用mmodulejs完成一个模块化的移动端app。

mmodulejs需要依赖于jquery。所以需要和jquery配合使用。首先你需要包含如下代码在你的程序首页
<head>
...
<script src="lib/jquery/jquery.js"></script>
<script src="lib/mmodulejs/mmodulejs.js"></script>
...
</head>
<body>
...
<script type="text/javascript" src="js/moduleConfig.js"></script>
<!--moduleConfig.js你可以使用任意你喜欢的名字-->
</body>

moduleConfig.js内容如下

moduleJs.init({
  mainDiv : "main-panel",   // 此item用于指定你界面的主div。所有子页面都是在此div显示。
  modules: {
    moduleLoginView : {     // 此为module名，必须与下面name相同与对应*Controller.js中的第一个参数相同
      name : "moduleLoginView" ,   // controller类名
      controller : "js/controllers/loginController.js", // controller模块执行代码块,不需要在html界面单独引入
      view : "templates/login.html"  // 用于显示的html模板
    },
    ......
  }
});

当我们要显示某一个界面的时候我们只需要执行如下js语句
moduleJs.showView(模块名,参数);
EX.
moduleJs.showView('moduleLoginView',{title:'Mobile-Module-JS Demo'});

·如何创建自定义plugin
参照/Demo/ClientSide/customPlugin的目录结构创建文件夹并创建package.json和plugin.xml
package.json
{
  "name": "custom-plugin",  // plugin名称
  "version": "0.0.1",       // 版本号
  "description": "Custom plugin",   // 描述
  "cordova": {
    "id": "custom-plugin",  // id
    "platforms": [          // platform
      "ios"
    ]
  },
  "repository": {           // url
    
  },
  "keywords": [             // 搜索关键词
  ],
  "author": "Ryouaki([email protected])"  // 作者信息
}

plugin.xml
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
           id="custom-plugin"
      version="0.0.1">
    <name>custom-plugin</name>
    <description>Cordova Custom Plugin</description>
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="customPlugin">
                <param name="ios-package" value="CDVCustomPlugin" />
                <param name="onload" value="true" />
            </feature>
        </config-file>
        <header-file src="src/ios/CDVCustomPlugin.h" />
        <source-file src="src/ios/CDVCustomPlugin.m" />
    </platform>
    <info>
        This plugin is used for demo how to create a custom plugin
    </info>
</plugin>

*关于package.json&plugin.xml我个人建议是从已经安装的apache的plugin拷贝过来修改
src/
    ios/
        CDVCustomPlugin.h
        CDVCustomPlugin.m

然后到工程目录执行cordova命令:
cordova plugin add ../customPlugin 

----------------------------Update history------------------------------------
Ver 20151223 : Upload all source code and docs
Ver 20151228 : Add custom Plugin 

----------------------------Plan----------------------------------------------

----------------------------Contact-------------------------------------------
email :[email protected]
qq    :46517115
wechat:lianghui086343