消费升级浪潮下，蛋糕一直在升级，但线下市场的寒冬仍在继续。那么，坚持口碑与品质的传统水果店，该如何依靠移动互联网盘活？基于移动互联网+社交裂变+电商APP，目前最可行的方案是开发一款属于自己的社交电商APP，进行线上销售。那么开发APP，如何进行有效运营？力谱云为您梳理并提供一站式拉新、裂变、复购全程APP营销攻略。

拉新 – 触达用户只是第一步

传统水果店主，普遍依靠店铺所在的社区口碑，进行每一个用户的触达，往往存在着促销活动难以及时触达用户的难点。因此，也有不少店主会通过加微信账号，建立社群，或广发朋友圈信息，进行促销活动的扩散，但总体存在刷屏过猛，涉嫌恶意骚扰，乃至被屏蔽的营销短处。

而小程序+微信公众号这一对拉新小能手，则完全不在怕的。首先，小程序随用随走的轻量级运营方式，非常适合进行初期的用户拉新。水果店可以设置奖励制度，鼓励到店用户，关注微信公众号，在菜单页面的小程序中进行下单，即送XX水果、或领取无门槛红包等方式，让用户果断关注下单。这样，运营者即可通过日常定期的营销活动推送，优质的水果鉴别干货文等，在公众号中即可进行用户营销。

如果店主已拥有广大的会员基础，而苦于运营、管理成本难题，则可采用重量级的运营武器——开发App，来进行深度用户运营。可通过力谱云的会员等级、积分、签到领红包、售后、客服等各个方面，深度优化用户消费体验，为后续复购提供粉丝基础。而这些运营功能，都是小程序与微信公众号，所无法给予的。目前，力谱云支持App+小程序+微商城+移动网站的一站式开发服务，让企业主用更少的技术投入资金，覆盖更广阔的移动蓝海渠道。

社交裂变 – 以老带新，深挖老用户价值

在传统水果市场中，依靠口碑与品质，固然能让老用户带来新用户，但是效果却不大。原因有二，一无利益基础，二无便利的消费平台，因此很难激励老用户吸引新用户进行消费，更难于变现。而社交裂变+App的强强联手，则一举改变了这一难题，在其中，目前最给力的获客变现模式，则非分销与拼团莫属。

1 分销 – 运营者可通过力谱云强大的运营管理后台，制定分销奖励制度，如新人下载App，老用户可得XX积分；新人消费，老用户获X%奖励金等策略，鼓励老用户转发商品链接，并分享给自己的微信/QQ好友，实现以老带新的裂变营销模式。

2 拼团 – 通过9.9元/西瓜等赚人眼球的大促活动，鼓励用户拉人进行拼购，这一模式受熟人关系影响，成团率更高，变现率也高。在618、双11等营销活动中，已成为目前最主流的裂变营销方式。目前，力谱云潜心研发APP营销模式，不仅支持拼购营销，也推出了一站式的社区团购方式，助力企业用最前沿的营销模式，不断开拓移动市场。

复购 – 定期营销，唤醒用户消费

复购，往往指用户对品牌或者服务的重复购买次数，复购率越高，则用户的忠诚度越高。随着获客成本的逐年激增，除了不放过每一个拉新机会，更多的企业也在试图，建立有效的用户唤醒机制，刺激老用户购买欲。

1 会员制建立 – 复购在于深挖老用户价值，若无会员体系，则一切化为空谈。首先，可通过力谱云APP开发平台的“会员”模式，借助会员积分、会员等级购买体系，打下复购基础；其次，可通过预付卡、购物卡等方式，鼓励用户充值XXX元增XXX元等模式，提升用户复购率。

2 营销活动推送 – 定期策划营销活动，并通过微信账号、社群、公众号、App进行活动推送，通过力谱云平台的秒杀、满减优惠、代金券、优惠套装等数十种营销工具，按活动/产品等需求，进行策略的变换制定，不断提升用户购物兴趣。

力谱云全周期运营：研发、运营、营销全hold

