【全栈小程序开发路线】手把手教你入门小程序开发，小白必看！

我正在参加「掘金·启航计划」

前言

大家好，我是王天，一个工作6年的前端程序员。 我擅长的是小程序开发和技术变现，从2020年至今开发上线20于个小程序，矩阵用户超过10万+，变现10万左右。

小程序的优势：

1. 无需下载和安装，用户可以直接在微信内使用，方便快捷。
2. 开发成本低，属性html+css+js即可上手开发，
3. 推广成本低，拥有微信开放能力，支持一键转发好友、微信群、朋友圈容易传播。
4. js开发服务端，使用云开发 降低后端的学成本，前端用js写后端服务，快速开发一个动态的小程序。

因为篇幅有限，下面主要分享全栈小程序开发路线

1、具体路线

以下内容是结合我项目中实战经验，踩坑记录，大量时间学习小程序的积累，总结分享给大家。 学习路线包括前端基础、小程序开发框架、UI组件库、云开发、周边生态以及插件这几个纬度，学完这些，你也能全栈开发一个属于自己的产品。

前端基础知识

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和小程序

1. 看完这篇白话uni-app

2. DCloud与vue合作，在vue.js官网提供了免费视频教程，也可以直达教程地址：learning.dcloud.io

3. 不需要专门去学习小程序的语法，uni-app使用的是vue的语法，不是小程序自定义的语法。

4. 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 项目配置

  1. tabbar
  2. navbar
  3. 路由配置

2.2 开发能力

  1. 组件封装、父子组件通信
  2. 状态管理
  3. 事件监听
  4. request请求 、API接口封装请求管理
  5. 本地存储

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

都2023年了，我看网上推荐小程序组件库还在推荐 colorUI、iview，这不是坑人吗？ 看看最近的更新时间都停留在2018年、2019年了，遇到问题都搜不到解决方案了。 下面是我一直都在用的小程序UI组件库，在使用人数、稳定性、更新频率上都是非常出色的

微信原生

1. vantUI weapp 有赞出品 Vant Weapp - 轻量、可靠的小程序 UI 组件库
2. WeUI（微信官方出品）WeUI

uniapp 多端开发框架

1. uni-uni uni-app官网

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

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

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

taro 多端开发框架

1. taroUI Taro UI | O2Team

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

开发工具

微信原生

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

taro

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

uniapp

HBuilderX 👉HBuilderX-高效极客技巧

小程序性能优化

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

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

Serverless 云开发

腾讯云开发

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

1. 云函数
2. 云数据库
3. 云存储

uniapp-uniCloud

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

1. 云函数
2. 云对象
3. 云数据库
4. dcloundBD 前端数据库组件
5. schema2code代码生成系统
6. 云存储

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

支付&营销

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

1. 微信登录
2. 微信支付
3. 微信分享
4. webview
5. 获取手机号

插件

1. 腾讯地图sdk 👉 微信小程序插件 | 腾讯位置服务
   1. 地图拾点
   2. 地铁规划
   3. 城市选择器
2. uniapp 插件市场 （仅支持uniapp项目使用） 生态丰富，插件全，建议自行搜索 👉 DCloud 插件市场

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

最后

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