8个小程序开源项目助你快速搭建小程序

news2024/11/15 21:45:22

今天和大家分享几个小程序开源项目, 帮助我们轻松搭建自己的小程序应用. 我会从大家最熟悉的小程序UI组件, 到可视化库, 再到完整项目, 一一和大家介绍.

  • 小程序UI组件库

  • 小程序多端开发框架

  • 小程序可视化图表库

  • 经典小程序开源项目

小程序UI组件库

1. vant-weapp

6594d8e90f541ee4abedd19d6fc5fa2e.png

Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

我个人觉得, 如果你是一名前端开发人员, 使用该UI库可以更灵活高效的开发小程序, 同时还能提高自己的编程能力. 移动端的访问界面如下:

40e5751793b9c4077806bf5fdbbb6366.png

开源地址: https://github.com/vant-ui/vant-weapp

2. iView Weapp

4a3a99fc1691fd237ef263cb5bf61677.png

iView 是一套高质量的微信小程序 UI 组件库, 和 vant-weapp 类似, 是一个开箱即用的组件库, 对于两者区别来说, 笔者认为 vant-weapp 在文档,性能和社区使用率上略胜一筹.

界面如下:

19d247cb1b136ded5555e87746b44db4.png

开源地址: https://github.com/TalkingData/iview-weapp

小程序多端开发框架

1. Uni-app

9bdbf74a690b412f821dbb3b82260ffe.png

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。接下来我来分享一下它的架构:

d6b03f851843003df75cbc19b600fce5.png

github地址: https://github.com/dcloudio/uni-app

2. 网易考拉 Megalo

ef895d9fdadf6265d9d0afd3ab8b6c65.png 168387468efff526d3f6a3fc9268503b.png

Megalo 是基于 Vue(Vue@2.6.6) 的小程序开发框架,让开发者可以用 Vue 的开发方式开发小程序应用。Megalo 是为了跨 H5 和小程序两端的应用提供一个高效的解决方案,只需要少量改动即可完成 H5 和小程序之间的代码迁移。

Megalo 目前支持微信小程序,支付宝小程序,百度智能小程序,字节跳动小程序。

github: https://github.com/kaola-fed/megalo

3. 京东Taro

fe5e81c158e081df1741c6423ad68562.png

Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

同时它还提供了一套京东风格的组件库 NutUI:

2ed787384ef5a6abebb3b789d3b57a0f.png

NutUI 从功能、组件、性能、官网四方面放入手,不断在组件库的丰富性、轻量化、易用性上进行改进,力求打造一款好用的移动端组件库,为开发者提效,为业务赋能,为开源贡献一份力量。

github地址: https://github.com/nervjs/taro

4. Remax

4447e4b470bc12996f80bfdd0af6cda6.png

remax 将 React 运行在小程序环境中,让我们可以使用完整的 React 进行小程序开发。  其具有如下特点:

  • 真正的 React - 不同于静态编译的方案,在 Remax 中使用 React 没有任何限制,包括 React Hooks。我们可以把 Remax 理解为针对小程序的 React Native

  • 多端支持 - 使用 Remax 把代码转换到多个小程序平台

  • TypeScript - 完整的 TypeScript 支持,给你满满的安全感

github地址: https://github.com/remaxjs

小程序可视化图表库

echarts-for-weixin:Apache ECharts 的微信小程序版本

1f04e53fe22be8309274d03187e13bce.png

开发者可以通过熟悉的 ECharts 配置方式,快速开发图表,满足各种可视化需求。

2cbce7b5a8b630f8bde6b71a497df7e6.png

github地址: https://github.com/ecomfe/echarts-for-weixin

经典小程序开源项目

1. wechat-app-mall:微信小程序商城

ec059a834e6a8c76424405e102f47e64.png

微信小程序商城,微信小程序微店,长期维护版本.我们可以使用它轻松搭建商城小程序, 只需要加上自己的后端, 对前端小修小改即可快速上线一个属于自己的小程序.

github地址: https://gitee.com/javazj/wechat-app-mall

2. taro-music:网易云音乐小程序

8b37243d9edacc39229d37556b395998.png

