bmfe-mobile-template v1.1.0
使用安装
权限不足请使用 sudo
BM init -f mobile 创建名称 版本 cnpm install
功能介绍
移动端底层已经切换至 vnoic，基于 WeUI，vnoic 又在此之上封装了很多，能很快的构建业务
对于 vnoic 服务指令的引入最好在 common 中进行引入，尽量减小包的体积，按需再向整个业务进行引用
目录结构
·
|-- .gitignore （需要忽略的文件：/node_modules、/bower_components、/dist）
|-- .babelrc （babel 编译的文件）
|-- .eslintrc （js 语法检测文件）
|-- config.js （BM 配置文件）
|-- node_modules （node 依赖）
|-- html （对外输出的页面文件）
|-- dist （对外输出的 js/css 资源文件）
|-- src （工程目录）
|-- css （css 文件目录）
|-- html （html 文件目录）
|-- mock （mock）
|-- js （js 文件目录）
|-baseLibs （此文件一般是外部一些大型的资源文件，且这个文件不会走编译）
|-common （公共模块具有完整的页面周期的行为，如：登录）
|-components （全局公共组件）
|-config （公共配置文件：如路由等）
|-pages （页面的业务）
|-service （发送请求的服务方法）
|-store （全局的 store 如登录信息）
|-utils （工具类函数）
|-widget （全局生命周期插件）
|-app.vue （根节点）
|-main.js （业务的根节点 js）
|-vendor.js （公共的资源文件引入）修改配置文件
修改文件目录中的src\js\config\index.js
// 独立开发时，mock 服务的路径
export const TESTPATH = '//fe.benmu-health.com'
// 接口拦截到需要跳转登录页面的 code
export const LOGIN_CODE = 1000
// 需要微信认证
export const WXCONFIG = true
// 请求超时时间
export const AJAXTIMEOUT = 20000
// 请求是否会发送本地的请求
export const LOCAL_AJAX = false
export const DEBUG = {
// 请求打印
req: false,
// 响应打印
res: false,
//开启vconsole
vconsole: false,
// 开启vue debug
v_debug: true,
// 开启vue devtools
v_devtools: true
}将上面的配置文件，配置成适用于当前项目的参数
启动
BM server // 启动该项目，该项目会自动打开浏览器规范
页面配置
在vue的组件化中，我们还是需要标识页面级别的组件，单页面的应用更需要设置title和微信分享参数，页面界别的vue文件中必须含有一个pageInfo。
pageInfo: {
// 当前页面的标题
title: '急诊地图',
// 是否展示微信右上角的选项
showOptionMenu: true,
// 分享信息
shareInfo: {
// 分享需要记录的key
shareKey: 'WX_JZDT0000002',
// 分享的信息
title: '【收藏文】原来急诊也要跑对医院',
iconUrl: 'https://img.benmu-health.com/wechatV2/img/mapShare.jpg',
link: 'https://wechat.benmu-health.com/wechatV2/#/hosMap.intro',
desc: '患者在线可查询医院急诊项目范畴，获得精准救助'
}
}ajax 规范
底层使用axios，需要了解API自行了解axios库，需要在service中配置好自己的请求发送参数如
{
// 接口名称，调用时会用到，注意重复
name: 'detail',
// 发送请求类型
method: 'GET',
// 接口描述
desc: '医生个人信息接口',
// 本地地址
localPath: '/test/sectionDoctor/detail',
// 线上地址
path: '/mobile/wx/individualDoc/queryById',
// 发送出去的参数
params: {
key: value
}
}业务中调用方式
this.$service['xxx/detail']({
key: value
}, {
// 额外的参数 如：header
noShowDefaultError: true
}).then((data) => {
// 已经过滤了 resData.data，可直接使用，无需判断
// 具体的过滤器在 config/ajax 中
}, () => {
// 失败的回调，错误已经自动报了，一般无需关心
});router 命名规范
命名尽量遵循父级路由.当前路由的规则，一般路由路径不能超过三层，需要考虑效率问题
路由配置文件在 config/router 中，路由配置规则尽量遵循父子路由的关系，子路由都配置在父路由的 children 属性中，配置自路由的好处是在打开子路由返回的时候，父级路由的转台都还保存着
订单模块，有搜索条件的页面，搜索结果列表页面，搜索详情页面，构造出来的路由如下：
{
path: '/order',
component: Order,
children: [{
path: '/search',
component: Search
},{
path: '/list',
component: List,
children: [{
path: '/detail',
component: Detail
}]
}]
}父路由中模板文件也需要增加对应的自路由组件
<transition name="child">
<router-view></router-view>
</transition>路由中的channel和from参数会自动带到下一个页面，这个是为了每个业务自动记录当前业务的渠道
router 配置中还有有一些默认的 meta 参数
{
name: '',
path: '',
component: ,
meta: {
// 页面是否需要登录，如果需要登录且没有获取到用户登录信息就会弹到登录页面，登录成功之后自动返回
needLogin: true,
// 当前页面的 pv 统计参数
pvKey: 'WX_JZDT0000003'
}
}下面是业务中新开页面和返回页面的使用：
this.$router.forword({
// 不要路径，一般都写 name
name: ''
})
// 默认返回一步
this.$router.back() === history.go(-1)
// 多级返回
this.$router.back({
// name，返回到堆栈中最近的一个 name 路由
name: ''
// length 代表返回的路径长度
length: ''
})页面路由切换代码
store 文件夹下命名规范
我们的 store 的命名规范基本上是围绕着 pages 来做的，pages 确定之后，其实 store 就已经确定了。全局的store是放在根目录下的store里的，其他的业务store都是跟着业务走的
使用都是跟着路由的生命周期完成的，这里并不是真正的把store移除，实质上只是在当前的store树上解除了引用关系，下来再次加回来的时候状态都还在。如果想要每次都是新的状态，应该在state的声明的时候返回一个纯函数，每次使用的时候都是新的状态。
beforeRouteEnter(to, from, next) {
store.install()
next()
},
beforeRouteLeave(to, from, next) {
store.uninstall()
next()
}actions 命名规范
由于项目中的 store 是合并到一个 store 上，获取 actions 的方式又是通过 mapActions，所以需要做好命名的区分。
一般我们是用，由于有命名空间，在多个模块间共用的actions不能重复:
DO_something GET_HOSLISTgetter 命名规范
由于项目中的 store 是合并到一个 store 上，获取 getter 的方式又是通过 mapGetters，所以需要做好命名的区分
有了命名空间，一般是不会重复，一般我们是用:
...mapGetters('tab', ['activeTab', 'showMask'])pages 文件夹下命名规范
我们认为 pages 下的子模块是遵循某种模块划分的，这样会更有利于之后维护代码，所以一般我们在 pages 下建立模块的时候一般是遵循以页面来划分。
那么 pages 下的目录结构其实就是后台功能菜单栏功能目录的一种体现。
比如有一个目录结构是：
医院管理
医院列表对应的 page 下的文件目录结构就应该类似如下（我的英语不好，只能下面这样翻译了）：
hosManager
hosList上面这种这是模块划分映射目录划分的一种方式，我们还可以依照功能去划分，这样划分可能需要有更强的语义性
模块的构成
当划分出一个子模块之后，我们不能简单粗暴的用一个 .vue 文件把所有业务逻辑完成，除非你的模块功能非常单一，其他的情况，我们希望把模块进行划分，由多个子 component 组成，划分的粒度也需要自己掌握，粒度越细越灵活，但也意味着 component 间的交互会变得复杂。
比如我们划分出了三个模块 header、list、footer，我们的目录结构按照上面的继续写就会是
hosManager
hosList
index.vue
store
index.js
actions.js
modules
header.js
list.js
footer.js
components
header.vue
list // 如果业务非常复杂可做一下拆分
index.vue // 参照 vue2 官网说明，这个文件是作为引入其他文件存在
index.js // js 逻辑文件
index.scss // 样式文件
index.html // html 文件
footer.vuehosList/index.vue 仅仅是作为组织文件，将三个子模块引入，并且做好架子的角色，如 html 中的布局，如果 component 间需要事件交互，这个文件也可以充当中介者的角色。
scroll 的使用
iscroll放到统一的数组中，主要是因为每隔几秒需要更新，以防微信修改大字体。并且可以在某些情况下直接禁用当前页面所有的 iscroll，比如弹窗
$config: {
// 标志当前业务中有 iscorll
hasScroll: true,
},
methods: {
// iscroll 刷新
refresh(){
this.$scrollRefresh();
},
// iscroll 启用
able(){
this.$scrollAble();
},
// iscroll 禁用
disable(){
this.$scrollDisable();
}
},
mounted () {
// scroll 使用的时候需要
this.$config.scrollArr.push(new IScroll(el, {
preventDefault: false,
}));
}beacon 的使用
发送beacon记录打点，发送到hive中，各业务再去找对应的后端做查询，具体文件在utils/beacon.js
$Beacon(key, page(可缺省), {
// 保留参数，没有特殊需求这些参数不能覆盖 openId userId 时间戳
extra_[a-e]: '额外参数'
// 额外需要记录的数据
extra_[d-g]: '额外参数'
});
$Beacon('WX_DLZC0000005');
$Beacon('WX_DLZC0000005', '登录页', {
extra_d: '注册业务'
});
$Beacon('WX_DLZC0000005', {
extra_d: '注册业务'
});vue 使用规范
组件交互
兄弟组件
父组件向子组件传递数据:
props
子组件向父组件抛出事件:
vm.$emit('xxx')
父组件用v-on:xxx="func"来接子组件触发的事件和暴露的数据虽然vue还提供了$ref和$parent来让我们访问其他组件的数据和方法，但为了工程的可维护性，让我们的数据变化的追踪变得有规律可循，我们应尽量避免他们的使用
非兄弟组件
有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线
业务简单:
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})业务复杂:
请直接使用Vuex
actions中只做异步和分发
commit应该按state结构来细分 尽量避免一个commit修改多个state格式
如果不给代码做格式化就是等于代码没有写。请原谅我是 tab = 4空格档，就必须是这样的
其他还没有想好，支持一切新的属性，你可以尽情的使用
数组
向数组增加元素时使用 Array#push 来替代直接赋值。
var someStack = [];
// bad
someStack[someStack.length] = 'abracadabra';
// good
someStack.push('abracadabra');ps：尽量不要频繁取值。
当你需要拷贝数组时，使用 Array#slice
var item = [1,2,3];
var item_len = item.legth;
var itemArr = [];
var i = '';
// bad
for(i = 0; i < item_len; i++){
itemArr[i] = item[i];
}
// good
itemArr = item.slice();使用 Array#slice 将类数组对象转换成数组
function trigger() {
var args = Array.prototype.slice.call(arguments);
...
}字符串
使用单引号，包引字符串
var str = 'helloe world!';超过 100 个字符的字符串应该使用连接符写成多行。
var str = '<p>你好</p>'+
'<p>你好<p>'+
'<p>你好</p>';ps：尽量用“+”，不用“\”，若字符很长，需折行，不用折行，会影响性能读取问题。
程序化生成的字符串使用 Array#join 连接而不是使用连接符。尤其是 IE 下
for (i = 0; i < length; i++) {
//bad
items += '<li>' + messages[i].message + '</li>';
//good
items[i] = '<li>' + messages[i].message + '</li>';
}
//bad
return '<ul>' + items + '</ul>';
//good
return '<ul>' + items.join('') + '</ul>';ps：for循环，length提前取出。
{
"rules": {
//官方文档 http://eslint.org/docs/rules/
//参数：0 关闭，1 警告，2 错误
// "quotes": [0, "single"], //建议使用单引号
// "no-inner-declarations": [0, "both"], //不建议在{}代码块内部声明变量或函数
"no-extra-boolean-cast": 1, //多余的感叹号转布尔型
"no-extra-semi": 1, //多余的分号
"no-extra-parens": 0, //多余的括号
"no-empty": 1, //空代码块
"no-use-before-define": [0, "nofunc"], //使用前未定义
"complexity": [1, 10], //圈复杂度大于10 警告
//常见错误
"comma-dangle": [1, "never"], //定义数组或对象最后多余的逗号
"no-debugger": 1, //debugger 调试代码未删除
"no-console": 0, //console 未删除
"no-constant-condition": 2, //常量作为条件
"no-dupe-args": 2, //参数重复
"no-dupe-keys": 2, //对象属性重复
"no-duplicate-case": 2, //case重复
"no-empty-character-class": 2, //正则无法匹配任何值
"no-invalid-regexp": 2, //无效的正则
"no-func-assign": 2, //函数被赋值
"valid-typeof": 1, //无效的类型判断
"no-unreachable": 2, //不可能执行到的代码
"no-unexpected-multiline": 2, //行尾缺少分号可能导致一些意外情况
"no-sparse-arrays": 1, //数组中多出逗号
"no-shadow-restricted-names": 2, //关键词与命名冲突
"no-undef": 0, //变量未定义
"no-unused-vars": 1, //变量定义后未使用
"no-cond-assign": 2, //条件语句中禁止赋值操作
"no-native-reassign": 2, //禁止覆盖原生对象
"no-mixed-spaces-and-tabs": 0,
//代码风格优化
"no-irregular-whitespace": 0,
"no-else-return": 0, //在else代码块中return，else是多余的
"no-multi-spaces": 0, //不允许多个空格
"key-spacing": [0, {
"beforeColon": false,
"afterColon": true
}], //object直接量建议写法 : 后一个空格前面不留空格
"block-scoped-var": 1, //变量应在外部上下文中声明，不应在{}代码块中
"consistent-return": 1, //函数返回值可能是不同类型
"accessor-pairs": 1, //object getter/setter方法需要成对出现
"dot-location": [1, "property"], //换行调用对象方法 点操作符应写在行首
"no-lone-blocks": 1, //多余的{}嵌套
"no-empty-label": 1, //无用的标记
"no-extend-native": 1, //禁止扩展原生对象
"no-floating-decimal": 1, //浮点型需要写全 禁止.1 或 2.写法
"no-loop-func": 1, //禁止在循环体中定义函数
"no-new-func": 1, //禁止new Function(...) 写法
"no-self-compare": 1, //不允与自己比较作为条件
"no-sequences": 1, //禁止可能导致结果不明确的逗号操作符
"no-throw-literal": 1, //禁止抛出一个直接量 应是Error对象
"no-return-assign": [1, "always"], //不允return时有赋值操作
"no-redeclare": [1, {
"builtinGlobals": true
}], //不允许重复声明
"no-unused-expressions": [0, {
"allowShortCircuit": true,
"allowTernary": true
}], //不执行的表达式
"no-useless-call": 1, //无意义的函数call或apply
"no-useless-concat": 1, //无意义的string concat
"no-void": 1, //禁用void
"no-with": 1, //禁用with
"space-infix-ops": 0, //操作符前后空格
"valid-jsdoc": [0, {
"requireParamDescription": true,
"requireReturnDescription": true
}], //jsdoc
"no-warning-comments": [1, {
"terms": ["todo", "fixme", "any other term"],
"location": "anywhere"
}], //标记未写注释
"curly": 0 //if、else、while、for代码块用{}包围
},
"env": {
"es6": true,
"node": true,
"browser": true,
"jquery": true
},
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
"plugins": [
//"react",//写react安装该插件
"eslint-plugin-html"
]
}