中专生到前端开发，编程改变人生轨迹 | 文末分享全栈小程序开发路线

大家好，我是王天，98年人，前端程序员。感谢好朋友小林关于向上社交、价值交换的分享，颠覆我以往认知，我果断加入鱼皮星球，靠近大佬，加速成长。

我的成长经历比较丰富，17岁揣200元北漂差点被骗。18岁零基础学编程，从事了 6 年前端开发，24岁转行前端讲师。从汽修专业的中专生到前端讲师，这七年编程彻底改变了我的人生轨迹，有了另一种生活。

我算是一个有想法爱折腾的码农，工作之余开发上线20余个小程序，用户累计10万，依靠着小程序赚到了技术变现第一桶金。在这个过程积累了丰富的小程序的开发经验，我后续在星球持续分享。

这篇主要分享三点（全文4000字，只对技术感兴趣的朋友直接拉到文末哈）

1、为什么加入鱼皮星球？

2、从汽修专业中专生转行程序员，再到前端讲师的经历。

3、上线20余个小程序后，总结的全栈小程序开发路线

一、为什么加入编程导航

1、什么是时候关注鱼皮的？

我关注鱼皮大佬挺早的，在2020年就关注鱼皮公众号了，鱼皮输出的内容是偏后端的，不在我技术栈内、大部分内容我都看不懂，但内容区别于传统的枯燥教程，鱼皮的内容人格化有趣可读性强。我就一直在关注鱼皮动态，从公众号、B站、到知识星球、再到创业。

2、为什么加入编程导航？

鱼皮在2022年刚做编程导航时我就关注啦，应该是一天时间内有1000多人加入知识星球，我简直被震惊啦~

我和鱼皮年龄相仿， 他这样牛逼的成绩，说实话当时我很羡慕甚至有点嫉妒，第一时间想的不是如何向上链接从鱼皮身上学习，而是拿起计算器算起鱼皮一天能挣多少钱，所以一直在在观望。

为什么会这样？

可能和我的性格内心自卑感有关，会主动和优秀的人保持距离，也不会想着和对方有什么交际，上学时害怕老师、担心课堂提问被抽到。工作后只会埋头做事，公司活动也不积极参加。在我的成长经历中一直都在和同段位的小伙伴玩。

为什么转变？

前两天看到小林在推荐鱼皮的知识星球，推荐语写的很真诚。同时在小林公众号了解到推荐鱼皮星球的原因，真是戳到我内心呀。以下是小林梦呓公众号截图

在我写这篇文章时，看到小林公众号又发了一篇文章，节选内容如下：

**"一切皆价值交互" **我佩服小林有这样的认知和格局。我决定踏出自己的舒适区，主动连接优秀的人，向小林一样去输出价值，影响别人。

二、中专生转行程序员

17岁，我在河南老家的一所技校学汽修，对未来最大的憧憬，是希望能像宣传海报上的学长一样，毕业进入一汽、大众、红旗、宝马这些头部车企工作。技校嘛，大家都清楚，就是一群调皮捣蛋、考不上高中的孩子在进入社会前的中转站，在这里没有学习，就是玩儿~ 我和同学们一起打架、逃课、去网吧。

揣200元北漂差点被骗

2015年暑假，学校组织到河北富士康打工，这是我第一次离开老家，对外面的世界满是憧憬。可进了工厂，第二天我就想回家了..... . 在车间里每个人一个小板凳，严格要求正襟危坐、不让交头接耳，如果违规被线长发现少不了一顿咆哮式的训诫，我实在受不了流水线压抑的环境，打算离开，但出来打工没两天，回家肯定被人嘲笑。

河北离北京很近，我就想着到北京看看，当时工作、住的地方都没确定，兜里就只有200多块钱，脑子一热只身一人到北京了。到北京当晚，200块就花了一半，20元吃了一份炒面，走了好远在胡同里找了一家宾馆，老板要100元，我给砍到了80元。那个房间应该是个家庭房，一张大床+一个小床，老板指着最小的一张床，让我只能睡着在这。

