关于我😁
我现在是一名普通的大学生,由于正在开发着微信小程序,使用微信小程序作为前端工具来帮助我自己开发项目,微信小程序是一种十分方便快捷的前端工具,现在也如同大家所见,微信小程序遍地开花,有自己的研发团队来开发,而我始终都是一个人😭,下面就是一些关于我对小程序的看法(悄悄告诉你有干货~~(^_^) )
前言
为什么要写这篇文章给自己挖下这么大的坑呢?
最近经常被老师和基地里的同学吐槽基础知识不扎实,我哪里不扎实了🤬,然后就在我打算怼回去的时候,同学就让我两分钟把微信小程序的组件给列出来,诶😔,好吧确实不扎实,那么不扎实最好的方法就是去写文章让周围人看了信服且认可,就算已经打好基础了,因为我稍微有点水平所以请大家在看的时候还是可以信服我的一些说法。
关于微信小程序😘
稍微介绍一下
微信小程序是一种不用去下载的就能够使用的应用,也是创新,在随后的时间中,微信小程序的作用越来越突出,也越来越凸显出地位,主流观点认为微信小程序是一种中国人一次大胆而且非常成功的创新👍。
微信小程序开发
个人感觉微信小程序的界面有点像Web前端开发界面,它的文件构成也证实了我的感觉🧠是正确的,在打开“微信开发者工具”我们可以看到微信小程序研发团队在这方面的努力,开发界面较为和谐,整体美观性比较不错。
我认为小程序区别一个前端开发者是新生还是进阶只有一个区别,那就是静态样式和动态渲染,到老手这一步因为要开发大的集成项目,比如一些比较大的,成熟的开源项目,所以他们更加注重团队的配合以及一些代码的规范化,这样别人才能看得懂他的项目,所以这篇文章适合新生和进阶这两类人观看,欢迎指点,你可以通过两种渠道来联系我👀
—————》》
花里胡哨法:QQ邮箱:1907065810@qq.com(发邮箱到这里,反馈比较快)
简单粗暴法:在下方评论(问的时候说明清楚情况,问题,那个点不懂或者有疑问的存在问题的,顺便留下联系方式,方便我找你😘~)
由于静态样式侧重在人性化和美观以及牵扯到一些关于UI的东西,而动态渲染的侧重点更偏向于后端的东西是一些关于逻辑层面的东西,所以我将所有的组件分为动态渲染和静态样式,这样我们就能更好的去学,去应用好小程序😄😄😄😄
静态样式
静态样式主要还是一些关于美化层面的东西
先上一波上干货—–》》
工具、插件和组件
工具
- Taro ★26k+ - 使用 React 的方式开发小程序的框架,同时支持生成多端应用
- uni-app ★25k+ - 使用 Vue 语法开发小程序、H5、App的统一框架
- WePY ★20k+ - 支持组件化的小程序开发框架
- mpvue ★19k+ - 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系
- chameleon ★7k+ - 一套代码运行多端,一端所见即多端所见
- kbone ★2.8k+ - Web 与小程序同构解决方案
- Remax ★2.4k+ - 使用真正的 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 的微信小程序前端开发工作流
- 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
- 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自动发布体验版)
插件
- 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插件–微信小程序格式化以及高亮组件(高度自定义)
- vim-vue-plugin - vim 插件,.vue 和 .wpy 文件的语法高亮和缩进
- 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 渲染库
- 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 - 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 中你希望修改的部分 ✈️
来源于:https://github.com/justjavac/awesome-wechat-weapp
侵可删
组件介绍
这些组件方面的介绍只不过是在微信小程序官方组件文档的基础之上在加一点我的理解和看法,
动态渲染
一些实用的demo和数据接口
Demo
可以直接运行成功
数据接口有问题
- EastWorld/wechat-app-mall ★3000+ - 微信小程序商城
- tumobi/nideshop-mini-program ★2000+ - 基于 Node.js + MySQL 开发的开源微信小程序商城
- huangjianke/Gitter ★700+ - Gitter for GitHub - 可能是目前颜值最高的GitHub小程序客户端
- lypeer/wechat-weapp-gank ★600+) - Gank 客户端
- wangmingjob/weapp-weipiao ★300+ - 微票
- charleyw/wechat-weapp-redux ★300+ - Redux 绑定库
- jectychen/wechat-v2ex ★300+) - V2EX
- 18380435477/WeApp ★300+ - 仿微信
- zce/weapp-boilerplate ★300+ - 微信小程序快速开发骨架
- bayetech/wechat_mall_applet ★300+ - 电商平台
- lanshan-studio/wecqupt ★300+ - We 重邮
- imageslr/weapp-library ★300+ - 在线借书平台(WeUI设计规范、前后端开源、RESTful API文档)
- myronliu347/wechat-app-zhihudaily ★200+ - 知乎日报
- harveyqing/BearDiary ★200+ - 小熊の日记
- leancloud/leantodo-weapp ★200+ - 集成 LeanCloud 实现的 Todo list
- SuperKieran/weapp-artand ★200+ - Artand
- dongweiming/weapp-zhihulive ★200+ - 知乎 Live
- eyasliu/wechat-app-music ★200+ - 音乐播放器
- ahonn/weapp-one ★200+ - 仿 ONE
- giscafer/wechat-weapp-mapdemo ★200+ - 地图导航、marker标注 (不再维护)
- yaoshanliang/weapp-ssha ★200+ - 企业宣传小程序
- hilongjw/weapp-gold ★100+ - 掘金主页信息流
- zce/weapp-douban ★100+ - 豆瓣电影
- hingsir/weapp-douban-film ★100+ - 豆瓣电影
- kunkun12/weapp - 小程序 hello world 尝鲜
- natee/wxapp-2048 ★100+ - 2048 小游戏
- SeptemberMaples/wechat-weapp-demo ★100+ - 购物车
- hijiangtao/weapp-newsapp - 公众号热门文章信息流
- charleyw/wechat-weapp-redux-todos ★100+ - 集成 Redux 实现的Todo list
- kraaas/timer ★100+ - 番茄时钟
- ericzyh/wechat-chat ★100+ - 聊天室
- BelinChung/wxapp-hiapp ★100+ - HiApp
- hardog/wechat-app-flexlayout ★100+ - flexlayout
- dunizb/wxapp-sCalc ★100+ - 简易计算器
- litt1e-p/weapp-girls ★100+ - 豆瓣美女/妹子图
- liumulin614/BeautifulGirl - 美女模特
- romoo/weapp-demo-breadtrip ★100+ - 面包旅行
- zhuweiyou/fetop100 ★100+ - 前端TOP100
- vace/wechatapp-news-reader ★100+ - 新闻阅读器
- yaoshanliang/weapp-jump ★100+ - 跳一跳
- yaoshanliang/weapp-monument-valley ★100+ - 纪念碑谷
- Symous/WechatApp-BaisiSister - 百思不得姐
- githinkcn/Giteer - Giteer For 码云,基于Taro + Taro UI + Dva的小程序。
- DengKe1994/weapp-calculator - IOS 计算器
- monkindey/wx-github - GitHub 简历
- fluency03/weapp-500px - 国外摄影社区 500px
- weapp-film - 淘票票
- xujinyang/CoderCalendar-WeApp - 程序员老黄历
- zhengxiaowai/weapp-github - github
- Seahub/PigRaising - PigRaising
- brucevanfdm/WeChatMeiZhi - 妹子图
- zhijieeeeee/wechat-app-joke - 开心一刻
- uniquexiaobai/wechat-app-githubfeed - GitHubFeed
- zce/weapp-todos - TODOS 任务清单
- bruintong/wechat-webapp-douban-movie - 豆瓣电影
- bruintong/wechat-webapp-douban-location - 豆瓣同城
- arkilis/weapp-jandan - 煎蛋
- bodekjan/wechat-weather - 微信天气
- jasscia/ChristmasHat - 我要圣诞帽
- nanwangjkl/sliding_puzzle - 滑块拼图
- kaiwu/weui-scalajs - 使用Scala.js开发
- tinajs/tina-hackernews - Hacker News 热点
- mohuishou/scuplus-wechat - We 川大
- hankzhuo/wx-v2ex - v2ex
- Hongye567/weapp-mark - 仿 Mark 影单的微信小程序
- w1109790800/We-Todo - 基于LeanCloud的Todo-List
- jae-jae/weapp-github-trending - Github今日榜单
- steedos/mini-vip - 华炎微站、微商城
- alex1504/wx-guita_tab - 口袋吉他
- lonnng/etym - 芒果词源助手
- wuhou123/wxxcx - 武侯的猫,基于wepy构建,整合了n多查询工具(快递,天气,记账,搞笑视频等)
- upupming/HITMers - 博物馆小助手(统计值班表、签到、值班日历及备忘录、国际化、Streamable.com 视频上传等)
- LDouble/WeOUC - WeOUC(教务小程序)
- Airmole/ShellBox - 贝壳小盒子(校园教务信息查询类工具,获2019高校小程序开发大赛华北区二等奖)
- aquanlerou/WeHalo ★200+ - 爱敲代码的猫(WeHalo 简约风 的微信小程序版博客✨)
- WarpPrism/SubwayRoutineMP - 【东京首尔曼谷新加坡巴黎地铁线路图🚄】
- GoKu-gaga/today - 口袋工具(一个小工具的集合)
- cy920820/weapp-motor-movies - 马达电影助手(一个院线电影小助手)
- Gwokhov/chronus - Chronus 目标日记(一款能帮助你管理生活目标的云开发微信小程序)
- imliubo/Wechat_MQTT_ESP8266_BaiduIoT - 微信智能小管家 (使用微信小程序控制你的硬件设备)
- yuzexia/iw3cplus - 前端社区www.w3cplus.com的微信小程序
- RAOE/show-videos - 秀视频(微信小程序短视频社交软件,视频上传,音视频合成,评论,点赞,转发,分享等)
- NewFuture/miniprogram-template - 原生API纯TypeScript开发小程序(VSCode as IDE)与完整开发流程
- ZhuPeng/mp-githubtrending - 以 Feed 流形式查看 GitHub Trending 仓库集合的工具
- yociduo/scrum-planning-poker - Scrum敏捷估算,基于wepy构建
- kilakila-heart/fuliba-front - 信息流福利吧小程序
- lsqy/taro-music - 🎉基于taro + taro-ui + redux + typescript 开发的网易云音乐小程序
- 仿喜马拉雅lite - 微信小程序原生开发的仿喜马拉雅小程序(极度适合新手入门)
- branliang/game-stop-app - PSN降价了(一个可以订阅PS4游戏价格的工具)
- wk989898/wxchat-mail - 仿Gmail邮箱的微信小程序
- YYJeffrey/july_client - 七月(一个SaaS社交小程序的客户端,集分享动态、点赞评论、互动聊天等功能)
- AnsonZnl/bookshelf - 🎉基于云开发的书架小程序(附教程)🎉
- arleyGuoLei/wx-words-pk ★100+ - 🔥2020 云开发实现单词对战小程序(随机匹配、人机对战、好友对战),专业UI
- arleyGuoLei/wechat-1password - 🐂🍺有本密码,云开发实现的AES加密密码本,支持指纹、人脸,UI简约大方
- wilhantian/periodic-table - 💎精致的元素周期表小程序
- zhijieeeeee/wechat_ocr - 🔥图片扫描提取文字(OCR)微信小程序,采用免费的百度OCR和翻译API,还有微信云函数
- terryso/super9 - 🔥抖音一键去水印小程序 (Vue版): Taro + 微信云开发
来源于:https://github.com/justjavac/awesome-wechat-weapp
侵可删