力谱云作为一款专业为电商企业主，提供集研发、运营、营销为一体的移动电商平台，一直致力于研发上，借力“SaaS+PaaS”的云计算模式，降低研发门槛，提升研发效率，为企业提供颠覆式的高性价比云开发服务。在运营及营销层面，则不断在大量市场验证、及具体企业实战案例的探索过程中，通过不断优化并迭代拉新、变现等运营&营销工具，帮助企业平台更富营销力、运营力。如果您的企业，正在尝试云集分销、拼多多拼购、生鲜配送、B2B裂变新渠道等多种前沿模式，选择力谱云，全周期助您轻松运营到底！

力谱云V3.6新上线啦！致力于APP开发的力谱云平台，以当前市场火爆的营销策略和客户的个性化需求为方针，奠定正确的APP开发基调，不断更新优化，更加符合客户的需求。在本期更新的APP开发版本中，力谱云新增了BBC商品分析报表、BBC多级区域代理商、BBC店铺商品审核规则、提现验证、信息流、BC积分商品设置等共计15项功能，另有其他细节调整。

BBC商品分析报表

功能描述：新增BBC商品分析报表，平台方可根据店铺筛选，查看每个店铺的数据

操作：查看“数据分析”→“商品数据分析”→“BBC 商品数据分析”

BBC 多级区域代理商

功能描述：BBC多级区域代理，根据店铺地址来计算代理收益；即按店铺地址所在区域，判定收益归属

操作：

商品管理→编辑商品信息→参与区域代理→设置代理收益基数
区域代理管理→代理商管理→添加并编辑代理商信息
移动端：

BBC商品审核

功能描述：BBC支持设置店铺上传商品审核规则，审核通过后才能在平台上显示

操作：

B2B2C管理→审核规则设置→全部自动审核/全部人工审核/部分自动审核

B2B2C管理→B2B2C商品管理→查看【店铺待审核商品列表】→通过/驳回，填写理由

提现验证

功能描述：会员、接单端、店铺提现，需输入对应账号的手机验证码

操作：财务管理→应收账款→提现→编辑提现申请信息，获取验证码→申请提现

注意：App用户需下载新版本，才能进行提现。

店铺时间设置

功能描述：店铺可以设置营业时间，自动开关店铺

操作：店铺管理→店铺信息管理→店铺营业设置→强制关闭店铺/设置营业时间

等级制团队分销

功能描述：等级制团队分销中，团队奖获得者的间接上级可获得培训奖

操作：等级制团队分销→等级制团队分销设置→简化版算法配置→设置→允许【间接上级获得培训奖】

供应链-订单信息隐藏

功能描述：供应链模式下，店铺方订单中，可隐藏收货人的地址和联系方式

代金券

功能描述：新增批量发放代金券

操作：代金券管理→B2C代金券管理→批量发放代金券→导入要发放的代金券

BC积分商品设置

功能描述：B2C商城支持设置积分商品

操作：B2C 商品管理→B2C商品管理→编辑商品信息→勾选积分商品，设置积分BC积分商品设置

移动端：

BBC店铺排序优化

功能描述：BBC 店铺列表管理，优化排序功能。点击【置顶排序】按钮，可编辑排序数字，为空的不参与排序，大于等于0可参与排序

注意：休息中的店铺也参与排序

操作：B2B2C店铺管理→B2B2C店铺列表管理→编辑置顶排序

积分、余额报表

功能描述：【积分明细记录】菜单变更为【积分统计报表】、【余额统计报表】。两个报表均可导出，报表主要展示会员的积分、余额变更前后的记录列表

信息流体验提升

功能描述：

图片和视频，进入详情页面，均支持直接滑动进入下一条。进入的该条为第一条，可不停下滑，展示的内容是列表中的下一条
支持录制 60s 视频
发帖内容详情显示已输入/可输入字数，可输入字数扩展到 1000
主题下的下一条全是该主题下的，关注下的下一条全是该关注下的
图片帖下滑，仅展示图片，视频帖下滑，下面仅展示视频
视频播放完成之后，增加重新播放按钮显示在屏幕正中央
用户可删除自己发的帖子；可展开全部评论后进行评论，也可直接参与评论
信息流新增店铺定位，可直接跳转地图导航；新增【商品】，可直接跳转商品页面
信息流标题与文案展示优化，点击【展开】，即可上下滑动查看整体文案
移动端：

收货地址优化

功能描述：收获地址优化，支持新样式，类似京东

固定省市模式：所有的三级联动形式都是新版省市区的选择样式

涉及页面：商品详情页的地址选择、收货地址编辑页面、快速注册页面