第二天就开始在58同城上找工作，没多久就接到电话，自称是北京东城一家酒店经理，说招服务员，工资8000以上，让我过去面试。我到了面试现场，那位经理穿着西装，手里拿着雪茄，坐在我对面说了一大堆话，有一句话让我印象深刻，他说在北京 一个月没有七八千都不够生活。

接着问我想不想在这上班，我使劲点头说想，他说要花800先买一身工作服才能上班。我说从工资里扣行嘛？他说不行，说这么好的工作在北京可不好找呀。我当时兜里是真没钱呀，要不然真给他了，后来工作多年后才知道，58上有很多这样打着招工幌子行骗的骗子。

后来遇到一个好心大哥，给我推荐了一个工作，在北京前门大栅栏酒店，做前台收银兼保安。自此开始了第一段2个月的北漂，暑假结束回到了学校。

18岁，零基础学编程，转行程序员。

假如一个青蛙在井底生活十几年，突然有一天跳到了地平面上，看到井底外的世界高楼林立、星光灿烂，如此耀眼，那他不甘于继续活在黑暗之中。

2016年，我厌倦了在技校浑浑噩噩的日子，打算学点什么，后来在姐姐的推荐下学编程，我知道改变命运的机会不多了，在编程培训班拼命的学习，每天除了8小时睡觉，其他时间都在趴在电脑上恶补计算机知识。

这是当时做的部分笔记

班里太吵，我就经常去图书馆自学

当时老师每天会留一个小作业，练习当天所学知识点。同学们很厉害，总能半小时内完成作业，而我先要背单词、抄写不认识的单词，然后再做课堂作业，做课堂作业也没思路实现，就去抄写别人代码，直到理解内化为自己的为止，做完作业基本是晚上十点多了。

因为学习进度太慢，我总是班里最后一个离开教室，然后坐末班车回到住处。

好在功夫不负有心人，我用了半年时间转行成功，一周的时间收到好几个offer，因为当时没学历不敢去北上广，就去了南京找工作。

我翻了邮箱，竟然找到当时offer邮件通知。

我在南京的公司是做安防行业的，经常出差做项目，免不了熬夜通宵写代码

2017~2019年，我一边工作一边自考顺利拿到毕业证，2020年再次北漂、同年实现工资翻倍。前端开发工作5年后，我转行前端讲师教授前端编程，目前已帮助几百人学习前端。

三、全栈小程序开发路线

大家好，我是王天，一个工作6年的前端程序员。在开发中有关前端的问题，都可以来问我哈 👉wangtian3111

我擅长的是小程序开发和技术变现，从2020年至今开发上线20于个小程序，矩阵用户超过10万+，变现10万左右。

以下是部分小程序截图，追风口做的小程序，基本是工具类型，再通过会员服务变现。用户来的快流失的也快。加上腾讯审核机制变动，大部分小程序被封了。

两年时间赚了10万，也不多哈，但在这个过程跑通了小小的商业闭环，从流量＊产品＊转换，都是我一人操手，积累技术能力同时赚了技术变现的第一桶金。

强烈建议有想法又懂技术的朋友，使用小程序开发，来打造一个属于自己产品。

小程序的优势：

1、无需下载和安装，用户可以直接在微信内使用，方便快捷。

2、开发成本低，属性html+css+js即可上手开发，
3、推广成本低，拥有微信开放能力，支持一键发好友、微信群。

4、js开发服务端，使用云开发 降低后端的学成本，前端用js写后端服务，快速开发一个动态的小程序。

因为篇幅有限，下面主要分享全栈小程序开发路线，我后续会在星球持续输出内容，完善全栈小程序开发手册。

1、具体路线

以下内容是结合我项目中实战经验，踩坑记录，大量时间学习小程序的积累，总结分享给大家。

学习路线包括前端基础、小程序开发框架、UI组件库、云开发、周边生态以及插件这几个纬度，学完这些，你也能全栈开发一个属于自己的产品。

