Skip to content

Latest commit

 

History

History
157 lines (94 loc) · 5.82 KB

README.md

File metadata and controls

157 lines (94 loc) · 5.82 KB
Raw

wapman

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

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

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

视频教程

更新日志

  • 2018-07-26

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