移动端：

返利设置菜单调整

功能描述：商品返利设置、收银台返利设置，转移至新⻚面——会员返利设置

BC管家婆

功能描述：BC管家婆，支持批量同步商品库存和商品订单功能

手机端：

PHP后台：

码云：

APP端地址：https://gitee.com/lim2018/dianyb
后台地址：https://gitee.com/lim2018/dianyb-admin

一开始被uni-app开发微信H5的wx问题困扰了，主要原因是不太理解uni-app的机制，后来不断摸索，尝试，也逐渐理解了当中的细节和原委，在这里和大家分享出来

概念,H5页面中
jssdk 为<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
unisdk 为<script src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>

注意要点

1.H5页面引入unisdk的作用是为了h5页面中用统一的uni对象和其它uniapp的vue页面相互沟通，直接跳转页面，传递参数等

2.如果uniapp发布的目标是微信mp，想用webview打开一个H5页面（可以判断浏览器是mp or 公众号 or app），html中的wx对象即为H5页面中引入的jssdk的wx对象，和微信公众号网页开发无区别

3.如果uniapp发布的目标是微信公众号H5, 虽然你在整个项目主页面的index.html中引入了jssdk，然而当你想在 uni的vue页面中使用wx对象，如home.vue的调用 wx.config(), 或者在index.html页面中调用wx.config() ,都会得到报错，因为wx对象是uni定义的另一个全局对象，而不是你期待的jssdk的wx对象，若确实使用jssdk的wx对象(在微信公众号or微信MP的webview中呈现整个项目)，就需要jweixin-module，如果H5是使用hash路由方式，那么只用wx.config一次即可，使用的例子
var jswx = require('jweixin-module/index.js')
jswx.ready()
jswx.config(...)
jswx.getLocation 使用即可

我通常这么做:
主项目main.js中
Vue.prototype.$wx = wx //uni的全局对象
isInWXWebview = window && window.navigator.userAgent.indexOf('MicroMessenger') > 0
if(isInWXWebview){ //在微信中，且为webview打开主项目
var jswx = require('jweixin-module/index.js')
jswx.ready()
jswx.config(...)
Vue.prototype.$wx = jswx //切换为微信jssdk对象
}
然后，在uni的vue页面中，this.$wx.getLocation 就可以用了

4.在微信开发者工具打开uniapp的mp，然后打开webview页面，在H5里面的console.log信息是不会打印出来的，得用公众号网页调试的方式来打开来查看

5.uniapp的webview发布为微信mp，运行时为webview，发布为H5，运行时为iframe，需要注意wx.config中的真正路径

6.微信公众号网页的分享是不能通过页面内的按钮触发的，只能提示右上角分享，同理，在mp的webview打开的网页中也是如此，可以提示用户微信mp右上角分享按钮触发分享；但是mp原生页面支持button触发分享，也就是uni的vue页面支持点击触发，所以可以这样变通处理：webview中的按钮点击后，navigateTo(mp原生页面)，在mp原生页面中button再触发分享，用这种方式你连网页中都不需要jssdk了, 而jssdk直接支持的方法就不需要这样了，wx.config成功后直接调用即可，如wx.getLocation

总结，你写在主页面index.html页面中的wx对象有可能不是jssdk的对象（当项目发布为H5时），而写在vue文件中的wx对象是uni的，用webview打开的页面html中的wx肯定是jssdk的

课程概述

本季度预计220课时，每周三和周六更新，每次更新10课时。

本季度为uni-app实战项目第2季度，将实战开发仿商城类app，其中会包括发布到安卓端app，IOS端app、微信小程序，H5等，另外还会涉及Weex（nvue），Vuex模块化管理，商城支付模块等。

课程学习链接入口：

uni-app实战商城类app和小程序开发视频教程

https://study.163.com/course/courseMain.htm?courseId=1209401825&share=2&shareId=480000001892585

或者进入网易云课堂，搜索uni-app即可看到

课程大纲见以下图！

课程学习链接入口：

uni-app实战商城类app和小程序开发视频教程

https://study.163.com/course/courseMain.htm?courseId=1209401825&share=2&shareId=480000001892585

或者进入网易云课堂，搜索uni-app即可看到

课程目录：（实际参考uni-app实战商城类app和小程序开发视频教程）

