这篇文章，主要是想着把自己开发微信小程序的过程跟大家分享一下，希望对与初学的小伙伴有一定的帮助，避免踩坑。

背景

先说说背景吧，我为什么开发微信小程序，不得不说我最近再备考系统分析师考试，前期的学习笔记都已分享给大伙了，有一起考试的小伙伴希望能帮助到你们，初衷也是网上材料有限，看书本又分不清重点，所以就萌发了这个想法，基础部分已经完成了，剩下就是下午案例跟论文了，最近案例从网上找了一些历年的题型，想着怎么能更方便的看到题目？那就做个微信小程序？随时随地能看到题目，大伙也能看到最新的历年题型，目前只是准备了案例题，论文的题目后边再整理吧。

掌握技能

如何开发微信小程序，技术储备是什么，其实拿我自己来说吧，作为一个后端开发人员，其实自己已经有很长时间不亲自动手写代码了，最近一次还是2020年自己在一个自研项目中参与了部分的编码，现在只是做一些有关信息系统分析，需求管理，评估相关工作了，当然自己平时有时间也会写一些小东西，纯属兴趣了，自己在前端方面也是一个初级小白，首先就是前端的知识储备，html+css+js这些是开发小程序的基础，毕竟是前端的东西比较多，小程序也没有那么复杂，起码上手快，学完上边那些前端知识，能够独立开发一个前端页面，基本就可以上手了，我的经验是学这些东西上手很快，毕竟是做了多年后端开发，但是小白也不太难上手，多练理解即可，我是通过一个app实战项目去练习的自己前端知识，当时用的框架还是MUI，用H5开发的网页的那一套，刚好能用的上前端的知识，然后使用原生app去打壳，实际里边用到的是网页的东西，然后一个web项目就搞定了，安卓端跟IOS端，现在这种没有原生app开发资源的，依旧大量使用这种方式开发app，小程序的架构方式大体也是类似的，简单说就是网页通过外层容器JSBridge，去调用手机底层或者原生API，然后将结果返回给内部网页。

掌握一门前端的框架，vue.js（采用MVVM架构，这个系统分析师中也考过，好像是考的MVP），我自己也只是会有而已，深层的原理等哪天碰到问题，再去研究一下吧，我现在的定位就是熟练的拧螺丝的工人，对于如何开发实现应用，了解相应的技术实现，知道这技术能解决什么问题，怎么熟练使用就满足了。然后就是使用基于vue.js的uniapp框架了，因为有这些基础，后来做的app项目就是使用uniapp做的，好处就是效率高，学几天vuejs，就可以上手uniapp，而且他有大量的插件库，还是很香的，我的题库开发就是参考的其中一个插件库，基本2天左右就能搭好架子，主要是我的功能极其简单，涉及后端的，因为自己没有云主机，都需要花钱买的，我干脆模拟的JSON，放到了本地，当一个静态的，缺点就是维护起来比较费劲，每次变动你的版本也要升级，不像后端，你只需要有功能维护你的数据，不在修改前端代码，也就不用升级版本，除非有新功能上线，有些前端工程师不熟悉后端开发，也没关系，小程序也有云开发，以腾讯为例，微信小程序开发有一个云开发选项，可以不用自己搭建自己的服务器，服务器端使用的nodejs开发云函数，使用腾讯的云数据库（系统分析师考试中有考过），云存储，云函数和云托管等等云服务，就可以搞定了，等后边我也研究一下，目测肯定是收费的了，估计是可以免费试用吧。

说了这么多，不知道小伙伴们对于微信小程序开发的过程有没有一个大体的了解了。

踩坑之旅

1.公众号和小程序是两个平台

踩坑之旅来了，我注册了微信小程序号，下载了“微信开发者工具”，这个时候坑点就来了，第一次注册小程序只要按照步骤来，一点问题没有，第二天我退出了小程序，再找小程序的平台找不到了？？？

因为自己有公众号，搞了半天扫码登陆的一只选的公众号，没留意到小程序的选项，扫码后如下图：

2.不允许真机调试

上图中的红框按钮，提示不允许真机调试，后来找了下原因，说我的AppID不对，就是上边第一个原因，我因为公众号跟小程序号傻傻分不清楚，结果用的公众号的AppID，这个允许调试才怪了，然后uniapp在mainfest.json中也需要填写小程序公众号，启动“微信开发工具”去调试。

然后就是各种开发细节的小坑了，希望总结一下，后边犯了之后去哪找问题。

3.首页显示问题

