小程序开发概述

合集 - 微信小程序(60)
1.小程序开发概述
2.创建第一个小程序3.微信小程序app.json文件4.微信小程序-sitemap.json文件5.微信小程序app.js文件6.微信小程序app.wxss文件7.微信小程序-project.config.json文件8.微信小程序-页面.json文件9.微信小程序-页面.js文件10.微信小程序-组件创建和使用11.微信小程序-组件-.json文件12.微信小程序-组件-.js文件13.微信小程序-WXSS学什么14.微信小程序-WXSS的书写格式15.微信小程序-新增RPX响应式单位16.微信小程序-什么是WXML17.微信小程序-WXML数据绑定18.微信小程序-WXML条件渲染19.微信小程序-WXML的hidden属性20.微信小程序-WXML列表渲染21.微信小程序-WXML列表渲染Key22.微信小程序-WXML包装元素23.微信小程序-WXS的作用和使用24.微信小程序-WXS独立文件25.微信小程序-WXS支持的语法26.微信小程序-小程序事件绑定27.微信小程序-小程序事件冒泡和事件捕获28.微信小程序-事件传递数据29.微信小程序-data和mark30.微信小程序-touches和changedTouches31.微信小程序-案例练习32.微信小程序-view组件33.微信小程序-text组件34.微信小程序-icon组件35.微信小程序-button组件36.微信小程序-image组件37.微信小程序-scrollview38.微信小程序-image组件-选择相册资源案例39.微信小程序-自定义组件40.微信小程序-自定义组件样式隔离41.微信小程序-自定义组件外部样式42.微信小程序-传递数据父传子43.微信小程序-传递数据子传父44.微信小程序-页面访问组件数据和方法45.微信小程序-组件通讯练习46.微信小程序-单个插槽47.微信小程序-多个插槽-具名插槽48.微信小程序-behaviors49.微信小程序-双线程渲染模型50.微信小程序-页面生命周期51.微信小程序-页面生命周期方法52.微信小程序-组件生命周期方法53.微信小程序-应用程序生命周期方法54.微信小程序-页面跳转Tabbar55.微信小程序-页面跳转navigator组件56.微信小程序-页面跳转wxAPI57.微信小程序-页面跳转数据传递58.微信小程序-常用弹窗59.微信小程序-Storage60.微信小程序-获取用户位置
收起

什么是微信小程序

  • 微信小程序是腾讯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, 会给你一种见到初恋的感觉

账号准备

开发者工具准备

相关文档/Demo

posted @   BNTang  阅读(247)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示