Convert Figma logo to code with AI

justjavac logoawesome-wechat-weapp

微信小程序开发资源汇总 :100:

45,734
8,648
45,734
2

Top Related Projects

🎉 A curated list of awesome things related to Vue.js

27,134

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

35,461

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

🦎 一套代码运行多端,一端所见即多端所见

39,886

A cross-platform framework using Vue.js

18,267

A framework for building Mobile cross-platform UI

Quick Overview

The justjavac/awesome-wechat-weapp repository is a curated list of resources for WeChat Mini Programs development. It serves as a comprehensive collection of tools, frameworks, libraries, and learning materials specifically tailored for developers working on WeChat's mini-program platform.

Pros

  • Extensive collection of resources covering various aspects of WeChat Mini Programs development
  • Regularly updated with new and relevant content
  • Well-organized structure, making it easy to find specific resources
  • Community-driven project with contributions from multiple developers

Cons

  • May be overwhelming for beginners due to the large number of resources
  • Some listed resources might become outdated over time
  • Primarily in Chinese, which could be a barrier for non-Chinese speaking developers
  • Lacks detailed descriptions or reviews of individual resources

As this is not a code library but a curated list of resources, there are no code examples or getting started instructions to provide.

Competitor Comparisons

🎉 A curated list of awesome things related to Vue.js

Pros of awesome-vue

  • Broader scope, covering the entire Vue.js ecosystem
  • Larger community and more frequent updates
  • More comprehensive, including tutorials, components, and tools

Cons of awesome-vue

  • May be overwhelming for beginners due to its extensive content
  • Less focused on specific use cases compared to awesome-wechat-weapp

Code Comparison

awesome-vue typically includes Vue.js specific code snippets:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

awesome-wechat-weapp focuses on WeChat Mini Program code:

Page({
  data: {
    message: 'Hello WeChat Mini Program!'
  },
  onLoad: function() {
    // Page load logic
  }
})

Summary

awesome-vue is a comprehensive resource for Vue.js developers, offering a wide range of tools, components, and learning materials. It benefits from a larger community and frequent updates but may be overwhelming for beginners.

awesome-wechat-weapp is more focused on WeChat Mini Program development, providing specific resources for this platform. While it may have a narrower scope, it offers targeted information for developers working within the WeChat ecosystem.

Both repositories serve as valuable curated lists for their respective technologies, helping developers find useful resources and stay up-to-date with the latest developments in their fields.

27,134

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

Pros of weui

  • Official UI library developed by Tencent, ensuring compatibility and adherence to WeChat design standards
  • Comprehensive set of pre-built UI components specifically designed for WeChat Mini Programs
  • Regular updates and maintenance from Tencent's development team

Cons of weui

  • Limited to WeChat Mini Program development, less versatile for other platforms
  • May have a steeper learning curve for developers not familiar with WeChat's ecosystem
  • Less flexibility for customization compared to a curated list of various resources

Code Comparison

weui:

.weui-btn {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  line-height: 2.55555556;
  border-radius: 5px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}