taro-music是基于Taro与网易云音乐 api 开发,技术栈主要是:typescript+taro+taro-ui+redux+react-hooks,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,打造一个最佳实践项目,通过这个项目也可以帮助你快速使用Taro开发一个属于你自己的小程序.

github地址: https://github.com/lsqy/taro-music

3. lowcode_news_mini 小程序的低代码内容社区

7155a658428d4de2fd06f74b9fefca24.png

lowcode_news_mini 是一个小程序的博客内容社区, 帮助开发者建立自己的博客技术体系, 技术栈使用taro编写, 非常适合想学习taro 开发跨端小程序的前端伙伴, 并且代码完全开源.

github地址: https://github.com/MrXujiang/lowcode_news_mini

❤️ 谢谢支持

以上便是本次分享的全部内容,希望对你有所帮助^_^

喜欢的话别忘了 分享、点赞、收藏 三连哦~。

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

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

相关文章

MXNet中使用卷积神经网络textCNN对文本进行情感分类

在图像识别领域,卷积神经网络是非常常见和有用的,我们试图将它应用到文本的情感分类上,如何处理呢?其实思路也是一样的,图片是二维的,文本是一维的,同样的,我们使用一维的卷积核去处…

LLVM程序分析与编译转换框架论文分享

LLVM 2004年论文原文 概述 本文描述了 LLVM(低级虚拟机),一种编译器框架,旨在通过在编译时、链接时、运行时,以及运行之间的空闲时间。 LLVM 以静态单一赋值 (SSA) 形式定义了一种通用的低级代码表示,具有…

多区域的OSPF实战配置

多区域的OSPF实战配置 需求 如图配置设备的接口IP地址如图规划OSPF网络的区域要求每个设备的 router-id 都是 x.x.x.x(x是每个路由器的名字)确保不同的PC之间可以互通 拓扑图 配置命令 PC1: 192.168.1.1 255.255.255.0 192.168.1.254PC2:…

【手把手一起学习】(六) Altium Designer 20 STM32核心板Demo----PCB设计

1 PCB设计 PCB设计是制作STM32核心板的关键步骤,其关系到最终生产厂家制作的电路板能否正常使用,PCB设计包括布局,裁板,布线,覆铜,DRC检查等,其中要求、细节、技巧比较多,以后会更详…

redis(7)哈希Hash

哈希Hash Redis hash 是一个键值对集合。 Redis hash 是一个 string 类型的 field 和 value 的映射表&#xff0c;hash 特别适合用于存储对象。 类似 Java 里面的 Map<String,Object>。 用户 ID 为查找的 key&#xff0c;存储的 value 用户对象包含姓名&#xff0c;年…

西北工业大学大学物理(II)选填解析2019-2020期末

2 又是考查“一个电子和一个光子具有相同的波长&#xff0c;则二者动量相等。”4 斯特恩盖拉赫实验&#xff0c;原子的自旋磁矩取向量子化。7 通常我们感受不到电子的波动性。因为其波长短&#xff0c;其实也就是粒子运动速率高。10 考查无限长直导线周围B分布。常见的模型要记…

【035】基于Vue的电商推荐管理系统(含源码数据库、超详细论文)

摘 要&#xff1a;基于Vue&#xff0b;Nodejs&#xff0b;mysql的电商推荐管理系统&#xff0c;这个项目论文超详细&#xff0c;er图、接口文档、功能展示、技术栈等说明特别全&#xff01;&#xff01;&#xff01; &#xff08;文末附源码数据库、课设论文获取方式&#xff0…

xgboost学习-原理

文章目录一、xgboost库与XGB的sklearn APIXGBoost的三大板块二、梯度提升树提升集成算法&#xff1a;重要参数n_estimators三、有放回随机抽样&#xff1a;重要参数subsample四、迭代决策树&#xff1a;重要参数eta总结一、xgboost库与XGB的sklearn API 现在&#xff0c;我们有…

【ROS学习笔记4】话题通信

【ROS学习笔记4】话题通信 文章目录【ROS学习笔记4】话题通信零、话题通信概述一、话题通信的理论模型二、话题通信基本操作的Cpp实现三、话题通信基本操作的Python实现四、话题通信自定义msg五、话题通信自定义msg调用的Cpp实现六、话题通信自定义msg的Python实现七、Referenc…

《MySQL学习》 Order by 工作原理

