Skip to content

邂逅小程序开发

认识小程序

小程序(Mini Program)是一种不需要下载安装即可使用的应用,它实现了"触手可及"的梦想,使用起来方便快捷,用完即走

目前常见的小程序有哪些呢?

  • 微信小程序、支付宝小程序、淘宝小程序、抖音小程序、头条小程序、QQ小程序、美团小程序等等

时间线

各个平台小程序大概的发布时间线:

  • 2017年1月 微信小程序上线,依附于微信App
  • 2018年7月 百度小程序上线,依附于百度App
  • 2018年9月 支付宝程序上线,依附于支付宝App
  • 2018年10月 抖音小程序上线,依附于抖音App
  • 2018年11月 头条小程序上线,依附于头条App
  • 2019年5月 QQ小程序上线,依附于QQApp
  • 2019年10月 美团小程序上线,依附于美团App

为什么都要支持小程序

  • 第一:你有,我也得有

    大厂竞争格局中一个重要的一环

  • 第二:小程序作为介于 H5 页面和 App 之间的一项技术,它有自身很大的优势

    • 体验比传统 H5 页面要好很多
    • 相当于传统的 App,使用起来更加方便,不需要在应用商店中下载安装,甚至注册登录等麻烦的操作
  • 第三:小程序可以间接的动态为 App 添加新功能

    • 传统的 App 更新需要先打包,上架到应用商店之后需要通过审核(App Store)
    • 但是小程序可以在 App 不更新的情况下,动态为自己的应用添加新的功能需求

技术选型

原生小程序开发:

微信小程序:https://developers.weixin.qq.com/miniprogram/dev/framework/

  • 主要技术包括:WXML、WXSS、JavaScript

支付宝小程序:https://opendocs.alipay.com/mini/developer

  • 主要技术包括:AXML、ACSS、JavaScript;

选择框架开发小程序:

mpvue:

  • mpvue是一个使用Vue开发小程序的前端框架,也是 支持 微信小程序、百度智能小程序,头条小程序 和 支付宝小程序
  • 该框架在 2018 年之后就不再维护和更新了,所以目前已经被放弃

wepy:

  • WePY (发音: /'wepi/)是由腾讯开源的,一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序
  • 该框架目前维护的也较少,在前两年还有挺多的项目在使用,不推荐使用

uni-app 和 taro:

uni-app:

  • 由 DCloud 团队开发和维护
  • uni-app 是一个使用 Vue 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台
  • uni-app 目前是很多公司的技术选型,特别是希望适配移动端 App 的公司

taro:

  • 由京东团队开发和维护
  • taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用
  • taro 因为本身支持 React、Vue 的选择,给了我们更加灵活的选择空间
    • 特别是在 Taro3.x 之后,支持 Vue3、React Hook 写法等
    • taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼

小程序开发

小程序的核心技术主要是三个:

  • 页面布局:WXML,类似 HTML
  • 页面样式:WXSS,几乎就是 CSS(某些不支持,某些进行了增强,但是基本是一致的)
  • 页面脚本:JavaScript + WXS(WeixinScript)

安装

微信开发者工具下载地址:

使用 VSCode 开发

image-20230926162333095

项目结构

image-20230926162704712

初体验

image-20230926172950897

小程序的MVVM架构

MVVM 为什么好用呢?

  • DOM Listeners: ViewModel 层可以将DOM的监听绑定到 Model 层
  • Data Bindings: ViewModel 层可以将数据的变量, 响应式的反应到 View 层

MVVM 架构将我们从命令式编程转移到声明式编程

image-20230926173229237

常备不懈,才能有备无患