awesome-wechat-weapp: (Note: This repository is a curated list, so it doesn't contain direct code examples. Instead, it provides links to various resources and tools for WeChat Mini Program development.)

35,461

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

Pros of Taro

  • Cross-platform development: Taro allows developers to write once and deploy to multiple platforms, including WeChat Mini Programs, H5, and native apps
  • Rich ecosystem: Taro has a comprehensive set of UI components and APIs, making it easier to build complex applications
  • Active development: Taro is actively maintained and regularly updated with new features and improvements

Cons of Taro

  • Learning curve: Taro requires familiarity with React and its ecosystem, which may be challenging for developers new to these technologies
  • Performance overhead: The cross-platform nature of Taro may introduce some performance overhead compared to native WeChat Mini Program development
  • Limited customization: Some platform-specific features may be harder to implement or customize in Taro

Code Comparison

Taro (React-based):

import { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  render() {
    return <View><Text>Hello, World!</Text></View>
  }
}

WeChat Mini Program (native):

<view>
  <text>Hello, World!</text>
</view>
Page({
  // Page logic here
})

Summary

Taro offers cross-platform development and a rich ecosystem, while awesome-wechat-weapp is a curated list of resources for native WeChat Mini Program development. Taro provides a more structured development approach but may have a steeper learning curve, while awesome-wechat-weapp offers a collection of tools and libraries for direct Mini Program development.

🦎 一套代码运行多端,一端所见即多端所见

Pros of Chameleon

  • Cross-platform development: Supports multiple platforms including WeChat Mini Programs, Alipay Mini Programs, and web applications
  • Built-in UI components: Provides a set of pre-built UI components for faster development
  • Hot reload: Offers hot reload functionality for improved development experience

Cons of Chameleon

  • Steeper learning curve: Requires learning a new framework and syntax
  • Less community support: Smaller community compared to the extensive resources available for WeChat Mini Programs
  • Limited ecosystem: Fewer third-party plugins and extensions compared to the WeChat Mini Program ecosystem

Code Comparison

Chameleon:

<template>
  <view>
    <text>Hello, {{name}}!</text>
  </view>
</template>

<script>
class Index {
  data = {
    name: 'Chameleon'
  }
}
export default new Index();
</script>

awesome-wechat-weapp (WeChat Mini Program):

Page({
  data: {
    name: 'WeChat Mini Program'
  },
  onLoad: function() {
    // Page load logic
  }
})

Summary

Chameleon offers cross-platform development capabilities and built-in UI components, making it suitable for projects targeting multiple platforms. However, it has a steeper learning curve and less community support compared to WeChat Mini Programs. The awesome-wechat-weapp repository provides a curated list of resources specifically for WeChat Mini Programs, offering a wider range of tools and examples for developers focused on the WeChat ecosystem.

39,886

A cross-platform framework using Vue.js

Pros of uni-app

  • Cross-platform development: Supports multiple platforms including WeChat Mini Programs, H5, iOS, and Android
  • Rich component library and API: Provides a comprehensive set of UI components and APIs
  • Active community and regular updates: Maintained by a dedicated team with frequent releases

Cons of uni-app

  • Steeper learning curve: Requires understanding of Vue.js and the uni-app framework
  • Potential performance overhead: May have slightly lower performance compared to native development
  • Limited customization for platform-specific features: Some platform-specific functionalities may be challenging to implement

Code Comparison

awesome-wechat-weapp (WeChat Mini Program):

Page({
  data: {
    message: 'Hello World'
  },
  onLoad: function() {
    // Page load logic
  }
})

uni-app:

<template>
  <view>{{ message }}</view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  onLoad() {
    // Page load logic
  }
}
</script>

The awesome-wechat-weapp repository is a curated list of WeChat Mini Program resources, while uni-app is a full-fledged cross-platform development framework. awesome-wechat-weapp focuses solely on WeChat Mini Programs, providing a collection of tools, libraries, and tutorials. uni-app, on the other hand, offers a more comprehensive solution for developing applications that can run on multiple platforms, including WeChat Mini Programs.

18,267

A framework for building Mobile cross-platform UI

Pros of Weex

  • Cross-platform development: Weex allows building native mobile apps for iOS and Android, as well as web applications, using a single codebase
  • Performance: Weex provides near-native performance by rendering components directly to the native UI
  • Backed by Alibaba: As an Alibaba project, Weex has strong support and resources for development and maintenance

Cons of Weex

  • Learning curve: Developers need to learn Weex-specific APIs and concepts, which may take time compared to using familiar WeChat Mini Program frameworks
  • Limited ecosystem: Weex has a smaller community and fewer third-party libraries compared to the extensive resources available for WeChat Mini Programs
  • Complexity: Setting up and configuring a Weex project can be more complex than creating a WeChat Mini Program

Code Comparison

Weex component example:

<template>
  <div>
    <text>Hello, Weex!</text>
  </div>
</template>

WeChat Mini Program component example:

<view>
  <text>Hello, WeChat Mini Program!</text>
</view>

While both examples show simple components, Weex uses Vue.js-like syntax, whereas WeChat Mini Programs use a custom template syntax similar to standard HTML with custom tags.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

微信小程序开发资源汇总

本文收集了微信小程序开发过程中会使用到的资料、问题以及第三方组件库。本文不是一篇关于如何学习微信小程序的入门指南,也非参考手册,只是一些资料的整理。

本仓库中的资料整理自网络,也有一些来自网友的推荐。在这里可以看到项目贡献者的完整名单。

如果这个仓库对你有帮助,欢迎 star。如果这个仓库帮你提升了技能找到了工作,可以请我喝杯咖啡:

QQ交流群

目录

置顶

官方文档

↑ 返回目录 ↑

工具

  • uni-app ★36.1k+ - 使用 Vue 语法开发小程序、H5、App的统一框架
  • Taro ★30.6k+ - 使用 React 的方式开发小程序的框架,同时支持生成多端应用
  • WePY ★21.7k+ - 支持组件化的小程序开发框架
  • mpvue ★20.4k+ - 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系
  • chameleon ★8.6k+ - 一套代码运行多端,一端所见即多端所见
  • kbone ★4.2k+ - Web 与小程序同构解决方案
  • Remax ★4.2k+ - 使用真正的 React 构建小程序
  • wept ★2.3k - 微信小程序实时运行环境
  • wechat_web_devtools ★2.3k+ - Linux 下微信开发者工具
  • wafer ★2.1k - 快速构建具备弹性能力的微信小程序
  • MPX ★2.1k+ - 增强型小程序框架,深度性能优化,支持跨小程序平台开发,完全兼容原生小程序组件
  • Labrador ★1.7k - 支持 ES6/7 的微信小程序组件化开发框架
  • licia ★1.7k - 支持小程序的 JS 工具库
  • megalo ★1.6k - 基于 Vue 的小程序开发框架
  • CloudBase Framework ★1.1k - 腾讯云开发开源一键部署工具,支持部署小程序及云开发应用
  • tina ★1k+ - 轻巧的渐进式微信小程序框架
  • minapp ★800+ - TypeScript 版小程序开发框架(兼容原生小程序代码)
  • Okam ★300+ - 使用类 Vue 方式开发小程序的渐进增强框架,支持生成微信/百度等主流平台的小程序
  • xpmjs ★100+ - 微信小程序云端增强 SDK
  • WeApp-Workflow ★100+ - 基于 Gulp 的微信小程序前端开发工作流
  • weapp-tailwindcss-webpack-plugin ★100+ - 在小程序里使用 TailwindCSS 吧
  • gulp-wxa-copy-npm - 微信小程序 gulp 插件,解决 npm 包管理和 babel-runtime
  • weact - 用 JSX 快速开发小程序
  • socket.io-mp-client - 微信小程序 socket.io 客户端
  • @wxa - AOP小程序开发框架
  • postcss-pxtorpx-pro - postcss px 转 rpx 插件
  • px2rpx - Px 转 Rpx 在线工具
  • wxml-parser - JavaScript WXML parser
  • @wxml/parser, @wxml/traverse, @wxml/generator - WXML babel like AST interpreter
  • weappx - 基于 redux 的数据层管理框架
  • weapp-start - 基于插件机制的开发脚手架,改善原生小程序开发体验
  • Egret Wing - 支持微信小程序实时预览的 IDE
  • wxapp-graphql - 小程序 GraphQL 客户端
  • gulp-wxapp-boilerplate - 小程序+小程序云 Gulp 开发脚手架,支持云函数 mock
  • wenaox - 小程序数据层管理 ,轻量性能好,支持中间件
  • authing-wxapp-sdk - 身份认证 for 微信小程序
  • weapp-eslint-boilerplate - 微信小程序 Eslint 通用模板文件,节省自己配置的时间
  • Anka - 渐进式小程序开发工具集,提供通用的开发函数库及组件
  • WeAppBunXin - 微信小程序开发之影分身术,一套代码生成多个小程序
  • miniprogram-build - 小程序命令行编译工具(支持typescript,原生npm,资源文件压缩...)
  • wcc.js - wcc.js 是wxml文件和wxs文件编译器的nodejs实现
  • wcsc.js - wcsc.js 是wxss文件编译器的nodejs实现
  • weapp-gulp - Gulp高效构建微信小程序,让开发变得更简单
  • cheers-mp - Almost零配置微信原生小程序脚手架,vue-cli般的体验~(ts、less、原生npm、云OSS、CI自动发布体验版)
  • we-mobx - 在微信小程序中使用 MobX
  • weconsole - 功能全面、界面与体验对标 Chrome devtools 的可定制化的小程序开发调试面板
  • wechat-web-devtools-linux - Linux 下微信开发者工具
  • rubic - 基于 Vue3 的小程序开发框架,在小程序中使用 Composition API

↑ 返回目录 ↑

插件

  • wxapp.vim - 提供微信小程序开发全方位支持的 vim 插件
  • weapp-snippet-for-sublime-text-2-3 - 为 sublime text 2&3 准备的微信小程序 snippet(停更)
  • Matchmaker - IntelliJ IDEA 插件,注入方法
  • wechatCode-complete - webstorm 插件(代码提示)
  • wxapp - sublime plugin
  • minapp - vscode 插件(支持 原生/mpvue/wepy 框架)
  • vscode 插件(代码提示)\
  • vscode-live-sass-compiler - vscode插件根据.scss文件自动生成wxss文件
  • WePY Plugin For IntelliJ Platform - 让PhpStorm/WebStorm全面支持WePY的开发,包括API(原生/WePY)和组件(官方/自定义)的自动完成/错误检查/高亮/不依赖Vue/...
  • wxml - vscode插件--微信小程序格式化以及高亮组件(高度自定义)
  • wux-weapp-snippets - Wux Weapp Snippets for VS Code.
  • wux-weapp-atom-snippets - Wux Weapp Snippets for Atom.
  • wux-weapp-sublime-snippets - Wux Weapp Snippets Plugin for Sublime Text 2/3.

↑ 返回目录 ↑

组件

  • weui-wxss ★12.4K+ - 同微信原生视觉体验一致的基础样式库
  • vant-weapp ★12.3k+ - 高颜值、好用、易扩展的微信小程序 UI 库
  • wxParse ★7.2K+ - 微信小程序富文本解析自定义组件,支持 HTML 及 markdown 解析
  • mp-html ★1.4K+ - 小程序富文本组件,支持渲染和编辑 html,支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用
  • iview-weapp ★5.5k+ - 一套高质量的微信小程序 UI 组件库
  • wux-weapp ★4.2k+ - 一套组件化、可复用、易扩展的微信小程序 UI 组件库
  • wx-charts ★4.1k+ - 微信小程序图表 charts 组件
  • Lin UI ★2k+ - 一套设计优良、基于原生微信小程序语法的 UI 组件库
  • wemark ★1.100+ - 微信小程序 Markdown 渲染库
  • image-cropper ★900+ - 💯微信小程序图片裁剪组件
  • wxapp-img-loader ★400+ - 微信小程序图片预加载组件
  • we-cropper ★400+ - 微信小程序图片裁剪工具
  • wxa-plugin-canvas ★300+ - 微信小程序朋友圈海报生成组件
  • WeZRender ★300+ - 微信小程序 Canvas 开发
  • wx_calendar ★300+ - 小程序日历
  • wxapp ★300+ - 微信小程序组件
  • Wa-UI ★200+ - 针对微信小程序整合的一套 UI 库
  • wxSearch ★200+ - 微信小程序优雅的搜索框
  • wx-scrollable-tab-view ★200+ - 小程序可滑动得 tab-view
  • wetoast ★100+ - 微信小程序 toast 增强插件
  • wx-alphabetical-listview ★100+ - 微信小程序带字母滑动的 listview
  • wx-drawer ★100+ - 小程序模仿 QQ6.0 侧滑菜单
  • wxapp-charts ★100+ - 微信小程序图表 charts 组件
  • chartjs-wechat-mini-app ★100+ - chartjs 微信小程序适配
  • wx-promise-request ★100+ - 微信小程序请求队列管理库
  • we-swiper ★100+ - 微信小程序触摸内容滑动解决方案
  • wxDraw ★100+ - 微信小程序 2D 动画库
  • citySelect ★100+ ★42 - 微信小程序城市选择器
  • weapp-cookie ★100+ - 一行代码让微信小程序支持 cookie 🍪🚀
  • WeiXinProject - 微信小程序列表上拉刷新和上拉加载
  • wepy-com-charts - 微信小程序 wepy 图表控件
  • wxapp-lock - 微信小程序手势解锁
  • mini-gesture-lock - 微信小程序手势解锁(无Android Canvas卡顿问题)
  • weapp.socket.io ★500+ - socket.io 风格的 websocket 类库
  • weapp-polyfill - [w3c 标准 API polyfill
  • wx-promise-pro ★666+ - 微信小程序 Promise 库
  • wxMD5 - 微信小程序 MD5 库
  • wxBase64 - 微信小程序base64 库
  • xing-weapp-component - 微信小程序基础组件扩展
  • wx-statuslayout - 小程序页面状态切换组件
  • minapp-api-promise - 微信小程序所有 API promise 化
  • minapp-slider-left - 微信小程序左划删除组件
  • mp_canvas_drawer - canvas绘制图片助手,一个json就制作分享朋友圈图片
  • xing-weapp-editor - 小程序图文编辑组件
  • cue - A WX Compontent Tools
  • wuss-weapp - 一款高质量,组件齐全,高自定义的微信小程序UI组件库
  • miniprogram-datepicker - 小程序日期选择器(支持农历)
  • wx-api-promisify - 优雅地将微信小程序API Promise化
  • anka-brush - 一款为简化小程序里canvas画图操作而创建的工具库
  • anka-tracker - 小程序打点库,用于统计用户行为数据
  • mpvue-calendar - 微信小程序/浏览器端的日历组件mpvue-calendar;基于mpvue平台 支持农历、按周切换、可自定义。
  • mp-swipe-card - 小程序卡片滑动组件,类似探探的效果,貌似现在只支持左右滑动
  • weapp.request - 为微信小程序提供的网络请求组件,是 wx.request 的扩展,基于 Promise API,添加缓存控制。
  • miniprogram-network - Redefine the Network API of MiniProgram(小程序网络请求库)
  • we-validator - 简单灵活的表单验证插件,支持小程序、浏览器以及Nodejs端使用。
  • wx-pulltorefresh-view - 简单灵活的下拉上拉刷新组件,支持微信小程序
  • sol-weapp ★300+ -微信小程序营销组件:红包雨、大转盘等营销组件
  • weapp-input-frame - 微信小程序验证码输入框组件
  • we-debug - 一款灵活、易于拓展的微信小程序调试工具
  • weapp-qrcode - 微信小程序生成二维码工具
  • cheers-mp-router - 🚦精巧强大的小程序原生路由
  • wx-updata - 微信小程序官方 setData 替代品,只修改 data 中你希望修改的部分 ✈️
  • three-platformize - 一个让 THREE 平台化的项目,已适配微信、淘宝、头条小程序

↑ 返回目录 ↑

Demo

可以直接运行成功

数据接口有问题

↑ 返回目录 ↑