WXOPEN Club

微信小程序怎么制作自己的小程序 | 如何入门微信小程序开发，超详细学习指南大全

发布于 3 年前作者 dengfang4546 次浏览最后编辑 3 年前来自 share

作为一个从事微信小程序开发6年的程序员，我来说说如何学习小程序开发，在学习过程中遇到的问题以及阶段，我都亲自整理了一份超4万字的详细小程序学习指南，非常值得您收藏。

小程序学习指南大纲，包含以下几大部分，可以按步骤逐一学习：

一.小程序学习路线

主要介绍学习小程序前，需要掌握的基本知识，罗列出小程序文档当常用到的知识点，整理出小程序学习的三个阶段，循序渐进学习，从入门、进阶、高级学习什么知识都逻辑出来，让大家少走弯路，学习起来也不费劲有目标。

二.小程序官方资源

学习小程序开发，官方资源文档是必看必查的。小程序相关的官方资料，我都一一列了出来。

三.小程序框架

用原生小程序开发效率慢，很多非常成熟、跨平台、跨语言的小程序框架，生态丰富。介绍了热门和成熟的第三方小程序框架，让大家找到合适自己的框架。这部分我也细分为：开发框架工具、插件、功能组件。

四.小程序开源源码

学习小程序的基本知识和小程序框架是远远不够的，闭门造车还不如站在大佬的肩膀上成长，这一部分我总结了上百个开源源码项目，按行业类目进行细分，要学习开发哪个行业的小程序项目，都能快速找到。

五.小程序项目源码

开源项目作为学习提升，但还不能产生价值，开源源码也不是很完善。这一步会介绍一些完整的项目源码。

六.小程序运营

学习小程序开发能提升你的技能，如何运营一个小程序，这是踏出商业化道路的第一步，只会开发小程序，不能推广运营小程序，只能当一个工具人。

七.小程序赚钱案例

微信小程序已经是一个成熟的生态，每个行业都需要小程序，这一步是剖析成功的小程序商业案例，这些小程序有什么功能，如何推广，准对的是什么用户群体，如何盈利等，有技能会运营，还需要提升我们的认知，具备商业思维。

八.小程序流量主

流量主是小程序盈利最为常见的，也是被动收入的一种方式。如何开通流量主、流量主能赚多少钱，这部分会意义介绍。

这份学习路线并不完美，还在持续更新，与时俱进，与时代同行。

一.小程序学习路线

1.什么是小程序？

微信小程序无需下载、触手可及、用完即走、无需卸载

2.前言 – 学编程需要的特质

  • 定目标
  • 拼命执行
  • 不半途而废

3.学小程序前需要的知识基础

📚 小程序经常用到的前端知识点：

HTML

CSS

Javascript

4.如何学习微信小程序

多看官方文档，多看几遍，遇到问题时再看

  • 1.基础知识要过关，如：时间绑定、ajax请求、异步回调，搞清楚小程序外是怎么交换
  • 2.通读一遍官方文档，看看都有哪些东西，都能干什么
  • 3.多敲代码，看到例子、别人的demo下载下来运行，看原理和结构
  • 4.多写多看、熟能手巧

5.开发前必读

  • 1.开发前需要了解禁止类目和资质，看一下运营规范
  • 2.微信小程序需要https请求，需要准备备案域名：由于备案需要一定时间，要事先准备
  • 3.SSL证书准备
  • 4.服务器

6.小程序学习阶段

⭐️ 开发工具

6.1.小程序入门

6.1.1资源

6.1.2常用知识要点

  • 小程序框架
  • 全局配置和页面配置 JSON配置构成
  • 页面生命周期
  • WXML模板
  • WXSS样式
  • JS逻辑交互
  • 渲染层与逻辑层
  • 小程序的结构目录
  • 全局配置文件-pages字段
  • 全局配置文件-window字段
  • 全局配置文件-tabbar字段
  • rpx单位
  • 小程序组件
  • view 视图容器
  • 简单双向绑定
  • 数据绑定
  • 流程控制
  • 条件语句 if 和 else
  • 循环语句 for
  • swiper轮播图组件
  • button组件
  • checkbox组件
  • form组件
  • input组件
  • label组件
  • picker组件
  • radio组件
  • switch组件
  • textarea组件
  • 代码注释
  • 函数
  • 函数创建
  • 带参合不带参函数的区别
  • 点击事件
  • 变量
  • 变量的使用和初始化
  • 变量重新赋值
  • 变量命名规范
  • 全局变量和局部变量
  • css样式
  • class选择器
  • 常见机型适配问题
  • 视频组件video
  • 地图组件map
  • 自定义组件
  • 小程序API
  • wx.canIUse 判断当前版本是否可用
  • wx.getWindowInfo() 获取窗口信息
  • wx.updateWeChatApp() 更新客户端版本
  • wx.swtitchTab()路由 跳转到 tabBar 页面
  • wx.redirectTo() 关闭当前页面，跳转到应用内的某个页面
  • wx.navigateTo() 保留当前页面，跳转到应用内的某个页面
  • wx.navigateToMiniProgram() 打开另一个小程序
  • wx.showShareMenu() 显示当前页面的转发按钮
  • wx.onCopyUrl() 复制
  • wx.showToast() 消息提示框
  • wx.startPullDownRefresh() 下拉刷新
  • wx.pageScrollTo() 滚动
  • wx.request() 发起 HTTPS 网络请求
  • wx.downloadFile() 下载文件资源到本地
  • wx.uploadFile() 将本地资源上传到服务器
  • wx.requestPayment() 发起微信支付
  • 数据缓存
  • wx.setStorageSync()
  • wx.setStorage()
  • wx.removeStorage()
  • wx.getStorageSync()
  • wx.getStorageInfo()
  • wx.getStorage()
  • 图片功能
  • wx.saveImageToPhotosAlbum()
  • wx.getImageInfo()
  • wx.chooseMessageFile()
  • wx.chooseImage()
  • 视频
  • wx.chooseVideo()
  • wx.chooseMedia()
  • 音频
  • 相机
  • 富文本
  • 位置
  • wx.openLocation()
  • wx.getLocation()
  • wx.chooseLocation()
  • 文件
  • 登录 wx.login()
  • 用户信息
  • wx.getUserProfile()
  • wx.getUserInfo()
  • UserInfo()
  • 授权
  • wx.authorizeForMiniProgram()
  • wx.authorize()
  • 收货地址 wx.chooseAddress()
  • 订阅消息
  • wx.requestSubscribeMessage()
  • wx.requestSubscribeDeviceMessage()
  • 视频号
  • 微信客服 wx.openCustomerServiceChat()
  • 联系人
  • wx.chososeContact()
  • wx.addPhoneContact()
  • 剪切板
  • wx.setClipboardData()
  • wx.getClipboardData()
  • 拨打电话 wx.makePhoneCall()
  • 扫码 wx.scanCode()

6.2 小程序进阶

6.2.1资源

6.2.2 常用知识要点

  • 接口调用凭证
  • 小程序登录
  • 用户信息
  • 支付
  • 小程序码
  • 微信外部链接 URL Link
  • 客服

6.3 小程序高级

6.3.1 资源

6.3.2 要点

二.小程序官方资料

三.小程序框架

1.工具

1.1 基于Vue

1.2 基于React

1.3 基于Gulp

1.4 基于node

1.5 其它

1.6 px 转 rpx 插件

2.插件

3.组件

3.1 UI组件库

3.2 日历

3.3 富文本

3.4

...

1 回复
hxie
hxie1 楼3 个月前

这么好的内容竟然没人回复。。。