微信小程序干货：和你交涉的两年里遇到的那些坑！

初心

老铁们，现在微信小程序是真的真的火爆啊，这种运营成本低且方便用户使用的小工具超级受小型企业欢迎，甚至一个公司会给自己的不同产品品类或部门专门制作有针对性的小程序工具，你们公司在已经在做了吗？

本文适合刚开始做小程序的新手，或公司还没开展这一模块的业务的同学。

我把我曾经遇到的一部分坑梳理出来（微信小程序bug确实多），希望能帮助大家提升一些工作效率，最终的目的只有一个：~~为公司贡献更多的价值！~~ 有更多时间来摸鱼！

1.开发框架选择

不论你是在用vue还是react都有相对应的框架可以选择，

vue可以选择uni-app:uniapp.dcloud.net.cn/

react可以选择taro:taro-docs.jd.com/docs/

我一直用的是vue，值得注意的是，一开始做小程序开发用hbuilder码代码，是因为用的hbuilder集成的小程序运行工具，后来安装了一些包并做了对应配置之后（uni-app官网有教程），可以在任意工具中做开发啦，这里我附上一些实现自动运行打包的安装包给大家做参考，具体的内容可以在uni-app官网的教程中按照步骤操作运行~

js 复制代码

 "dependencies": {
    "@dcloudio/uni-app-plus": "^2.0.1-36420220922002",
    "@dcloudio/uni-h5": "^2.0.1-36420220922002",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-i18n": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-360": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-alipay": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-baidu": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-jd": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-kuaishou": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-lark": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-qq": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-toutiao": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-vue": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-weixin": "^2.0.1-36420220922002",
    "@dcloudio/uni-mp-xhs": "^2.0.1-36420220922002",
    "@dcloudio/uni-quickapp-native": "^2.0.1-36420220922002",
    "@dcloudio/uni-quickapp-webview": "^2.0.1-36420220922002",
    "@dcloudio/uni-stacktracey": "^2.0.1-36420220922002",
    "@dcloudio/uni-stat": "^2.0.1-36420220922002",
    "@dcloudio/uvm": "^0.2.4",
    "@vue/shared": "^3.0.0",
    "core-js": "^3.6.5",
    "crypto-js": "^4.1.1",
    "echarts": "^5.2.2",
    "flyio": "^0.6.2",
    "less-loader": "^11.1.0",
    "mpvue-echarts": "^0.3.2",
    "mqtt": "^4.1.0",
    "nanoid": "^3.1.30",
    "node-scss": "^7.0.3",
    "regenerator-runtime": "^0.12.1",
    "sa-sdk-miniprogram": "^1.17.5",
    "stylus-loader": "^7.1.0",
    "uview-ui": "^2.0.31",
    "vue": "^2.6.11",
    "vuex": "^3.2.0",
    "wx-minicomponent": "^1.2.0"
  },
  "devDependencies": {
    "@babel/runtime": "~7.17.9",
    "@dcloudio/types": "^3.0.4",
    "@dcloudio/uni-automator": "^2.0.1-36420220922002",
    "@dcloudio/uni-cli-i18n": "^2.0.1-36420220922002",
    "@dcloudio/uni-cli-shared": "^2.0.1-36420220922002",
    "@dcloudio/uni-migration": "^2.0.1-36420220922002",
    "@dcloudio/uni-template-compiler": "^2.0.1-36420220922002",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.1-36420220922002",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.1-36420220922002",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.1-36420220922002",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.1-36420220922002",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.1-36420220922002",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "babel-plugin-import": "^1.11.0",
    "cross-env": "^7.0.2",
    "jest": "^29.1.2",
    "mini-types": "*",
    "miniprogram-api-typings": "*",
    "postcss-comment": "^2.0.0",
    "sass": "^1.55.0",
    "vue-template-compiler": "^2.6.11"
  },

2.一定要在开始做的时候就做分包处理！

小程序推荐主包大小只有1.5M，实际上可以到2M左右，但是如果你引入了一些图片、组件库、json文件之后，很容易就超了，也就无法上传发布了，

如果到时候再做分包处理是真的麻烦啊，里面好多路径可能都要相对应的改一遍，或者逻辑太多已经难以抽离了，

我也遇到过朋友说那种上线过的项目好几十个页面最后超了分包分到吐，好多地方报错出bug要一处一处的去效验，所以提前分包少走弯路~

分包规则：

1.主包中尽量只包含tabbar页面

把风险降到最低的好处就是：以后都不必担心主包过大的问题，即使以后项目越做越大主包需要引入一些比较大的组件也不用每次上线之前担心提不上去

所以只要能不放在主包中的就全部搞进分包，小程序tabbar必须在主包中，所以尽量只放这部分页面。

附上一个官方推荐的目录结构，其中'packageA'、' packageB'中的内容是分包页面，pages是主包页面,尽量按照规范写以后找起来也会比较方便

js 复制代码

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

2.主包中大一点点的图片尽量使用链接

这个目的也是防止主包过大，一般我们的项目如果一个图片超过15k就会选择使用链接地址

3.跳转问题：公众号或短信想直接跳分包怎么办？

从外部想要直接进入普通的分包页面是不行的，因为小程序的运行逻辑是必须先下载主包，才能进入分包。

不知道为啥这个问题在百度上我没有搜到，所以自己想了个办法解决。（有朋友有更好的解决方案就给我留言吧，感谢！）

在主包中加一个特定中转页用于外部直接想跳转到分包

就是还是先跳到主包，这里可以在这个页面做一些需要统一处理的操作，比如说解析scene值与登录等，然后传入特定参数来定位想要到达的分包页面。

后来发现小程序提供了一个独立分包的概念

给分包设置 "independent": true就可以实现跳过主包直接进入分包，使用这种分包方式有一些限制条件，附上链接自己去发现吧~developers.weixin.qq.com/miniprogram...

4.各种样式、标签失效问题

样式可能在安卓端好使在苹果端就不行、fixed失效、margin-bottom失效、输入框光标在真机无效问题等等，

这里我只能说：对症下药吧，不行就偷鸡，算好尺寸啥的，或者写一个空的div把高度撑起来，或者在组件库中找一些别人写好的组件然后稍微改吧改吧

这里草率了（对不起大家！！！）因为之前遇到很多问题都没有做记录，现在很难一一想起来（因为真的太多了），打算以后专门记录一下，积累到一定量就发出来做一个总结分享

5.console的妙用

微信小程序一些特定的功能需要上线之后进行线上真机测试，所以有的bug无法在开发时发现（或者上线之后出了bug后端扯皮说是前端的问题），这时候小程序的调试工具是无法看到请求结果与本地存储的，所以尽量在关键节点做console处理，以免出现问题之后无法尽快对应到点从而反复上线调试。
附上开发调试工具涉及的内容截图

最后感谢大家的观看，如果大家在实操中发现一些好的点子请给我留言，我都会一一观看并回复，万分感谢！