更新日期：2019-02-13;
新添加用户登陆/注册/找回密码/用户中心/修改用户资料/服务器真实api接口
h5web体验地址(这个不一定是最新版-如果要看最新版请下载源码自行编译)
使用体验百度网盘下载地址——提取码：p3ta
git源码下载地址

本功能自HBuilderX 2.0.3+起支持

Android平台各大应用商店已经要求API等级（targetSdkVersion）为26或以上。高版本Android系统完善了授权系统，获取设备信息（如imei）需要经过用户授权确认，弹出获取设备信息的授权提示框：

如果不在manifest里指定，HBuilder的打包默认targetSdkVersion是21，而HBuilderX已经是26了。targetSdkVersion变高就会引发动态权限问题。

目前5+ API获取设备信息是通过以下属性方式读取

• plus.device.imei
• plus.device.imsi
• plus.device.uuid

为了保证以上属性可用，应用需在启动时进行初始化赋值，原生层这时候就需要申请获取设备信息权限读取imei、imsi等信息。
即使应用没有调用以上API，应用启动时仍然执行此初始化赋值逻辑，导致应用启动时弹出上图所示的设备信息授权提示框。

为了避免应用启动时弹出设备信息授权提示框，新增plus.device.getInfo方法。当应用需要获取设备信息时调用此API，才会触发弹出授权提示框，不获取设备信息就不会弹出设备信息授权提示框。
建议使用5+ API的属性方式获取imei、imsi、uuid信息的代码调整使用plus.device.getInfo方法

至于属性和方法的区别，可能普通程序员看不懂，但做底层的会知道，属性就是启动时就必须初始化的。

原来的plus.device.imei、plus.device.imsi、plus.device.uuid等属性方式的API不推荐使用，后续会逐步废弃。
为了保证向下兼容，目前还可以使用，但不一定可以获取到正确的值。
取决于应用启动前是否已经获取设备信息权限：

1. 如果应用启动前没有获取设备信息授权（询问或拒绝状态），则无法获取设备信息，按权限被拒绝的逻辑处理。
2. 如果应用获取设备信息授权，则可以获取设备信息。

注意：调用plus.device.imei、plus.device.imsi、plus.device.uuid不会触发授权提示框

HBuilderX 自 2.0.3 版本开始，nvue文件同时支持两种编译模式：

• weex 模式：老模式，使用 weex组件，写法同weex标准写法。只能在 App 端中运行，部分 uni-app JS Api 不能使用。
• uni-app 模式：新模式，默认模式，使用 uni-app 基础组件，组件、jsapi写法同uni-app。支持app.vue里的全局样式；支持nvue页面编译H5和小程序端；可以使用绝大部分 uni-app Api 。uni-app模式也可以使用weex里的组件，比如list、refresh、recircle-list。

为什么要提供2个模式？

weex模式的组件、渲染机制是weex官方维护的。它的渲染性能其实与react native是一样的，在性能体验方面足以应付一线互联网公司的苛求。但它有4个问题：

1. 内置组件较少，或不完善。与小程序的组件相比，weex缺少太多内置组件，比如picker、map。而video等weex已内置的组件，也不够强大
2. API缺失严重。因为weex只是个渲染器，它调用设备能力或push等三方sdk，都需要原生开发。
3. 周边生态不完善。weex生态没有什么好的组件和模板。而uni-app的插件市场里众多优秀的组件和模板又无法用于nvue。
4. nvue无法多端开发，只能用于app。开发者在多端需要维护多套代码。
5. weex的排版思路和uni-app的vue差异有点多。比如weex不支持rpx。我们希望使用原生渲染，但尽可能多的兼容开发者的习惯。

weex的第二个问题，即能力问题，uni-app通过给nvue补充uni API和plus API，得到了解决。
但剩下的几个问题，需要uni-app的新编译模式才能解决。
我们要把小程序的所有组件，在weex的原生渲染机制上，重新实现一遍，让小程序的组件可以直接用原生来渲染。然后包括uni ui等扩展组件也都将兼容nvue。
现在插件市场的新闻模板，已经支持nvue新编译模式，它可以一套代码编译到App、小程序、H5全端。并且在App上是原生渲染的高性能体验。