各位小伙伴门，在开发中有关前端的问题，都可以来问我哈 👉wangtian3111

前端基础知识

1. 前端三件套 html、css、JavaScript
   
   前端无论框架如何更新迭代，底层的支持还是html、css、js。 推荐在菜鸟教程上学习，每天1小时,大概一周时间基本上手. 👉菜鸟教程 - 学的不仅是技术，更是梦想！
2. ES6 新特性

js 高阶使用, 提高开发效率,减少工作量 , 是前端面试必问的，对于新手来说建议先了解下promise的用途。推荐学习阮一峰老师的ES6 入门教程
3. ajax请求

前面说的html+css+js 只能满足静态页面的开发，要实现前后端数据交互，先了解下ajax的使用原理，后面学习小程序中请求方便快上手，推荐学习阮一峰老师的AJAX -- JavaScript 标准参考教程（alpha）

4. vue.js 语法、路由、生命周期等基础使用

学小程序开发为啥扯到vue了 ？ 因为小程序平台众多，加上各大互联网厂商技术封闭，小程序开发语法上没有统一标准，如果在抖音、微信、支付宝各发一个小程序，传统情况下代码写三遍，真是累死程序员啊。

可以使用多端开发框架解决这个问题，uniapp是一个基于vue.js的多端开发框架，可以实现一套代码发布多个平台，比如抖音、快手、支付宝、等小程序平台，也支持发布IOS、安卓系统。

如果你熟悉h5，但不熟悉vue和小程序