uniapp的首页显示，在pages.json中，pages属性的第一个页面就是首页，里边注册的页面，一定要有相应的页面在系统中，不然编辑报错。

4.底层的tabBar不显示

我的目标就是不让下边的tabBar显示，使用visible属性在浏览器中调试的时候，没问题，不显示，结果放到微信小程序模拟器上，不起作用，不识别visible，后来干脆在tabBar的list里边放了两个无关紧要的页面，因为放到tabBar里的页面一般都是各个模块的首页，然后进入功能之后的详情页，或者其它非首页的页面，都不会显示下边的tarBar，那我就不把我下图的首页放在tabBar的list里了。

5.关于选中和切换后，样式不变化

描述下这个问题，左侧的叫leftTree吧，里边两个菜单系统分析师，系统架构师，这两个切换的时候，右侧上边的twoTab，“案例"，"论文"这两个按钮，选中状态不会切到第一个按钮上，在浏览器用H5调试没问题，能正常选中第一个“案例”按钮，放到微信模拟器上，切换左侧的“系统分析师"，"系统架构师”两个菜单，案例跟论文的选中状态死活切换不到“案例”上边！困扰了我很久，因为twoTab是用的插件写的，我仔细看了插件的问题，怀疑是监听的事件，监听到案例，论文的值没有变化，结果就没有把选中下标索引更新，只能是这个原因了，怎么改呢？我想了个最省事的方法，就是leftTree切换事件触发的时候，重新赋值twoTab，里边的内容，我加了个空格，用来区分，不然内容是一模一样的，就不会切换状态，加了空格之后这个bug算是解决了！

6.图片高度被压缩的问题

进入案例之后，里边会显示图片，如何保证里边的长图不被压缩？这个img被包裹在view里，我当时想是不是可以获取图片的高度，当图片加载完成的时候，然后在设置img的style属性的宽高？后来发现不可以，最后搜了各种答案，最终找到一个image属性的mode="widthFix"，宽度不变，高度自动变化，保持原图片的宽高比不变，完美解决图片被压缩的问题，当时你得先把image的style上的宽高属性给注释掉！让它在view中100%显示。

7.关于列模式快捷键

各种ide都有自己的列模式快捷键，基本是跟alt键有关系，HbuilderX的列模式快捷键也是很香，尤其是应对那种长字符串的拼接上！非常好用。按住alt竖着拉就可以了，取消的时候选中一行就可以，很香！

8.有关应有本地json的问题

小伙伴也都看到了，我并没有写任何后端的东西，而是引用的本地json，uniapp怎么引用本地json呢，就是放到js中，然后注册。

view界面中引用js如下：

然后js中需要导出注册一下，这个choose是定义在data.js中的一个函数，用来返回json数据的。

9.hbuilderX启动微信开发工具调试

需要启动下微信开发工具的，设置->安全->服务端口开一下，不然启动不起来，好像HbuilderX的账号还要登陆一下，及时启动不起来也没关系，手动打开“微信开发工具”，打开hbuilderX编译好的项目目录就可以，路径是：xxxx项目unpackagedistdevmp-weixin，这个目录就是uniapp编译好的微信小程序项目，直接用小程序导进去就可以在小程序模拟机上运行了！

10.真机调试报错

真机调试按钮点击之后，程序开始编译，然后出个二维码，扫描之后就能在真机上调试了，但是一般会报各种错误，这个时候一定要看错误信息的提示，基本就能解决了

11.分包问题

我也没怎么研究，因为我把数据放到本地了，有一些图片稍微有点大了，所有导致主包超过2M了，没法在真机调试了，解决方案就是uniapp的分包，我的偷懒做法？就是找画图软件重新等比例缩放了图片，使主包小于2M，就搞定了，关于分包以后可以在研究一下，毕竟小程序嘛，就突出一个方便快捷，不臃肿，不想app那样功能强大！

最后小程序搞完之后，点击上传，按照步骤注册名称，然后审核，审核后，在按照步骤添加开发者，上传代码在进行审核，可能需要1-7天时间，就可以上线了！

看到没一个小功能实现，就遇到这么些坑，也是我自己不够熟悉，好在都解决了，就等着程序审核上线了，不知道好不好过审，代码写的有点凑活，毕竟也就是用了2-3天加上晚上的时间，搞的一个小东东，熟悉了流程，以后可以在升级一些小功能！

小程序搞定了，审核通过，主要是比较简单，审核也快，里边有系分历年的考题，大伙可以关注公众号：Coding-9527，查看，也可以扫下边的二维码去看，最新的历年真题。