小程序开发的一些细节，你有注意吗？

最近的弄的小程序差不多有点东西了，就来写一些关于小程序的感悟吧

01 前言

一般来说，我认为小程序是一个没有什么技术含量的东西，特别是现在有了组件库，而且小程序生态不断完善的情况下，只要对着文档慢慢写就好，就是时间的问题。然后这里也不是教大家怎么去写程序之类的，而是本人在经历过后的一些小建议。

02 技术选型

其实我觉得技术选型是非常重要的，直接关系到你后来的工作复杂度。怎么说呢？因为小程序的开发就是一个注重业务逻辑的过程，它与算法研究类的研发工作不同。小程序的质量高不高，用户体验好不好完全取决于你的页面设计，页面的交互。

所以我觉得在选型的过程中有几个特别值得注意的：

• 组件库支持
• 框架生态
• 框架语法

基本上就是这些，首先来说一下第一个关于组件库的支持。

组件库支持

现在的组件库特别多，基本上是可以满足我们日常开发的需要，之前我写了一篇关于《前端人应该掌握的工具》里面有写到，大家感兴趣的可以去看一下。

可以说组件就是整个程序的重要部分，因为假如你自己写的话肯定会花费大量的时间，即使你已经写出来了可能也就是自己能用，兼容性也会有问题。所以关于组件的开发就不推荐自己造轮子了，我们还没有这样的时间和精力。

但是我们也不能随便去选择一个组件库，我们必须要根据小程序的页面设计，详细列出里面所有的元素到底是采用何种方法/组件实现的，你选择的组件库是否所有都满足。还有一个重要的是，组件库的社区反馈如何，有没有很多不可避免的BUG在里面。

这一点自己也深有体会，因为组件的兼容性问题，自己往往会花费几天时间来做兼容和适配。现在我是选择了mpvue+vant的形式来写的。设计图上面的navbar是自定义而且是固定顶部的，一开始也没有怎么注意，觉得没有问题。但是，在我切换不同的机型的时候问题就出来了，各种对不齐的情况接踵而来，特别是苹果系列的机型（刘海屏）。

起初我想过自己去适配一下，但是发现头发一直掉，应该在提醒我不能这么搞了。后面就在github找到了一个可以适配的navbar组件，解决了我的问题。也从侧面说明不能自己造轮子。

框架生态

因为最终还是要编译成官方的小程序格式，难免会有一些问题。所以我们选择一个小程序框架的时候也要考虑到这个问题，看它与官方的区别在哪，有哪一些是不支持的，看一下社区对它的评价如何。

基本上我们选择一些用户反馈比较积极的就好，不要选一些新兴的框架，因为往往也是坑比较多，而且你有时候发邮件问他们几个世纪都不回你的。如何选择一个比较好的框架呢？可以看文章的最后github仓库，里面有很多关于小程序的资料，也有一些框架的排名和组件库选择。

框架语法

语法部分还不是最主要的，因为前端的语法都一样，那我说这个的目的其实是说小程序的开发语法与官方的语法有哪些不兼容的，要注意一下，一般文档都会给出来的。

目前小程序的开发都可以使用vue语法来编写，可以说是非常方便了，但是如果你不熟悉小程序的生命周期与vue的生命周期就可能会有一些问题。我遇到的问题就是怎么合理使用生命周期函数。有时候你的程序可能会报一些奇怪的错误，比如提示图片加载失败，然后图片又显示正常。其实这就是页面渲染的时候还没有识别到图片的原因，是后面加载的，这就是先后的问题。

03 开发步骤

前期就是一些架构设计以及技术选型的内容，前期的选择尤为重要，技术选型好，后面你会节省很多时间和工作量。

代码结构设计

开发步骤也要设计，你要规划一些目录结构，比如存放组件的、图片的、工具类函数的、页面类的等。虽然说我们的初始化项目都会有相应的目前结构，但是你也要在它的基础上进行稍微的改造。让我们的目前更加清晰。

一般来说我们就从我提到的组件、图片、工具、页面几个步骤出发。页面部分我们基本上不用怎么改，因为项目初始化都帮你设计好了。组件部分我们就新建一个组件文件夹，用于存放我们的自定义组件，方便后期的复用。值得注意的是，我们一定要写好组件，让我们的复用效率更高，可以通过传参的形式来控制组件的形态。

关于图片的存储我的建议就是可以从功能上来划分，比如tabbar的图片，navbar的图片，其他的图片也是按照自己的功能来进行划分，这样就显得逻辑结构清晰，后续的维护更加方便容易。

项目的配置

这一方面的话看你的具体业务需求怎么样，一般来说我们经常都会调用第三方库函数/接口，如定位等。现在我做的这一个就用到了腾讯地图的第三方接口，这里就不再详细展开。

我做的时候会出现域名不合法的情况，你需要在小程序后台进行域名的配置，报错信息都告诉你怎么配置了，把那个域名加上去就好。又或者你的后台请求接口有错误的话一般就是你的接口域名不是https协议，这就有点麻烦了，调试阶段可以在开发者工具的右上角详情部分，勾上不检验就好。

但是如果你要上线的话就需要有https的服务器放置你的接口了。

04、小结

好了，以上就是就本次项目的相关总结，但是项目本身还是没有完善的，我也是在早期的设计上面下了一些功夫，主要还是让自己在后面的开发过程中少一些BUG和错误，方便自己后期的维护。

其实业务类的小程序更要主要组件的开发和设计，因为很多页面都会公用一个组件，假如你是复制粘贴那也未尝不可，只是维护比较难而已。我们做每一个产品，在必不得已的情况下才会使用一些技巧性的东西，一般来说都会做成一个可伸缩、可维护的产品，也是对自己的要求。

小程序仓库：https://github.com/justjavac/awesome-wechat-weapp

本文使用 mdnice 排版