代码拉取完成,页面将自动刷新
基于Webpack/NodeJS/React/Cordova的Hybrid混合式APP与Restful API接口的集成应用
├── 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基础使用教程请参考官网: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 |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。