【微信小程序 | 实战开发】常用小程序框架介绍

简介: 【微信小程序 | 实战开发】常用小程序框架介绍

小程序框架


什么是小程序框架?


微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言,代码结构以及代码的运行机制是一样。但是他们也存在一些不同之处,最直观地来看,网站页面是运行在浏览器中,微信小程序是运行在微信中。此外,微信小程序能够做到与微信紧密相融,使得在一些功能上的开发更为方便。比如获取用户身份,因为微信账号实际上已经标识了用户身份,只需要调取微信的信息就能很方便地知道用户是谁。此外还有包括手机位置信息,使用手机存储等,借助微信这一平台,小程序都能达到近乎原生APP的操作体验。




前端的开发一般采用的是HTML+ CSS + JS这样的组合, 假设做一个网站或者小程序是建造一间房子,那么html搭建了房子的骨架,通过html我们可以给房子设置一些墙、柱子和门窗。这些我们称之为组件,顾名思义,是房子的组成部件。那么在实际的前端中,这些柱子和门窗就是图片、链接、输入框和按钮等这些组成一个页面的基本元素,有了这些也就有了这个页面的框架。


而CSS是用来对房间进行装修美化的,就像是把墙面涂上不同的颜色,确定好门窗的摆放位置,是一切看起来非常的赏心悦目。在实际的前端中,就是给每个页面元素加上样式,包括大小、颜色、位置、形状等等。通过css,我们的页面才有了漂亮的视觉效果。


js的作用则是让门和窗户动起来,给组件添加需要的动态效果,比如对鼠标点击的响应,动态地改变展示数据等功能。


通过html+css+js这三部分的配合,最终构成了一个完整的前端。那么小程序也是如此,在小程序中,html变为了wxml,css变成了wxss,这是因为在一些语法和用法上,小程序与普通的前端存在一些差别,但是他们每一部分负责的工作和他们之间的关系都没有变化,大家可以类比加以理解。


微信小程序的框架分为两层,分别是视图层和逻辑层,框架的视图层由WXML与WXSS编写,由组件来进行展示,负责小程序的外貌;逻辑层又称为AppService,由js编写,负责小程序的行为动作。因此,我们编写的代码主要是三部分:视图层、逻辑层以及他们之间的联系互动,这一联系具体就是视图层与逻辑层之间的交互。逻辑层将数据进行处理后发送给视图层,同时接收视图层的事件反馈。视图层将逻辑层的数据展示到界面,同时将视图层的事件发送给逻辑层。


微信小程序主流框架汇总


一、微信小程序官方框架MINA


weixin官方文档:





框架:

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。


二、uni-app


uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。 开发者使用 Vue 语法编写代码,uni-app 框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ/钉钉)、App(iOS/Android)、H5等多个平台,保证其正确运行并达到优秀体验。


特性:


开发者和案例更多:HBuilder装机量500万台,开发者社区月活百万,70多个QQ微信


群承载10万人。案例众多,uni统计月活10亿


性能更高(见评测)


更丰富的周边生态,插件市场数千款插件


提供比小程序原生开发更好的开发体验、更高的工程化效率


跨端抹平度更完善,且各端特色发挥更灵活,可真正实现一套代码多端覆盖,无需各端多头维护升级


权威认可:阿里小程序官方工具内置uni-app、腾讯课堂官方自制uni-app培训视频

三、组件化开发框架wepy

Github地址:

官网地址:





WePY 项目启动于 2016 年 11 月份, 是小程序最早的框架之一,是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征。


特性:


使用 Vue Observer 实现数据绑定


支持 Vue watch/computed/mixin 等特性


基于原生组件实现组件化开发


支持 TypeScript


四、 美团小程序框架mpvue


官方地址:



mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。


使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:


彻底的组件化开发能力:提高代码复用性


完整的 Vue.js 开发体验


方便的 Vuex 数据管理方案:方便构建复杂应用


快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload


支持使用 npm 外部依赖


使用 Vue.js 命令行工具 vue-cli 快速初始化项目


H5 代码转换编译成小程序目标代码的能力

目录
相关文章
|
5月前
|
人工智能 小程序 安全
小程序跨平台框架未来的发展趋势是什么?
小程序跨平台框架未来的发展趋势是什么?
419 128
|
8月前
|
机器人 数据安全/隐私保护 Python
企业微信自动回复软件,企业微信自动回复机器人,python框架分享
企业微信机器人包含完整的消息处理流程,支持文本消息自动回复、事件处理、消息加密解密等功能
|
6月前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
6月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
10月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1991 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
8月前
|
JSON 机器人 API
微信机器人自动回复插件,vx自动回复机器人脚本助手,python框架分享
这个微信机器人系统包含三个主要模块:主程序基于itchat实现微信消息监听和自动回复功能
|
10月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
1179 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
8月前
|
JSON 机器人 数据安全/隐私保护
微信自动聊天机器人, 微信自动回复机器人,python框架分享
这个微信机器人实现包含主程序、配置文件、工具函数和测试脚本四个模块。主程序使用itchat库
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
7329 38
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程