▼
text
复制代码
1. <font style="color:rgb(44, 62, 80);">看完这篇</font>[白话uni-app](https://uniapp.dcloud.net.cn/vernacular)
2. <font style="color:rgb(44, 62, 80);">DCloud与vue合作，在</font>[vue.js官网](https://cn.vuejs.org/)<font style="color:rgb(44, 62, 80);">提供了免费视频教程，也可以直达教程地址：</font>[https://learning.dcloud.io](https://learning.dcloud.io/)
3. <font style="color:rgb(44, 62, 80);">不需要专门去学习小程序的语法，uni-app使用的是vue的语法，不是小程序自定义的语法。</font>  

5. react.js基础使用

uniapp仅支持使用vue.js，而taro同时支持vue.js、react.js 开发多端项目。使用taro开发小程序，需要学习下react的基础使用

推荐学习：描述用户界面 – React

小程序框架

以下三个框架任意一个都能开发微信小程序，对于新人来说我个人更推荐使用uniapp开发，uniapp生态丰富，插件市场有很现成的工具，不必重复造轮子。即使不开发多端项目，使用uniapp也是不错的选择。

1. 微信原生 微信开放文档
2. uniapp（基于vue.js的多端开发框架）
   uni-app组成和跨端原理 | uni-app官网
3. taro（支持vue.js+react.js的多端开发框架） Taro 文档

uniapp、taro 框架设计都是基于微信小程序的，咱们没必要从头到尾都学习一遍，先学习通用的小程序开发能力即可，后面根据不同平台特性在针对学习。

打开👉 微信开放文档 学习以下章节

2.1 项目配置

▼
text
复制代码
    1. <font style="color:rgb(0,0,0);">tabbar</font>
    2. <font style="color:rgb(0,0,0);">navbar</font>
    3. <font style="color:rgb(0,0,0);">路由配置</font>

2.2 开发能力

▼
text
复制代码
    1. <font style="color:rgb(0,0,0);">组件封装、父子组件通信</font>
    2. <font style="color:rgb(0,0,0);">状态管理</font>
    3. <font style="color:rgb(0,0,0);">事件监听</font>
    4. <font style="color:rgb(0,0,0);">request请求 、API接口封装请求管理</font>
    5. <font style="color:rgb(0,0,0);">本地存储</font>

UI组件库（稳定且长期维护）

都2023年了，我看网上推荐小程序组件库还在推荐 colorUI、iview，这不是坑人吗？ 看看最近的更新时间都停留在2018年、2019年了，遇到问题都搜不到解决方案了。

下面是我一直都在用的小程序UI组件库，在使用人数、稳定性、更新频率上都是非常出色的

微信原生

▼
text
复制代码
1. <font style="color:rgb(0,0,0);">vantUI weapp 有赞出品 </font>[Vant Weapp - 轻量、可靠的小程序 UI 组件库](https://vant-contrib.gitee.io/vant-weapp/#/changelog)
2. <font style="color:rgb(0,0,0);">WeUI（微信官方出品）</font>[WeUI](https://weui.io/)

uniapp 多端开发框架

▼
text
复制代码
1. <font style="color:rgb(0,0,0);">uni-uni   

uni-app官网

uniapp 官方出品，稳定性强、组件少样式单

▼
text
复制代码
2. uview  

uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

基于uniapp的第三方组件库，组件全样式丰富

taro 多端开发框架

▼
text
复制代码
1. <font style="color:rgb(0,0,0);">taroUI  

Taro UI | O2Team

仅支持以react创建的项目,UI库不支持vue

开发工具

微信原生

微信开发者工具 微信开发者工具下载地址与更新日志 | 微信开放文档

taro

任意一个编辑器都行，我个人喜欢使用vscode开发
vscode下载地址👉 https://code.visualstudio.com/

uniapp

HBuilderX 👉HBuilderX-高效极客技巧

小程序性能优化

使用性能扫描工具

微信小程序提供了一个“体验评分”的工具插件，可以使用它获得微信小程序的一些性能数据和明显的缺陷，进而根据报告进行相应的优化。

1. 分包，控制代码包大小
2. 减少图片体积多使用cdn
3. 在列表渲染中巧用key值
4. 避免使用onPageScroll不当
5. 原生小程序下避免不当使用setData

Serverless 云开发

腾讯云开发

👉 微信开放文档
学习章节如下：

▼
text
复制代码
1. <font style="color:rgb(0,0,0);">云函数</font>
2. <font style="color:rgb(0,0,0);">云数据库</font>
3. <font style="color:rgb(0,0,0);">云存储</font>

uniapp-uniCloud

适配阿里云开发+腾讯云开发
👉 uni-app官网
学习章节如下：

▼
text
复制代码
1. <font style="color:rgb(0,0,0);">云函数</font>
2. <font style="color:rgb(0,0,0);">云对象</font>
3. <font style="color:rgb(0,0,0);">云数据库</font>
4. <font style="color:rgb(0,0,0);">dcloundBD 前端数据库组件</font>
5. <font style="color:rgb(0,0,0);">schema2code代码生成系统</font>
6. <font style="color:rgb(0,0,0);">云存储</font>

微信重要开放能力 | 第三方插件集成

支付&营销

支付、登录 是小程序重要能力，在微信官方文档 基础 | 微信开放文档 针对学习

▼
text
复制代码
1. <font style="color:rgb(0,0,0);">微信登录</font>
2. <font style="color:rgb(0,0,0);">微信支付</font>
3. <font style="color:rgb(0,0,0);">微信分享</font>
4. <font style="color:rgb(0,0,0);">webview</font>
5. <font style="color:rgb(0,0,0);">获取手机号</font>

插件

▼
text
复制代码
1. 腾讯地图sdk 👉 [微信小程序插件 | 腾讯位置服务](https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginOverview)
    1.  地图拾点 
    2.  地铁规划 
    3.  城市选择器
2. <font style="color:rgb(0,0,0);">uniapp 插件市场 （仅支持uniapp项目使用）  

生态丰富，插件全，建议自行搜索
👉 DCloud 插件市场

刚看到uniapp官方发布了一个chat的开源项目、接口免费，使用的3.5的能力，感兴趣的朋友可以研究研究

分享一句话作为结尾，你想拥有超出能力的东西，必须付出前所未有的的努力。