《MySQL学习》 Order by 工作原理 一.排序缓存 sort_buffer 当我们使用explain 分析一条带有排序操作的SQL语句时&#xff0c;会看到Extra中有使用 Using filesort explain select * from t order by k descMySQL 会为每个线程分配固定大小的 sort buffer 用作排序。 sort b…

SAP 怎么冲销已冲销的凭证?

假如有这么一种场景&#xff1a;你做了一张凭证A&#xff0c;你第一次发现账务做错了。你用fb08来冲销A&#xff0c;生成了冲销凭证B&#xff0c;然后第二次检查的时候你发现&#xff0c;凭证A其实没错&#xff0c;这时候能不能把冲销凭证B撤销掉&#xff1f; 然后凭证A就恢复了…

【C语言每日一题】猜名次

【C语言每日一题】—— 猜名次&#x1f60e;&#x1f60e;&#x1f60e; &#x1f4a1;前言&#x1f31e;&#xff1a; &#x1f49b;猜名次题目&#x1f49b; &#x1f4aa; 解题思路的分享&#x1f4aa; &#x1f60a;题目源码的分享&#x1f60a; &#x1f449; 本菜鸡…

【MySQL】增删改操作(基础篇)

目录 1、新增操作(Create) 1.1 单行数据 全列插入 1.2 多行数据 全列插入 1.3 单行数据 指定列插入 2、修改操作(Update) 3、删除操作(Delete) 1、新增操作(Create) 如何给一张表新增数据呢&#xff1f; 新增(Create)&#xff0c;在我们数据库中&#xff0c;用 ins…

三行代码让你的git记录保持整洁

前言笔者最近在主导一个项目的架构迁移工作&#xff0c;由于迁移项目的历史包袱较重&#xff0c;人员合作较多&#xff0c;在迁移过程中免不了进行多分支、多次commit的情况&#xff0c;时间一长&#xff0c;git的提交记录便混乱不堪&#xff0c;随便截一个图形化的git提交历史…

location

目录 匹配的目标 格式 匹配符号&#xff1a; 优先级 要表达不匹配条件&#xff0c;则用 if 实现 例子&#xff1a;根目录的匹配最弱 例子&#xff1a;区分大小写 和 不区分大小写 例子&#xff1a;以根开头 和 不区分大小写 例子&#xff1a;等号 匹配的目标 ng…

Vue2.0开发之——使用ref引用组件实例(41)

一 概述 在本组件内部修改count的值在父组件内修改子组件的count值 二 在本组件内部修改count的值 2.1 Left.vue 布局代码 <template><div class"left-container"><h3 >Left 组件---{{count}}</h3><button click"count 1"&…

团队:在人身上,你到底愿意花多大精力?

你好&#xff0c;我是叶芊。 今天我们讨论怎么带团队这个话题&#xff0c;哎先别急着走&#xff0c;你可能跟很多人一样&#xff0c;觉得带团队离我还太远&#xff0c;或者觉得我才不要做管理&#xff0c;我要一路技术走到底&#xff0c;但是你知道吗&#xff1f;带团队做事&am…

华为OD机试用Python实现 -【MVP 争夺战】(2023-Q1 新题)

华为OD机试题 华为OD机试300题大纲MVP 争夺战题目描述输入描述输出描述示例一输入输出说明Python 代码实现代码实现思路华为OD机试300题大纲 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址:blog.csdn.net/hihell…

​AAAI 2023 | 利用脉冲神经网络扩展动态图表示学习

©PaperWeekly 原创 作者 | 李金膛单位 | 中山大学博士生研究方向 | 可信图学习2020 年国家双碳战略的确立与实施&#xff0c;绿色低碳已经成为全社会的重要议题&#xff0c;也是科技从业者的重要使命和责任。有文献指出&#xff0c;从 2012 年到 2018 年&#xff0c;用于…

CountDownLatch与CyclicBarrier原理剖析

1.CountDownLatch 1.1 什么是CountDownLatch CountDownLatch是一个同步工具类&#xff0c;用来协调多个线程之间的同步&#xff0c;或者说起到线程之间的通信&#xff08;而不是用作互斥的作用&#xff09;。 CountDownLatch能够使一个线程在等待另外一些线程完成各自工作之…