微信小程序开发资源汇总_小程序公共资源包括哪些

微信小程序中就四种类型的文件

• js ---------- JavaScrip文件
• json -------- 项目配置文件，负责窗口颜色等等
• wxml ------- 类似HTML文件
• wxss ------- 类似CSS文件

在根目录下用app来命名的这四中类型的文件，就是程序入口文件。

app.json

必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，
你只需创建这个文件，里面写个大括号就行
以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。

app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

这个文件不是必须的。因为它只是个全局CSS样式文件

app.wxml

这个也不是必须的，而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的

有了这两个文件你运行程序，IDE就不会报错了，也意味着这是最简单的微信小程序

 

---

Hello World

创建程序实例

app.js文件管理整个程序的生命周期

具体API解释如下

 

美化ActionBar

json文件负责配置ActionBar颜色，我们只需要在里面添加如下代码即可，下图有参数说明！

 

 

美化页面

美化页面我们用到了 wxml 和 wxss文件

函数解释如下：

 

配置首页

Json文件负责配置页面路径
所以我们在里面加入如下代码
其中index的含义 其实就是指index.js文件
这里需要说明一点 pages 里面的路径其实是指向js文件的
如果一个目录下没有该名称的js文件是会报错的！

绑定事件

 

=====================================================================================

目录

• 官方文档
• 工具
• 插件
• 教程
• 视频教程
• 文章
• 组件
• Demo

置顶

• WePY：组件化的小程序开发框架 
• WePY 开发资源汇总 

官方文档

• 小程序设计指南
• 小程序开发教程
• 小程序框架
• 小程序组件
• 小程序 API
• 小程序开发者工具

工具

• WePY ★14k+ - 支持组件化的小程序开发框架
• mpvue ★13k+ - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
• Taro ★8k - 使用 React 的方式开发小程序的框架，同时支持生成多端应用
• Labrador ★1.5k - 支持 ES6/7 的微信小程序组件化开发框架
• wept ★1.8k - 微信小程序实时运行环境
• wafer ★1.6k - 快速构建具备弹性能力的微信小程序
• wechat_web_devtools ★600+ - Linux 下微信开发者工具
• minapp ★400+ - TypeScript 版小程序开发框架（兼容原生小程序代码）
• tina ★300+ - 轻巧的渐进式微信小程序框架
• xpmjs ★100+ - 微信小程序云端增强 SDK
• WeApp-Workflow ★100+ - 基于 Gulp 的微信小程序前端开发工作流
• gulp-wxa-copy-npm - 微信小程序 gulp 插件，解决 npm 包管理和 babel-runtime
• weact - 用 JSX 快速开发小程序
• socket.io-mp-client - 微信小程序 socket.io 客户端
• wxa - 方便的小程序开发框架
• px2rpx - Px 转 Rpx 在线工具
• wxml-parser - JavaScript WXML parser
• weappx - 基于 redux 的数据层管理框架
• weapp-start - 基于插件机制的开发脚手架，改善原生小程序开发体验
• Egret Wing - 支持微信小程序实时预览的 IDE
• wxapp-graphql - 小程序GraphQL客户端
• gulp-wxapp-boilerplate - 小程序+小程序云 Gulp 开发脚手架，支持云函数 mock

插件

• 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 插件(代码提示)
• WePY Plugin For IntelliJ Platform - 让PhpStorm/WebStorm全面支持WePY的开发，包括API(原生/WePY)和组件(官方/自定义)的自动完成/错误检查/高亮/不依赖Vue/...

教程

• 全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！
  • 第一弹
  • 第二弹
  • 第三弹
  • 第四弹
  • 第五弹
• 微信小程序剖析(微信公众号)
  • 「官方示例代码」浅析
  • （一）：运行机制
  • （二）：框架原理
  • （三）：让小程序运行在Chrome浏览器上
  • （四）：原生的实时DOM转Virtual DOM
  • （五）：创建一个兼容「微信小程序」的Web框架
