143 Star 228 Fork 125

xautlx / s2jh4net

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
130.混合式APP.md 11.06 KB
一键复制 编辑 原始数据 按行查看 历史
魏翔 提交于 2018-04-09 10:04 . 添加 130.混合式APP.md

概要说明

基于Webpack/NodeJS/React/Cordova的Hybrid混合式APP与Restful API接口的集成应用

ui-example

目录结构说明

├── config                        // webpack相关的配置文件
├── cordova                       // 编译成cordova项目之后的代码
├── node_modules                  // 项目的所有依赖项目、插件等
├── public                        // index.html的模版文件
├── scripts                       // npm scripts
├── src                           // 项目主要源代码
    ├── actions                   // redux的actions和types
    ├── components                // 拆分的小组件
    ├── containers                // 主体页面
    ├── images                    // 图标文件
    ├── reducers                  // redux的reducers
    ├── styles                    // css目录
    ├── utils                     // 实用组件封装 api、加密等
    ├── index.js                  // 项目入口文件
    ├── routes.js                 // 项目所有路由
    ├── store.js                  // redux的store
    ├── storeFilter.js            // store中间件 实现了白名单过滤功能
├── others...


npm start                         //本地浏览器环境调试  
npm run ios                       //ios模拟器中预览  
npm run android                   //android模拟器中预览  
npm run build:ios                 //编译为ios代码  
npm run build:android             //编译为android代码  

补充:
对不同的平台进行编译和预览需要对应平台环境的支持 例如ios的xcode、android的sdk等
一般来说只需要关注src目录下的代码
普通调试使用npm start即可 需要调用设备硬件的功能推荐使用模拟器中预览
定位具体页面的代码推荐从routes.js入手 根据页面的url来判断
API_HOST根据项目需求 单独放在config/api_host.js下面

技术架构(页面依赖)

概要说明:整个技术框架在保证各组件兼容性和版本成熟度的前提下,尽可能采用相应最新版本(相对于开发时)。以下是主要技术组件列表,供参考。 各组件版本有可能会根据重构优化进行变更,此文档中列举的版本号仅供参考,具体请参考工程 package.json 中的定义。

项目基础脚手架地址:https://github.com/facebook/create-react-app

重要程度 技术组件 版本号 组件描述 参考资料
XXX animate.css 3.5.2 基础运动css组件 https://github.com/daneden/animate.css
XXXXX antd-mobile 1.0.8 基础ui组件库 https://mobile.ant.design/docs/react/introduce
XX arale-qrcode 3.0.5 二维码组件,用于绘制二维码
(应用于个人中心上传头像)
https://github.com/aralejs/qrcode
XX classnames 2.2.5 class类名处理包,用于动态组合class名 https://github.com/JedWatson/classnames
XX cropperjs 1.0.0-rc.1 图片裁剪
(应用于个人中心上传头像裁剪图片)
https://www.npmjs.com/package/cropperjs
XXXX crypto-js 3.1.9-1 接口加密
(应用于所有接口加密,默认关闭)
https://www.npmjs.com/package/crypto-js
XXXX fastclick 1.0.6 用于消除移动浏览器上物理点击和触发点击事件之间的300毫秒延迟。 https://www.npmjs.com/package/fastclick
XXX mime 1.3.6 设置某种扩展名的文件的响应程序类型 https://www.npmjs.com/package/mime
XXXX moment 2.18.1 日期/时间处理库,用于解析,验证,操作和格式化日期 https://www.npmjs.com/package/moment
XXX prop-types 15.5.8 处于设置react组件props的规则 https://www.npmjs.com/package/prop-types
XXXXX react 15.5.4 基础库 https://reactjs.org/
XXXXX react-dom 15.5.4 基础库 https://reactjs.org/
XXXXX react-router-dom 4.1.1 react路由 https://www.npmjs.com/package/react-router-dom
XXXXX react-redux 3.6.0 react数据处理库(redux基础库) http://cn.redux.js.org/
XXXXX redux-promise-middleware 4.2.0 redux处理promise异步的中间键 https://www.npmjs.com/package/redux-promise-middleware
XXXXX redux-thunk 2.2.0 https://www.npmjs.com/package/redux-thunk
XXXXX redux-persist 4.6.0 redux的store持久化 https://www.npmjs.com/package/redux-persist
XXX react-transition-group 1.1.1 用于设置组件渲染/卸载的动画效果 https://www.npmjs.com/package/react-transition-group
XXX react-redux-loading-bar 2.8.1 加载条组件 https://www.npmjs.com/package/react-redux-loading-bar

技术架构(cordova)

cordova基础使用教程请参考官网:http://cordova.apache.org/#getstarted

概要说明:具体请参考工程 config.xml 中的定义。

重要程度 技术组件 版本号 组件描述 参考资料
XXXXX cordova-plugin-app-version 0.1.9 cordova的app版本管理插件 https://www.npmjs.com/package/cordova-plugin-app-version
XXXXX cordova-plugin-camera 2.4.1 cordova的app相机插件(个人中心拍照上传头像) https://www.npmjs.com/package/cordova-plugin-camera
XXXXX cordova-plugin-file 4.3.3 读取/写入设备上的文件(用于个人中心拍照、“我的经验”读取文件、个人中心清除缓存等) https://www.npmjs.com/package/cordova-plugin-file
XXXXX cordova-plugin-file-opener2 2.0.19 打开设备上的文件(用于“我的经验”打开文件) https://www.npmjs.com/package/cordova-plugin-file-opener2
XXXXX cordova-plugin-file-transfer 1.6.3 上传和下载文件(用于“我的经验”文件不存在时下载文件) https://www.npmjs.com/package/cordova-plugin-file-transfer
XXXXX cordova-plugin-inappbrowser 1.7.1 用默认浏览器打开app“非白名单内”的链接(否则某些课件新窗口打开了第三方链接IOS会回不去APP内部)(注:由于最终IP地址未确定,次插件并未实装生效) https://www.npmjs.com/package/cordova-plugin-inappbrowser
XXXXX cordova-plugin-splashscreen 4.0.3 设置app启动画面,具体位置请参考config.xml https://www.npmjs.com/package/cordova-plugin-splashscreen
XXXXX cordova-plugin-statusbar 2.2.3 设置app的部分状态栏,如背景色等 https://www.npmjs.com/package/cordova-plugin-statusbar
XXXXX cordova-plugin-whitelist 1.3.2 设置app的可访问链接白名单地址(目前默认为所有链接)(此处可结合inappbroswer,非白名单内的地址默认可由系统浏览器接管) https://www.npmjs.com/package/cordova-plugin-whitelist
XXXXX phonegap-plugin-barcodescanner 6.0.8 扫描二维码/条形码的插件(用于首页右上的“扫一扫”功能)(目前扫描有“关注用户”、“课程签到”、“进入课程详情”三个功能) https://www.npmjs.com/package/phonegap-plugin-barcodescanner
Java
1
https://gitee.com/xautlx/s2jh4net.git
git@gitee.com:xautlx/s2jh4net.git
xautlx
s2jh4net
s2jh4net
master

搜索帮助