1 Star 0 Fork 30

cnpress / magic-app

forked from niluanxy / magic-app 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

MagicAPP

MagicAPP,专为WebAPP而生的开发框架,致力于轻松的写代码,产出用户体验优秀的APP。生成代码可以直接用于移动端,微信端。结合打包工具,可以非常方便的转为原生APP,供用户下载使用。

框架自带一整套的UI,同时整体架构合理灵活,各部分可以单独拆出运行,亦可与其他的框架,库等配合使用。目前框架处于开发预览阶段,可能会有极大的改动,使用请注意。


基本使用方法:

1.项目依赖初始化

依赖环境初始化只需在 项目根目录 执行以下命令:

sudo npm install -g gulp cordova webpack

npm install
gulp build

第一条命令会将 gulp 和 cordova 和 webpack 安装到全局环境。

PS:国内的环境问题,安装可能会很慢,所以建议先安装 nrm 工具,替换为 国内淘宝源,可以极大加快下载速度:

sudo npm install -g nrm
nrm use taobao

安装完成执行 nrm ls ,如果显示类似下面内容则安装成功:

  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - http://registry.npm.taobao.org/
  edunpm - http://registry.enpmjs.org/
  eu ----- http://registry.npmjs.eu/
  au ----- http://registry.npmjs.org.au/
  sl ----- http://npm.strongloop.com/
  nj ----- https://registry.nodejitsu.com/
  pt ----- http://registry.npmjs.pt/

现在去执行初始化操作,将极大的缩短依赖下载时间。

2.常用命令说明

框架内置了以下常用命令,说明如下:

gulp clean               ## 清空编译后的文件,常用于清理项目
gulp build               ## 编译整个项目
gulp build -r            ## 编译项目并压缩,常用于【项目发布】。注意此命
                            令并不包括 cordova 部分。
                            最终生成的文件位于 /app/dist 目录下。为保证
                            文件纯净,建议发布前执行一次清理工作。

gulp dev-mixin           ## 只编译框架 mixin 部分

gulp dev-minjs           ## 只编译框架 minjs 部分

gulp dev-magic-css       ## 只编译框架 magic 部分的 【CSS 文件】
gulp dev-magic-js        ## 只编译框架 magic 部分的 【JS  文件】

gulp dev-magic-vue       ## 只编译框架 magic-vue 部分

gulp cordova-create      ## 创建 cordova 环境
                         ## cordova 相关命令,请具体看 cordova 部分说明

3.项目开发启动命令

目前框架集成了 livereload 功能,可以做到保存文件,自动刷新浏览器查看效果,只需在 项目根目录 执行下面命令即可:

gulp build && gulp serve

执行后会 先自动编译项目,编译完成会在浏览器弹出项目预览页面。接下来享受编码过程即可,不用去操心文件编译,浏览器刷新等问题。


Cordova 初始化:


Cordova 为开源的一套工具,主要用于将 HTML5 进行包装,编译为可以在手机上运行的程序文件,还能通过插件提供一些 H5 没有的功能,比如硬件设备的访问。

1.初始化 Cordova 环境

初始化 cordova 环境,只需在 项目根目录下 执行以下命令:

gulp cordova-create

2.添加编译平台

项目创建完毕后,必须先添加编译平台,命令如下:

gulp cordova-[平台名](android/ios)

比如添加 Android 平台可以执行如下命令:

gulp cordova-android

Cordova 编译打包

1.正常打包文件

gulp cordova-build-[平台名](android/ios)

比如编译 Android 的命令如下:

gulp cordova-build-android

编译完成后 ,文件会自动生成在 项目根目录 output 文件夹中。

2.打包并安装文件

gulp cordova-run-[平台名]

比如 Android 平台编译并安装到手机上(当前须有已经连接的手机)的命令如下:

gulp cordova-run-android

然后会先执行 打包任务,完成后自动安装到手机上。


Cordova 项目配置

1.原理描述

由于cordova 的文件很大,而且大多都是自动生成的,没有必要也不应该放到代码管理中去,所以这部分我进行了修改,采用 文件替换 的思路来把配置文件抽离出来。

2.目录映射关系(待补充...)

The MIT License (MIT) Copyright (c) 2015 niluanxy Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

优雅的编码,创建富有交互性,用户体验良好的H5 APP 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/liubin0509/magic-app.git
git@gitee.com:liubin0509/magic-app.git
liubin0509
magic-app
magic-app
master

搜索帮助