全栈小程序开发路线

news/2024/11/23 16:51:44/

目录

个人心得:

我的学习路线


个人心得:

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

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

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

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

小程序的优势:

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

2、开发成本低,属性html+css+js即可上手开发,

3、推广成本低,拥有微信开放能力,支持一键转发好友、微信群、朋友圈容易传播。

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

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

我的学习路线

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

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

前端基础知识

  1. 前端三件套 html、css、JavaScript
  2. 前端无论框架如何更新迭代,底层的支持还是html、css、js。 推荐在菜鸟教程上学习,每天1小时,大概一周时间基本上手.  👉菜鸟教程 - 学的不仅是技术,更是梦想!
  3. ES6 新特性
  4. js 高阶使用, 提高开发效率,减少工作量 , 是前端面试必问的,对于新手来说建议先了解下promise的用途。推荐学习阮一峰老师的ES6 入门教程
  5. ajax请求
  6. 前面说的html+css+js 只能满足静态页面的开发,要实现前后端数据交互,先了解下ajax的使用原理,后面学习小程序中请求方便快上手,推荐学习阮一峰老师的AJAX -- JavaScript 标准参考教程(alpha)
  7. vue.js 语法、路由、生命周期等基础使用
  8. 学小程序开发为啥扯到vue了 ? 因为小程序平台众多,加上各大互联网厂商技术封闭,小程序开发语法上没有统一标准,如果在抖音、微信、支付宝各发一个小程序,传统情况下代码写三遍,真是累死程序员啊。
  9. 可以使用多端开发框架解决这个问题,uniapp是一个基于vue.js的多端开发框架,可以实现一套代码发布多个平台,比如抖音、快手、支付宝、等小程序平台,也支持发布IOS、安卓系统。

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

  1. 看完这篇白话uni-app
  2. DCloud与vue合作,在vue.js官网提供了免费视频教程,也可以直达教程地址:https://learning.dcloud.io
  3. 不需要专门去学习小程序的语法,uni-app使用的是vue的语法,不是小程序自定义的语法。
  4. react.js基础使用
  5. uniapp仅支持使用vue.js,而taro同时支持vue.js、react.js 开发多端项目。使用taro开发小程序,需要学习下react的基础使用

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

小程序框架

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

  1. 微信原生   微信开放文档
  2. uniapp(基于vue.js的多端开发框架)
  3. uni-app组成和跨端原理 | uni-app官网
  4. 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
  2. uni-app官网

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

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

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

taro 多端开发框架

  1. taroUI
  2. Taro UI | O2Team

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

开发工具

微信原生

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

taro

任意一个编辑器都行,我个人喜欢使用vscode开发

vscode下载地址👉 Visual Studio Code - Code Editing. Redefined

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 👉 微信小程序插件 | 腾讯位置服务
  2. 地图拾点
  3. 地铁规划
  4. 城市选择器
  5. uniapp 插件市场 (仅支持uniapp项目使用)
  6. 生态丰富,插件全,建议自行搜索
  7. 👉 DCloud 插件市场  

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

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

 


http://www.ppmy.cn/news/210199.html

相关文章

JavaScript创建二维数组踩坑记录

需求:创建一个m*n且元素值为0的二维数组 碎碎念 1、 今天刷Leetcode时,遇见一个这样的需求,机智如我,定然不会通过双重for循环来创建,于是,我写了这样一行代码 const dimensionalArray new Array(m).fi…

联想 M7600d 激光一体机清零方法

1.开机→开前盖﹙屏幕显示:盖子被打开,关闭前盖﹚ 2.按﹙清除键/返回键﹚﹙屏幕显示:更换硒鼓?是、否﹚ 3.不理它,继续按﹙开始键﹚﹙屏幕显示:无任何显示﹚ 4.按一下﹙向上键﹚ ﹙屏幕显示:01﹚…

Photoshop史上最强更新,动动手指就能让AI替你修图

Photoshop 在最新的 Beta 版本中,融入了 Firely 智能 AI 创意填充功能,只要对图片进行简单地框选,就能实现生成对象、生成背景、扩展图像、移除对象以及更多创意功能,支持用自然语言输入指令,让 AI 替你完成创意填充。…

QLV转MP4

前段时间我一直在找TX的QLV转MP4软件,后来找到一款软件,分享给大家 https://ylsx.lanzouo.com/b030or8fi 密码:ffyu 时间:2022.1.31(亲测有效)

双冠家园新版腾讯QLV格式转换器,qlv格式转MP4,支持新版客户端

自从腾讯视频升级以后,qlv就无法完整转换,一直报错,废了很多方法方法都解决不了问题, 时隔一月之久,双冠家园QLV转换器,终于有消息了,发消息说是升级了 , 于是立马下手试了一下&am…

Image converter for LVGL 离线转换工具

一、链接 https://github.com/lvgl/lv_img_conv 二、环境准备: 1、检查node.js是否安装成功 node -v结果如下安装成功 2、从远程仓库拉去资源 新建一个文件夹,执行clone mkdir LVGLtoolcd LVGLtool/git clone https://github.com/lvgl/lv_img_conv.…

如何将qlv格式视频转换成MP4?这款功能极强的视频格式转换工具不要错过

现在各大播放平台都有自己的视频格式,尤其腾讯的QLV,下载了以后也只能用相应的播放平台软件才能看,一般的视频转换器还不能处理这些格式,那叫一个心塞 今天就给大家分享一个腾讯视频QLV转换器,操作非常简单 软件下载地…

Gscoolink 基石 GSV2016 HDMI接口芯片 TTL LVDS转HDMI2.0TX

GSV2016是100%纯国产产品 GSV2016TTL 转 HDMI2.0(TX) 可替代IT6615/IT6614 支持HDMI2.0 HDCP2.2/1.4 音频分离和Downscaling,同时支持LVDS和TTL接口。 产品目标应用为矩阵, 分配器切换器,条形音响,R 等。 适用于2to2 切换分配器&#xff…