之所以仍然存在weex模式，一是为了向下兼容，之前已经使用nvue的weex模式开发的app，不会因为HBuilderX的升级而导致页面错乱；二是为了方便weex的老用户迁移。

对于普通开发者，正常来讲应该选择uni-app编译模式。

注意nvue的uni-app编译模式，仍然是要求写nvue文件。

配置方式--uni-app编译模式或weex编译模式

在 manifest.json 的源码视图里配置是切换模式， manifest.json -> app-plus -> nvueCompiler 切换编译模式。

nvueCompiler 有两个值：

• weex
• uni-app

// manifest.json      
{      
    // ...      
     /* App平台特有配置 */      
    "app-plus": {      
        "nvueCompiler":"uni-app" //是否启用 uni-app 模式    
    }      
}     

差异说明

组件差异

在老的 weex 模式中，我们使用的是 weex组件 遵循的是 weex规范，如果使用 nvue 页面将不能跨端开发，仅能在 App 端运行。如果跨端那么意味着要实现vue 页面和 .nvue 页面两套代码。

代码示例

<template>  
    <div>  
        <text>测试页面</text>  
    </div>  
</template>  

而在 uni-app 模式中，我们将可以在 weex 组件的基础上使用 uni-app 的基础组件，目前已支持部分组件，并支持 .nvue 页面编译到 H5 和小程序端。

代码示例

<template>  
    <view>  
        <text>测试页面</text>  
    </view>  
</template>  

nvue的uni-app编译模式组件使用注意

默认页面滚动差异

在 weex 模式中，我们需要页面滚动，必须使用 <list> 组件或者 <scroller> 组件，这与我们开发小程序或者 web 的习惯并不符合。而在 uni-app 模式中，则可以像 vue 页面一样方便开发，不需要去声明额外的组件进行滚动，只要页面内容高度高于屏幕，就会自动滚动。实际上，在新模式里自动给每个nvue页面的根下套了一个scroller。

单位差异

weex的px是动态单位，并且不支持rpx。这与uni-app的设计不符。
在新模式中，rpx和px分别是动态单位和静态单位，与vue的设计一样。

Tips

• uni-app 模式示例可参考：新闻/资讯类App模板。

注意事项

API 注意事项

.nvue 支持大部分 uni-app API 。详情

css 注意事项

在 .nvue 中，有些 css 样式需要注意，与 web 开发中样式写法会有区别。

1、只有text标签可以设置字体大小，字体颜色
2、布局不能使用百分比
3、只能使用 class 选择器

/* 错误 */  
#id {}  
.a .b .c {}  
.a > .b {}  

/* 正确 */  
.class {}  

4、border 不支持简写

/* 错误 */  
.class {  
    border: 1px red solid;  
}  

/* 正确 */  
.class {  
    border-width: 1px;  
    border-style: solid;  
    border-color: red;  
}  

5、background 不支持简写

/* 错误 */  
.class {  
    background: red;  
}  

/* 正确 */  
.class {  
    background-color: red;  
}

6、.nvue 页面的布局排列方向默认为竖排（column），如需改变布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下生效。 详情
7、nvue的uni-app编译模式下，App.vue 中的样式，会编译到每个 nvue文件。非uni-app编译模式不会。对于共享样式，如果有不合法属性控制台会给出警告，可以通过条件编译屏蔽 App 中的警告。

/* 错误 */  
/*  控制台警告：WARNING: `border` is not a standard property name (may not be supported)  */  
.class {  
    border: 1px red solid;  
}  

/* 正确 */  
.class {  
    border-width: 1px;  
    border-style: solid;  
    border-color: red;  
}  

默认逻辑

若 manifest.json 配置文件中，未明确指定编译模式（即未配置app-plus -> nvueCompiler），在HBuilderX2.4以前，默认值为 weex 模式，2.4起默认值改为 uni-app 模式。

nvue编译为H5、小程序时注意

nvue页面编译为H5、小程序时，会做一件css默认值对齐的工作。
因为weex布局只支持flex，并且默认flex方向是垂直。而H5和小程序端，使用web渲染，web默认不是flex，并且设置display:flex后，它的flex方向默认是水平的。
所以nvue编译为H5、小程序时，会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。

本篇文章基于HBuilder iOS离线打包widget方式 oc和js 互调 ps：如果不是离线打包方式代码仅供参考

