CRM前端架构分享

crm-app

• 开发工具：hbuilder
• 使用的技术：mui arttemplate.js h5+ native.js
• 参考文档

详细讲解

• 项目结构

• mainfist.json 配置

  • 应用信息
  • 图标，启动图片
  • sdk(关键点)
  • 模块权限(关键点)

• 版本升级

  • 修改manifest.json文件的版本号
  • 修改update.json文件的版本号，以及更新资源路径

• 开发中常用功能及填坑方法

  • 下拉刷新+上拉加载

html结构

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
	<div class="mui-scroll">
		
	</div>
</div>

js代码

$.init({
	pullRefresh:{
		container:'#refreshContainer',
		down: {
			contentdown : "下拉可以刷新",
		    contentover : "释放立即刷新",
		    contentrefresh : "正在刷新...",
		    callback:process.pullDownList
		},
		up: {
			callback: process.pullUpList
		}
	}
});

---

• 页面跳转

页面类型：组装页面 独立页面 (举个栗子 return模块)
跳转页面事件触发：fire mui.back()

• 相关sdk (地图、复制、粘贴、文件上传、拍照、分享)

  • 调试，直接连手机

  • 打包 （云端打包生成apk和ipa文件）

  ios打包需要相关账号信息及证书(开发证书有过期时间)，android可以使用dcloud的公用证书也可以用自己的证书

  • 全局方法
    • 常用的方法可以写在app.js在(公共文件)文件中，比如全局ajax等

  ---

crm-pc

• 开发工具 ：webstorm
  • 插件配置：scss（配置后，sass自动转css）
• 开发环境搭建：
  • 安装nodejs，推荐4.2以上版本
  • 安装gulp，构建工具
  • 安装其他打包插件(package.json已经配置好构建插件的依赖，直接执行npm install即可安装，安装不了，请翻墙)

• 项目结构

• 开发规范

  • js、css、html、等资源单独文件夹放置
  • 一个模块一个文件夹，每种资源都一致，css(scss文件)资源统一引入公共样式 @import "../subBase";
  • body标签统计加上类名为模块名字，方便构建后特殊样式区分
  • 暂时没做依赖管理，按需引入组件：库->插件(组件)->自定义
  • 开发目录src，发布目录dist

• UI及库

  • ui使用bootstrap，引入jquery主要是为了支持bootstrap
  • 使用vue.js

• vue常用功能介绍

  • 数据绑定，计算属性，方法绑定，属性，组件化(stateAnalysis模块)

• 构建方法及常用gulp插件：(见gulpfile文件)

• 其他