什么是微信小程序

• 微信小程序是腾讯2017年1月9日正式上线的一种基于微信的无需安装的应用程序

什么是基于微信?

简单粗暴的理解就是运行在微信中的应用程序, 如果没有安装微信则不能运行

什么是无需安装?

无需安装只是宣传噱头, 本质上小程序也是需要下载安装的，只不过微信官方对小程序安装的大小有严格的限制(单包2M/总包20M), 所以下载安装非常快, 以至于给用户一种无需安装的错觉

网页、原生APP和微信小程序对比

网页

• 运行环境: 浏览器(有浏览器就能运行)
• 优点: 传播速度快(输入网页地址即可使用), 开发成本低(一套代码即可运行在各个平台)
• 缺点: 系统契合度稍差(一些系统功能无法使用), 用户体验稍差(交互体验不如原生)

原生APP

• 运行环境:iOS/Android
• 优点:用户体验好, 系统契合度高(系统开放的功能都可以使用)
• 缺点: 传播速度慢(下载安装繁琐), 开发成本高(每个平台都需要一套单独代码)

微信小程序(介于网页和原生APP之间)

• 运行环境: 微信
• 优点: 用户体验好, 开发成本低, 传播速度快(扫码/聊天分享/微信搜索)
• 缺点: 系统契合度不如原生(只能使用系统和微信都开放的功能)

• 例如: 系统开放了拍照功能, 微信也开放了这个功能, 那么开发者就可以使用
• 例如: 系统开放了读取通讯录功能, 但微信没有开放, 那么开发者就不能使用

但是大家也不用担心, 微信开放的功能完全能满足市面上绝大多数应用的需求。

总结

• 微信小程序是一种介于网页和原生APP之间的应用程序
• 它既拥有原生APP良好的用户体验和良好的系统契合度, 又拥有网页较低的开发成本和极佳的传播速度
• 唯一值得注意的两点是:

• 微信小程序为了达到无感安装的效果有体积限制, 所以过于复杂的程序不太适合做小程序
• 微信小程序有一套自己的审核机制, 开发完的小程序必须经过腾讯审核之后才能上架

开发小程序要学习什么技术?

前面我们已经说过, 小程序是介于网页和原生APP之间的应用程序

在APP开发中

• 如果是Android APP, 用到的技术是: Java、Kotlin语言
• 如果是iOS APP, 用到的技术是: Object-C、 Swift语言

在网页开发中

• 用到的技术是: HTML、CSS、JavaScript

在微信小程序中

• 用到的技术是: WXML(定制版HTML)、WXSS(定制版CSS)、JavaScript

通过对比观察我们不难发现开发小程序我们需要学习的是定制版的HTML和CSS。

除了微信小程序?

其实现在市面上除了微信小程序以外, 还有:

• 2018年7月: 百度小程序上线, 运行在百度APP中
• 2018年9月: 支付宝小程序上线, 运行在支付宝APP中
• 2018年10月: 抖音小程序上线, 运行在抖音APP中
• 2018年11月: 头条小程序上线, 运行在头条APP中
• 2019年5月: QQ小程序上线, 运行在QQ APP中
• 2019年10月: 美团小程序上线, 运行在美团APP中
• … …

为什么大家都要上线自己的小程序：

• 资本的力量(例如文心一言)
• 用户抢占

如何开发其它小程序

当下存在的问题：

• 通过前面的学习, 我们已经知道除了微信小程序以外, 还有其它小程序(如: 百度小程序、支付宝小程序、抖音小程序等等)
• 每种小程序都有自己定制版的HTML和CSS, 所以我们使用微信定制的HTML和CSS编写的小程序, 是无法运行到其它APP上的

所以要想开发不同类型的小程序, 有两种选择：

• 把每种小程序定制的HTML和CSS以及开发工具都学习一遍, 针对每种小程序进行单独开发
• 借助第三方框架, 实现一劳永逸

常见小程序跨平台框架：

• Uni-APP: 是一个使用Vue开发的前端框架, 开发者只需编写一套代码, 即可发布到iOS、Android、Web以及各种小程序(支付宝/微信/抖音/百度等等)
• taro: 由京东团建开发和维护的开放式跨端跨框架解决方案, 支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用

!> 注意事项:

• 无论是Uni-APP还是taro, 虽然听上去很牛X, 但是在实际开发中, 还是存在比较多适配问题.

所以在企业开发中:

• 如果不涉及其它平台小程序, 建议使用原生微信小程序开发
• 如果涉及其它平台小程序, 建议使用Uni-APP或taro
• 如果涉及到原生APP, 还需要了解一些原生APP开发相关的知识, 并且更推荐使用Flutter

微信小程序开发准备

知识储备

• 必备:HTML/CSS/JavaScript(语法部分)

• 小程序中没有浏览器和文档(Document)对象的概念, 所以不需要BOM/DOM相关知识

• 可选:TypeScript/SASS/LESS (提升开发效率)

• 小程序支持TypeScript/SASS/LESS, 但是不会一样不影响我们开发

• 事半功倍: Vue/React (提升学习速度)

• 小程序中也有模块化/组件化/生命周期/指令等概念, 如果你学习过Vue或React, 会给你一种见到初恋的感觉

账号准备

• 由于微信开发者工具需要登录后才能使用, 所以需要注册一个小程序账号

• 账号注册指南:
• 账号注册地址:
• 个人开发者: 注册好账号后拿到AppId即可开干
• 团队开发者: 注册好账号之后还需要添加其它开发人员

开发者工具准备

• 下载地址:
• 开发工具介绍:

相关文档/Demo

• 开发指南:
• 开发文档:
• Demo案例: