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

news/2024/7/10 22:30:39 标签: 小程序, 开源, 前端, javascript, 微信小程序

今天和大家分享几个小程序开源项目, 帮助我们轻松搭建自己的小程序应用. 我会从大家最熟悉的小程序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.niftyadmin.cn/n/100346.html

相关文章

替别人养孩子、九八年月薪三千,《我们的日子》剧情为何引争议

说起李小冉和李乃文两位演员,他们的演技真的是无可挑剔,按说由他们两个主演的电视剧,收视率应该会很高,直到最近的热播剧《我们的日子》。据悉,《我们的日子》是由李小冉和李乃文主演,讲述的是九十年代家长…

房屋出租管理系统

1. 铺垫 1.1 项目真实开发的过程 上来要做什么???? 有电脑—》配环境(JDK、IDEA、MAVEN……) 这个项目:房屋管理系统 从什么角度出发,第一步做什么?? 架构 …

我的 System Verilog 学习记录(5)

、 引言 本文简单介绍 System Verilog 语言的 控制流。 前文链接: 我的 System Verilog 学习记录(1) 我的 System Verilog 学习记录(2) 我的 System Verilog 学习记录(3) 我的 System Ver…

7 个高效的 Chrome 工具插件,让你开发生活更愉悦

元气满满开的开发生活Chrome 浏览器就不用介绍了吧,它是最常用的浏览器之一。Chrome 扩展程序将帮助您提高工作效率并节省时间。但是,有很多可用的扩展,很容易在其中迷失。我列出了 7 有用的 Chrome 扩展程序,让您的日常开发生活更…

Vue 3第三章:模板语法及指令介绍

文章目录1. 插值表达式1.1. 声明变量可直接在模板中使用,采用{{变量名称}}的方式1.2. 模板语法支持三元表达式1.3. 模板语法支持运算1.4. 模板语法支持方法调用2. 指令2.1. v-bind:用于绑定属性或动态绑定对象的值到元素上。2.2. v-if、v-else-if、v-els…

备份Linux系统(通用)

前言 我装的manjaro系统,但避免Linux出现什么问题,我已近作为日常系统使用了,需要维持系统稳定,所以备份一个系统显得很重要。我的场景是这样,把系统的文件备份到新的存储区域,这个区域可以是U盘&#xff…

应用场景六:同时支持CP343和CP341功能(Modbus连接仪表,以太网连接WINCC)

应用描述: 桥接器同时支持西门子PLC的CP343以太网通讯模块和CP341串口通讯模块的功能。可以同时通过ModbusRTU连接仪表、变频器等串口设备,同时可以通过网口连接组态监控软件WINCC。PLC内部不需要编程,也不需要进行硬件组态配置,…

字符串之 KMP 匹配算法

KMP kmp 算法是匹配一个字符串 str 包含的字串 substr 的开始索引的算法(成功返回开始索引,失败返回 -1),时间复杂度为 O(N),N为str的长度。 代码 当字符串长度 为0,或者 子串 substr 长度大于 str 的长…