Uni-app学习从0到1开发一个app——(1)初步了解各种小程序开发框架

news2024/10/5 15:25:50

文章目录

  • 0 引入
  • 1、小程序常用框架
    • 1.1、 mpvue
    • 1.2、 mpvue
    • 1.3、 Tina.js
    • 1.4、 WePY
    • 1.5 微信官方
    • 1.6 TouchUI WX
  • 2、uin-app
  • 3、引用


在这里插入图片描述

0 引入

uin-app官网地址:https://uniapp.dcloud.net.cn/

最近对于小程序莫名的感兴趣起来,索性就从uni-app开始吧


1、小程序常用框架

1.1、 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 代码转换编译成小程序目标代码的能力
Github:https://github.com/Meituan-Dianping/mpvue
官网:http://mpvue.com/

1.2、 mpvue

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。我要没记错的话,是最近刚刚开源的。
使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、App 端等)运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能,有效地提升了开发体验和开发效率。最新的支持Vue3.

官网:http://taro.aotu.io/
GitHub: http://github.com/nervjs/taro

1.3、 Tina.js

Tina.js 一款轻巧的渐进式微信小程序框架。
特性: 轻盈小巧。 极易上手,保留 MINA (微信小程序官方框架) 的大部分 API 设计;无论你有无小程序开发经验,都可以轻松过渡上手。 渐进增强,既有状态管理器,也有路由增强,还可以自己编写插件。

Tina.js 开源框架地址:https://github.com/tinajs/tina

1.4、 WePY

WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions 的引入都是为了能让开发小程序项目变得更加简单,高效。特性:

  • 类 Vue 开发风格
  • 支持自定义组件开发
  • 支持引入 NPM 包
  • 支持 Promise
  • 支持 ES2015 + 特性,如 Async Functions
  • 支持多种编译器,Less/Sass/Styus、Babel/Typescript、Pug
  • 支持多种插件处理,文件压缩,图片压缩,内容替换等
  • 支持 Sourcemap,ESLint 等
  • 小程序细节优化,如请求列队,事件优化等
Github :https://github.com/Tencent/wepy
官网:https://tencent.github.io/wepy

1.5 微信官方

微信官方开发文档

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。在刚接触微信小程序的时候,就是官方提供的这个框架,其实该框架的思想和vue还是有相似之处,正所谓万变不离其宗。只不过这个框架就是直接使用微信小程序所需要的wxml、wxss等文件,而其他框架最终打包生成的文件才是官方所需要的。所以我建议就是初学者,还是可以先使用或学习下该框架,更能直接的了解小程序和学习。所以初学者值得推荐。

1.6 TouchUI WX

地址:https://link.zhihu.com/?target=https%3A//github.com/uileader/touchuiwx

主要特点:

  • 1.组建扩充:增加了30多种常用的组件用于官方组件的补充。
  • 2、功能扩充:兼容阿里的iconfont图标库,海量矢量图标随意使用;补充了常用样式库、支持less语法、支持全局配置主题色等
  • 3、开发体验改善:四文件方式改为单文件方式,通过VSCode编辑器+插件的方式开发,拥有web开发体验;
  • 4、小程序转为H5应用:可以与H5开发框架TouchUI工程相互转换,发布成webApp。开发一套代码,拥有两套应用。

2、uin-app

uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
关于uin-app随着发展历程,网上对其褒贬不一:有人说她文档混乱,开发起来各种bug,最后还会放弃。


3、引用

1、2023年了,uniapp发展的怎么样了?


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/588732.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

spring boot使用elasticsearch分词,排序,分页,高亮简单示例

目录 1. 创建ES实体2. 创建查询实体3. 查询方法实现3.1 核心代码3.2 构建查询条件3.2.1 关键词分词 3.3 高亮处理 4.完整查询代码展示 记,写一个简单的es分词demo,es版本6.8.12 如果使用es7有些方法可能会有所改变,请参考7的文档 es安装教程:…

PMP-识别相关方的重要性

一、为什么要识别相关方 每个项目都有相关方,他们会受项目的积极或消极影响,或者能对项目施加积极或消极的影响。有些相关方影响项目工作或成果的能力有限,而有些相关方可能对项目及其期望成果有重大影响。项目经理和团队正确识别并合理引导所…

Apache的日志分割

一、日志分割的作用 我们知道当服务安装完成以后,都会在相关服务下有一个logs文件里面有着访问日志和错误日志。访问日志可以帮我们记录访问者的信息,错误日志一般在服务搭建,服务配置,启动时能够快速寻找错误原因的日志&#xf…

堆的应用(堆排序、TOP - K问题)

前言 🍎 时间复杂度: 🥝 堆排序的最坏时间复杂度为 :O(n*lg(n)) 🥝 TOP - K问题的最坏时间复杂度为:O(n*lg(k)) 🍁前面我们学习了二叉树、以及堆的结构,也用顺序表的结构成功的把堆的…

【uni-app】使用外部组件不显示报错组件未找到解决方案

文章目录 前言一、问题描述二、温馨提示总结 前言 大家好,今天和大家分享一下uni-app使用外部组件不显示报错的一个解决方案,希望能够帮助到大家。 一、问题描述 我在使用uni-app在开发项目时引入了一个外部的组件库,刚开始引入的时候还是…

【复习笔记】FreeRTOS(二)创建和删除任务

本文是FreeRTOS复习笔记的第二节,创建和删除任务,使用的开发板是stm32f407VET6,创建两个任务,task1负责闪烁LED,task2负责按键控制,当按键按下时task1停止执行,任务的状态显示到TFT显示屏和串口…

