wapman

该项目是一个前端平台 新上线对应的后台接口Api Resetful 平台 wapman-admin https://github.com/xiejunping/wapman-admin

如果使用想一起参与学习与使用，请在下方加群 或加我微信号

vue 多页应用

• 基于apicloud应用开发框架，结合现在最流行的vue前端框架，打造一个体验相对完美的手机app
• 这款app是一套h5的代码适用ios，Android两个平台，而且可以在平台市场上架成功

适合人群

• 对node已经管理可以玩得转了，对于构建、编译开发环境，测试环境都比较熟悉的同学
• 对vue基础比较熟悉，而且参与过至少一个vue前端开发的同学
• 项目开发有组件开发基础，了解过vuex或是redux状态管理的同学

安装说明

app开发（webapp）持术栈是 vue.js + webpack + apicloud 开发技术

• vue.js 是前端非常热门的 mvvm 框架，百度里有更好、更准备的解释。
• webpack 是 node.js 项目使用的最热门编译脚手架，vue 全家桶中也使用了，轻松构建 开发，生产多环境编译配置。
  
• apicloud 是一个在线打包安卓、 iOS的应用的工具。主要用它一简化打包，模块集成开发，及第三方服务模块支持。

准备工作：

1､下载node.js。http://nodejs.cn/download/
2､安装node.js。不要更改任何 一直下一步，直到完成。
3､下载git。https://git-scm.com/downloads
4､安装git。

极简教程

1、在工作盘(e)根目录下，建立一个workspace的文件夹。
2、进入电脑的dos模式，（window win+r cmd , Mac 进入终端管理）用cd命令进入workspace文件夹
3、用git命令 git clone https://github.com/xiejunping/wapman.git下载项目代码到工作空间
4、进入项目cd wapman, 下载依耐模块包npm install。
5、如果没有提示错误，进行后面的操作 ^_^。
6、执行命令脚本npm run dev,本地构建http服务，自动启用浏览器调试项目。
7、执行命令脚本npm run build，编译源代码生成dist目录,代发布到apicloud应用里。

更新项目代码

更新可能会出现代码冲突问题，大家可以先把你项目里的dist目录删除再用 git pull --rebase 更新项目代码，更新完了直接跑会报错，因为 pageage.json 包里加了一些依赖，需重新执行 npm install 安装依赖。
祝你成功！ 如果运行报错，随时可以在群里提问 QQ群 607631721

项目构建说明

目录

• wapman
  • build --------- 编译配置文件
  • config -------- 配置开发、生产环境
  • app ----------- Apicloud项目源码目录
    • dist -------- build生成上线的文件
    • config.xml -- app项目配置文件
  • src ----------- 项目源文件
    • api --------- 业务数据请求
    • base -------- 基础组件
    • common ------ 公共的方法、函数
    • components -- 业务组件
    • modules ----- 多页面
  • static -------- 静态资源
  • .babelrc ------ es6 配置文件
  • .editorconfig - eslint 配置文件
  • .eslintignore - eslint 过滤文件夹
  • .eslintrc.js -- eslint 检查规则
  • .postcssrc.js -
  • pageage.json -- node 项目管理文件
  • README.md ----- 项目说明文档
  • webStorm-ApiCloud apploader同步调试工具包

项目构成模块说明

• 业务层(业务组件)
• 支撑层(UI框架)

业务层

是指设计师开发的设计稿，高保真，有批注，有交互原型稿 = 页面

支撑层(重点)

是指组成这些层面的基础组件，或是多个页面相同部分抽离出业务组件，数据组件，在基础组件的使用上，还可以开发插件的方式全局化注册在项目中使用，不用多次引用。 文件代码也会相对少一些。

第三方插件及工具，调试工具(apploader)，脚手架(vue-cli)，打包工具(apicloud)，测试工具(postman)，接口数据模拟(easy-mock), 支持文档(gitbook)

1像素边框移动端解决方案

• flexible 阿里解决方案

引用阿里字体图标库

• 请求接口方法axios

• 提示组件toast

• 对话框组件vc-dialog

• 列表组件list-view

• 滚动组件scroll

• 输入框组件input-group

• 按钮组件vc-button

• 加载动画组件loader loader-rack loading

• 暂无数据组件no-result

• 搜索组件 search

• 页面组件 page

• 页头组件 top-bar

视频教程

• 百度网盘

  • 1､wapman_01 项目视频讲解第一课 项目的构建 链接: https://pan.baidu.com/s/1eSfCavK 密码: 79vm
  • 2､wapman_02 项目讲解第二课 ES6入门视频 链接: https://pan.baidu.com/s/1i5ORiN7 密码: emah

• 高清视频

  • 1、wapman_01 项目视频讲解第一课 项目的构建 链接: https://chuanke.baidu.com/v2503702-235599-1716888.html
  • 2、wapman_02 项目讲解第二课 ES6入门视频 链接: https://chuanke.baidu.com/v2503702-235599-1732384.html

更新日志

• 2018-07-26

  • ApiCloud 中native中的监听事件改成Promise模式，解决回调难码代码的问题，暂时不稳定，可能手机调式时报错回是没有反应，记加上Promise.resolve
  • fastClick 的引用去掉了，用Css的 touch-action: manipulation 加入到Reset.style中，解决300ms的点击延迟问题
  • 登录、注册模块 改新后台平台接口 nodejs 写的后台，wapman-admin 接口Api ResetFul 服务
  • 输入框加图标选项 密码，输入框可以加交互体验
  • 上传图像使用腾讯云COS服务 验证码使用腾讯云的免费 100/月的短信平台，高速稳定