• 微信小程序架构分析(上)
• 微信小程序架构分析(中)
• 微信小程序架构分析(下)
• 首个微信小程序开发教程(掘金)
• 微信小程序开发教程！(稀土区)
• hello-weapp 微信小程序最简示例教程(dingyiming/weapp-example)
• 微信小应用 IDE 的安装以及安装过程的常见问题(champion32/WeAppIdeIssue)
• 分享我用 cnode 社区 api 做微信小应用的入门过程(CNode)
• 微信小程序开发教程-从零开始(简书)
• 我所理解的小程序 - 小程序真机调试(seahub)
• 微信小程序集成 Redux(Segmentfault)
• 在微信小程序里实现图片预加载组件(凹凸实验室)
• 基于 Airtest 的微信小程序自动化测试 (Android & iOS)

视频教程

• 微信小程序开发视频教程 (youtube)

文章

• 未来是 h5 的：写在微信应用号发布之际(CNode)
• 微信“小程序”让我脑洞大开(简书)
• 关于微信小程序（应用号）的底层逻辑分析和拥抱建议(知乎专栏)
• 微信小程序和谷歌 PWA 有什么关系？(微信公众号)
• 在微信小程序里，我们要怎样做数据分析（上）(微信公众号)
• 一张图看微信小程序(前端之路 - DRY)
• 微信小程序要这样解读(CSDN)
• 一名 Android 开发者的微信小程序填坑之路(1)
• 小程序开发利器：Matchmaker(CSDN)
• 微信小程序开发三宗罪和解决方案(SegmentFault)
• 使用 Labrador 0.3 构建 ES6/ES7 标准模块化微信小程序(SegmentFault)
• 微信小程序真机测试多个 DEMO)(微信公众号)
• 微信小程序真机测试视频源文件
• WordPress 网站基于 REST API 开发“微信小程序”实战
• WordPress 网站开发“微信小程序“实战(二)
• WordPress 网站开发“微信小程序“实战(三)
• 解决微信小程序组件所在页面无返回按钮的问题

组件

• weui-wxss ★5000+ - 同微信原生视觉体验一致的基础样式库
• zanui-weapp ★4000+ - 高颜值、好用、易扩展的微信小程序 UI 库
• wxParse ★3000+ - 微信小程序富文本解析自定义组件，支持 HTML 及 markdown 解析
• wx-charts ★1000+ - 微信小程序图表 charts 组件
• wux ★1000+ - 微信小程序自定义组件
• wemark ★400+ - 微信小程序 Markdown 渲染库
• wxapp-img-loader ★400+ - 微信小程序图片预加载组件
• we-cropper ★400+ - 微信小程序图片裁剪工具
• 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 - 微信小程序城市选择器
• WeiXinProject - 微信小程序列表上拉刷新和上拉加载
• wepy-com-charts - 微信小程序 wepy 图表控件
• wxapp-lock - 微信小程序手势解锁
• weapp.socket.io - socket.io 风格的 websocket 类库
• weapp-polyfill - [w3c 标准 API polyfill
• wxPromise - 微信小程序 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

Demo

• EastWorld/wechat-app-mall ★3000+ - 微信小程序商城
• tumobi/nideshop-mini-program ★2000+ - 基于 Node.js + MySQL 开发的开源微信小程序商城
• RebeccaHanjw/weapp-wechat-zhihu ★800+ - 仿知乎
• 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 重邮
• 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标注 （不再维护）
• 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+ - 新闻阅读器
• Symous/WechatApp-BaisiSister - 百思不得姐
• 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 任务清单
• yaoshanliang/weapp-ssha - 企业宣传小程序
• bruintong/wechat-webapp-douban-movie - 豆瓣电影
• bruintong/wechat-webapp-douban-location - 豆瓣同城
• arkilis/weapp-jandan - 煎蛋
• bodekjan/wechat-weather - 微信天气
• jasscia/ChristmasHat - 我要圣诞帽
• yaoshanliang/weapp-jump - 跳一跳
• nanwangjkl/sliding_puzzle - 滑块拼图
• yaoshanliang/weapp-monument-valley - 纪念碑谷
• 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 视频上传等）

 

内容来自： https://github.com/justjavac/awesome-wechat-weapp

参考：https://www.runoob.com/w3cnote/wx-xcx-repo.html