微信小程序開發資源彙總

微信小程序中就四種類型的文件

• 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