原理：js调用oc用的是H5+封装好的api，oc调用js 并不是真正的调用js方法，而是注册自定义监听事件，通过监听的方式获取oc传到js里的参数，从而达到oc调用js

js调用原生oc方法

• js调用oc类方法

  //LoginViewController是oc类 txt是要传的参数  
  plus.ios.importClass("LoginViewController").login("txt“);

• js调用oc对象方法

  //objectToJsonImage是oc对象方法  massageArray返回值  
  var Massage = plus.ios.importClass("LoginViewController");  
  var massage = new Massage();  
  var massageArray = massage.objectToJsonImage();

• js调用oc方法可以后的oc的返回值

oc 调用js

• oc调用js 比较复杂 看代码吧

  (NSMutableArray*)searchViews:(NSArray*)views{  
  
  NSMutableArray *frames = [NSMutableArray array];  
  //遍历view  
  for (UIView *temp in views) {  
  
      if ([temp isMemberOfClass:[PDRCoreAppFrame class]]) {  
  
          [frames addObject:temp];  
      }  
      if ([temp subviews]) {  
  
          NSMutableArray *tempArray = [self searchViews:[temp subviews]];  
  
          for (UIView *tempView in tempArray) {  
  
              if ([tempView isMemberOfClass:[PDRCoreAppFrame class]]) {  
  
                  [frames addObject:tempView];  
              }  
          }  
      }  
  }  
  //返回值 frames 为从该层级中找到的 PDRCoreAppFrame  
  return frames;  
  }  
  (void)evaluatingJavaScriptFromString:(NSString*)string{  
  
  UIWindow *window = [[UIApplication sharedApplication] keyWindow];  
  
  NSArray *views = [[[window rootViewController] view] subviews];  
  
  NSArray *frames = [self searchViews:views];  
  
  for (PDRCoreAppFrame *appFrame in frames) {  
      /*这里需要注意执行异步任务，在block内需要回到主线程来进行JS event的调用，但是如果还是使用  
       dispath_get_main_queue的话会造成调用JS有alert的话线程会死锁,具体原因也不是特别清晰，  
       在stackOverFlow中看到应该是JS和OC不同alert线程的原因  
       */  
      dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{  
          [appFrame performSelectorOnMainThread:@selector(stringByEvaluatingJavaScriptFromString:) withObject:string waitUntilDone:NO];  
  
      });  
  }  
  }  
  (void)fireEvent:(NSString*)event args:(NSString *)args{  
  NSString *evalStr = nil;  
  
  if (args) {  
      //创建js事件  
      evalStr = [NSString stringWithFormat:@"\  
                 var pathEvent = document.createEvent('HTMLEvents');\  
                 pathEvent.initEvent('%@', true, true);\  
                 pathEvent.eventType = 'message';\  
                 pathEvent.arguments = '%@';\  
                 document.dispatchEvent(pathEvent);",event,args];  
  }else{  
      evalStr = [NSString stringWithFormat:@"\  
                 var pathEvent = document.createEvent('HTMLEvents');\  
                 pathEvent.initEvent('%@', true, true);\  
                 pathEvent.eventType = 'message';\  
                 document.dispatchEvent(pathEvent);",event];  
  }  
  //return evalStr;  
  //调用上述方法  
  [self evaluatingJavaScriptFromString:evalStr];  
  }  
  //通过此代码调用  
  [self fireEvent:@"event_name" args:@"json"];  
  //js端代码  
  document.addEventListener('event_name', function(e) {  
      alert(e.arguments);  
  }, false);

HBuilderX 2.0.3+起支持

editorconfig是什么？

很多公司都要求各开发成员使用相同的编码风格，比如缩进是空格还是tab。

editorconfig是一套解决这个问题的业内通用规范，通过在项目下存放配置文件.editorconfig，并在这个配置文件中描述规则，然后把这个配置文件和其他代码一起提交git/svn，所有项目成员，都会遵循相同的编码规范。

HBuilderX直接支持该规范，无需下载插件，开箱即用。sublime、vscode支持该规范的话需要先下载插件。

editorconfig的官网是https://editorconfig.org/
editorconfig可以帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格。
editorconfig包含一个用于定义代码格式的文件和一批编辑器插件，这些插件可以让编辑器读取配置文件并依此格式化代码。
editorconfig的配置文件十分易读，并且可以在各个操作系统、编辑器下工作。

editorconfig的配置文件是怎样的？

以下是一个用于设置Python和JavaScript行尾和缩进风格的配置文件。

# EditorConfig is awesome: http://EditorConfig.org  

# top-most EditorConfig file  
root = true  

# Unix-style newlines with a newline ending every file  
[*]  
end_of_line = lf  
insert_final_newline = true  

# 4 space indentation  
[*.py]  
indent_style = space  
indent_size = 4  

# Tab indentation (no size specified)  
[*.js]  
indent_style = tab  

# Indentation override for all JS under lib directory  
[lib/**.js]  
indent_style = space  
indent_size = 2  

# Matches the exact files either package.json or .travis.yml  
[{package.json,.travis.yml}]  
indent_style = space  
indent_size = 2

案例

很多开源项目都用到了editorconfig

比如jQuery, jQuery在Github上的.editorconfig配置文件如下：

root = true  

[*]  
indent_style = tab  
end_of_line = lf  
charset = utf-8  
trim_trailing_whitespace = true  
insert_final_newline = true  

[package.json]  
indent_style = space  
indent_size = 2

如上，可以看到，JQuery配置了：编码格式、缩进风格等

在哪里存放配置文件

当打开一个文件时，editorconfig插件会在打开文件的目录和其每一级父目录查找.editorconfig文件，直到有一个配置文件root=true。

如果一个工程中出现多个配置文件，EditorConfig配置文件的读取层级是自上而下的，最深层的配置文件，最后读取。配置规则也是 按照读取的顺序来生效，所以路径上离代码最近的配置规则，优先级最高。

相对于其他开发工具（如vscode），HBuilderX对editorconfig更完善。在其他工具中，项目外层如果有editorconfig文件，也会影响这个项目，经常让人莫名其妙。HBuilderX没有这个bug。

文件格式详情

editorconfig文件使用INI格式（译注：请参考维基百科），目的是可以与Python ConfigParser Library兼容，但是允许在分段名（译注：原文是section names）中使用“and”。
分段名是全局的文件路径，格式类似于gitignore。斜杠/作为路径分隔符，#或者;作为注释。注释应该单独占一行。editorconfig文件使用UTF-8格式、CRLF或LF作为换行符。

通配符

特殊字符可以用\转义，以使其不被认为是通配符。

支持的属性

注意

1. 在HBuilderX内， 所有的属性名和属性值对大小写敏感。通常，如果没有明确指定某个属性，则会使用编辑器的配置，而editorconfig不会处理。
2. 推荐不要指定某些editorconfig属性。比如，tab_width不需要特别指定，除非它与indent_size不同。同样的，当indent_style设为tab时，不需要配置indent_size，这样才方便阅读者使用他们习惯的缩进格式。另外，如果某些属性并没有规范化（比如end_of_line），就最好不要设置它。
3. 如果你不需要editorconfig的功能，可以在工具-设置中关闭这个功能。

HBuilderX 启用或关闭editorconfig配置

在【设置】中，有个editorconfig开关，您可以自由选择开启与关闭.editorconfig

eslint-js

如何配置选项？

选项配置文件是.eslintrc.js，选项对应说明如下：

  module.exports = {  
      "plugins": [],          //插件  
      "env": {  
          "browser": true,  
          "node": true  
      },  
      "parser": "esprima",    //指定解析器  
      "parserOptions": {},      
      "rules": {}             //规则  
  };

更多配置说明可以参考options

如何增加规则？

规则简介

官方规则列表

规则设置：

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

HBuilderX增加js校验规则

修改.eslintrc.js文件，添加规则，比如:

  module.exports = {  
      "plugins": [  
          "html"  
      ],  
      "parser": "esprima",  
      "parserOptions": {  
          "ecmaVersion": 2018,  
          "sourceType": "module",  
          "ecmaFeatures": {  
              "jsx": true  
          },  
          "allowImportExportEverywhere": false  
      },  
      "rules": {  
          "camelcase": 2,           //强制驼峰法命名,  
          "indent": [2, 4],         //缩进风格  
          "id-match": 0,            //命名检测  
          "init-declarations": 1,   //声明时必须赋初值  
          "no-undef": 1,            //不能有未定义的变量  
      }  
  };