【小程序】小程序优化-代码篇

本文主要是从代码方面跟你们分享我本身在开发小程序的一些作法，但愿能帮到一些同窗。

前言

不知道你们有没有这种体会，刚到公司时，领导要你维护以前别人写的代码，你看着别人写的代码陷入了深深的思考：“这谁写的代码，这么残忍”

俗话说“不怕本身写代码，就怕改别人的代码”，一言不和就改到你吐血，因此为了别人好，也为了本身好，代码规范，从我作起。

项目目录结构

在开发以前，首先要明确你要作什么，不要一上来就是干，我们先把项目结构搭好。通常来讲，开发工具初始化的项目基本能够知足需求，若是你的项目比较复杂又有必定的结构的话就要考虑分好目录结构了，个人作法以下图：

• component文件夹是放自定义组件的
• pages放页面
• public放公共资源如样式表和公共图标
• units放各类公共api文件和封装的一些js文件
• config.js是配置文件

这么分已经足以知足个人需求，你能够根据本身的项目灵活拆分。

配置文件

个人项目中有个config.js，这个文件是用来配置项目中要用到的一些接口和其它私有字段，咱们知道在开发时一般会有测试环境和正式环境，而测试环境跟正式环境的域名可能会不同，若是不作好配置的话直接写死接口那等到上线的时候一个个改会很是麻烦，因此作好配置是必需的，文件大体以下：

首先是定义域名，而后在config对象里定义接口名称，getAPI(key)是获取接口方法，最后经过module暴露出去就能够了.引用的时候只要在页面引入 import domain from '../../config';，而后wx.request的时候url的获取方式是 domain.getAPI('')

代码健壮性、容错性

例子

代码的健壮性、容错性也是咱们应该要考虑的一点，移动端的项目不像pc端的网络那么稳定，不少时候网络一不稳定就决定咱们的项目是否能正常运行，而一个好的项目就必定要有良好的容错性，就是说在网络异常或其它因素致使咱们的项目不能运行时程序要有一个友好的反馈，下面是一个网络请求的例子：

相信多数人请求的方式是这样，包括我之前刚接触小程序的时候也是这样写，这样写不是说很差，而是不太严谨，若是可以正常获取数据那还好，可是一旦请求出现错误那程序能够到此就无法运行下去了，有些比较好的会加上faill失败回调，但也只是请求失败时的判断，在请求成功到获取数据的这段流程内实际上是还有一些须要咱们判断的，通常个人作法是这样：

在请求成功后小程序会进行以下判断：

• 判断是否返回200，是则进行一下步操做，不然抛出错误
• 判断数据结构是否完整，是则进行一下步操做，不然抛出错误

而后就能够在页面根据状况进行相应的操做了。

定制错误提示码

能够看到上面的截图的错误打印后面会带一个gde0或gde1的英文代码，这个代码是干吗用的呢，实际上是用来报障的，当咱们的小程序上线后可能会遇到一些用户发来的报障，通常是经过截图发给咱们，以前没有作错误提示码的时候可能只是根据一句错误提示来定位错误，可是不少时候误提示语都是同样的，咱们根本不知道是哪里错了，这样一来就不能很快的定位的错误，因此加上这样一个提示码，到时用户一发截图来，咱们只要根据这个错误码就能很快的定位错误并解决了，错误提示码建议命名以下：

• 不宜过长，3个字母左右
• 惟一性
• 意义明确

像上面gde表示获取草稿失败，后面加上数字表示是哪一步出错。

模块化

咱们组内的大神说过， 模块化的意义在义分治，不在于复用。 以前我觉得模块化只是为了能够复用，其实否则，不管模块多么小也是能够模块化，哪怕只是一个简单的样式也同样，并是不为了复用，而是管理起来方便。 不少同窗常常将一些公共的样式事js放在app.wxss和app.js里以便调用，这样作其实有一个坏处，就是维护性比较差，若是是比较小的项目还好，项目一大问题就来了。并且项目是会迭代的，不可能老是一我的开发，可能后面会交接给其余人开发，因此会形成的问题就是：

• app.wxss和app.js里的内容只会愈来愈多，由于别人不肯定哪些是没用的也不敢删，只能往里加东西，形成文件臃肿，不利于维护。
• app.wxss和app.js对于每一个页面都有效，可读性方面比较差。

因此模块化的意义就出来了，将公共的部分进行模块化统一管理，也便于维护。

样式模块化

公共样式根据上面的目录结构我是放在public里的css里，每一个文件命名好说明是哪一个部分的模块化，好比下面这个就表示一个按钮的模块化

前面说过模块化不在于大小，就算只是一个简单的样式也能够进行模块化，只要在用到的地方import一下就好了，就知道哪里有用到，哪里没有用到，清晰明了。

js模块化

js模块化这里分为两个部分的模块化，一部分是公共js的模块化，另外一部分是页面js的模块化即业务与数据的拆分。

公共js模块化

比较经常使用的公共js有微信登陆，弹窗，请求等，通常我是放在units文件夹里，这里经微信弹窗api为例：

如图是在小程序中常常会用到的弹窗提示，这里进行封装，定义变量，只要在页面中引入就能直接调用了，不用每次都写一大串。好比在请求的时候是这样用的

toast()就是封装的弹窗api，这样看起来是否是清爽多了！

业务与数据模块化

业务与数据模块化就是指业务和数据分开，互不影响，业务只负责业务，数据只负责数据，能够看到页面会比普通的页面多了一个api.js

这个文件主要就是用来获取数据的，而index.js主要用来处理数据，这样分工明确，相比以往获取数据和处理数据都在一个页面要好不少，并且我这里获取数据是返回一个promise对象的，也方便处理一些异步操做。

组件化

组件化相信你们都不陌生了，自从小程序支持自定义组件，能够说是大大地提升了开发效率，咱们能够将一些公共的部分进行组件化，这部分就不详细介绍，你们能够去看文档。组件化对于咱们的项目来讲有很大的好处，并且组件化的可移植性强，从一个项目复用到另外一个项目基本不须要作什么改动。

总结

这篇文章经过我本身的一些经验来给你们介绍如何优化本身的代码，主要有如下几点

• 分好项目目录结构
• 作好接口配置文件
• 代码健壮性、容错性的处理
• 定制错误提示码方便定位错误
• 样式模块化和js模块化
• 组件化

最后放上项目目录结构的代码片断，你们能够研究一下，有问题一块儿探讨：developers.weixin.qq.com/s/1uVHRDmT7…