【数据库系统及应用】— 日志、故障恢复、事务、并发控制、调度、检查点

日志文件是用于记录__________。 A、数据操作 B、程序运行过程 C、程序执行结果 D、对数据的所有更新操作 下列说法正确的是__________。 A、事务故障可以通过运行日志进行恢复 B、介质故障只需将备份恢复到系统中即可实现正确性 C、检查点是指检查发生故障并进行恢复的时刻点…

MySQL 对日期使用 DATE_FORMAT()函数

文章目录 DATE_FORMAT()函数显示今天是星期几只显示年月显示当前时间的分钟数和秒数 DATE_FORMAT()函数 前面使用日期时间函数,获取到的要么是 yyyy-mm-dd 形式的日期,要么是 hh:MM:ss 形式的时间,或者是 yyyy-mm-dd hh:mm:ss 形式的日期及时…

论文解读 | ICRA2022:用深度贝叶斯算法来估计ICP的协方差

原创 | 文 BFT机器人 01 研究背景 在点云处理中,ICP算法是一种常用的点云配准方法,通过将两个或多个点云对齐,可以进行后续的建模、识别和跟踪等处理。 然而,在ICP算法中,协方差估计起着非常重要的作用,它…

网络安全基础免杀

1. 会话提升的几种方式2. armitage的熟悉3. handler生成监听器的方法4. 防止会话假死5. 控制台设置编码6. upx加壳7. msfvenom木马payload持久化8. msfvenom木马编码 正文 免杀1 1. 会话提升的几种方式 python -c "import pty;pty.spawn(/bin/bash);" 会话提升 se…

linuxOps基础_linux文件打包压缩与解压缩

linux打包压缩概念 默认情况下,Linux的压缩概念一次只能压缩一个文件。针对多文件或文件夹无法进行直接压缩。所以需要提前对多个文件或文件夹进行打包,这样才可以进行压缩操作。 打包 1.txt 5MB 2.txt 10MB 3.txt 15MB1.txt 2.txt 3.txt 打包…

为kong网关添加key-auth插件实现安全认证

官方指导文档:https://docs.konghq.com/gateway/latest/get-started/key-authentication/ 一、新建一个用户 这里我们新建一个usernameluka的用户 [rootmin ~]# curl -i -X POST http://localhost:8001/consumers/ \ > --data usernameluka HTTP/1.1 201 Cr…

JavaEE HTTP状态码 HTTP数据报的构造

HTTP状态码HTTP数据报的构造 文章目录 JavaEE & HTTP状态码 & HTTP数据报的构造1. HTTP状态码1.1 200 - OK1.2 404 - Not Found1.3 403 - Forbidden1.4 500 - Internal Server Error1.5 504 - Gateway Timeout1.6 302/301 重定向 2. 构造HTTP请求2.1 浏览器搜索栏输入u…

聚焦2023北京安博会,超高清安防应用将成潮流

(1)2023北京安博会 中国安全防范产品行业协会主办并承办的第十六届(2023)中国国际社会公共安全产品博览会(Security China 2023),将于2023年6月7~10日在北京首钢会展中心开幕。安博…

面试阿里测开岗失败后,被面试官在朋友圈吐槽了......

前一阵子有个徒弟向我诉苦,说自己在参加某大厂测试面试的时候被面试官怼得哑口无言,场面让他一度十分尴尬 印象最深的就是下面几个问题: 根据你以前的工作经验和学习到的测试技术,说说你对质量保证的理解? 非关系型…

Jenkins+JMeter实现自动化,性能压测玩转CICD!

目录 前言: 准备工作 编写Jenkinsfile 编写JMeter脚本 编写 Dockerfile 总结 前言: 性能压测是应用程序开发中不可或缺的一环。它通过模拟应用程序在真实环境下的负载情况,从而检测系统在高负载下的性能表现。而随着依托云架构部署业务的不…

2022年长三角高校数学建模竞赛B题齿轮箱故障诊断解题全过程文档及程序

2022年长三角高校数学建模竞赛 B题 齿轮箱故障诊断 原题再现: 齿轮箱是用于增加输出扭矩或改变电机速度的机械装置,被广泛应用于如汽车、输送机、风机等机械设备中。它由两个或多个齿轮组成,其中一个齿轮由电机驱动。电机的轴连接到齿轮箱的…

大数据 Ranger2.1.0 适配 Kafka3.4.0

Ranger2.1.0 适配 Kafka3.4.0 官方说明POM代码说明 根据官方说明Kafka3.0以上版本将会被替换权限认证方式,包括 类和方法 的变换,所以需要对ranger中继承 kafka 的实现中,修改相应的逻辑 官方说明 Kafka3.0以上版本将会被替换权限认证方式&a…

vue项目瘦身

如图 项目中node_modules包已占用十几G,我也是发现我的磁盘空间缩小的超级快,因为好几个项目,甚至有的项目包已经占了50多G,这都得益于上一个刚走了的laji npm install -g depcheck 一旦安装了depCheck,您可以在命令行…

通过 Github workflows CI/CD 自动化部署 Github Pages hugo 免费博客

通过 Github workflows CI/CD 自动化部署 Github Pages hugo 免费博客 文章博客地址:https://blog.taoluyuan.com/posts/github-workflows/ Github Workflows 介绍 GitHub Actions 介绍 GitHub 文档:https://docs.github.com/zh/actions/learn-githu…