溫馨提示sortable:由于本文包含大量外部鏈接和 GIF 演示圖sortable,墻裂建議小伙伴們點(diǎn)擊 “閱讀原文“ 進(jìn)行閱讀。:)
原文收錄在sortable我的 GitHub 博客 (https://github.com/jawil/blog) ,喜歡的可以關(guān)注最新動(dòng)態(tài),大家一起多交流學(xué)習(xí),共同進(jìn)步,以學(xué)習(xí)者的身份寫博客,記錄點(diǎn)滴。
按照格式推薦好用的插件有福利哦,說不定會(huì)送1024論壇邀請(qǐng)碼,好自為之,sortable你懂的,嘿嘿嘿。
由于github的issues沒有TOC菜單欄導(dǎo)航,所以這里方便大家查看,先安利一款Chrome瀏覽器的插件,感謝github用戶 @BBcaptain 推薦。點(diǎn)擊我呀,進(jìn)入商店,自備梯子,如果不會(huì)翻墻,趕緊轉(zhuǎn)行。。。
Echo.js – 簡單易用的圖片延遲加載插件
github:
https://github.com/toddmotto/echo
官方網(wǎng)站:
https://toddmotto.com/echo-js-simple-java-image-lazy-loading/
star:3k+
Install:
npm:npm install echo-js
bower:bower install echojs
大小:2KB
功能介紹:
Echo.js 是一個(gè)獨(dú)立的延遲加載圖片的 Java 插件。Echo.js 不依賴第三方庫,壓縮后不到1KB大小。 延遲加載是提高網(wǎng)頁首屏顯示速度的一種很有效的方法,當(dāng)圖片元素進(jìn)入窗口可視區(qū)域的時(shí)候,它就會(huì)改變圖像的 src 屬性,從服務(wù)端加載所需的圖片,這也是一個(gè)異步的過程。 Demo:效果預(yù)覽地址:https://jawil.github.io/demo/echo.js/
Demo源碼:https://github.com/jawil/jawil.github.io/tree/master/demo/echo.js
Lazyr.js – 延遲加載圖片(Lazy Loading)
github:
https://github.com/callmecavs/layzr.js
官方網(wǎng)站:
http://callmecavs.com/layzr.js/
star:5k+
Install:
npm:npm install layzr.js --save
大小:2.75 KB
功能介紹: Lazyr.js 是一個(gè)小的、快速的、現(xiàn)代的、相互間無依賴的圖片延遲加載庫。通過延遲加載圖片,讓圖片出現(xiàn)在(或接近))視窗才加載來提高頁面打開速度。這個(gè)庫通過保持最少選項(xiàng)并最大化速度。
better-scroll.js – 小巧,靈活的 Java 模擬滾動(dòng)條的插件
github:
https://github.com/ustbhuangyi/better-scroll
官方網(wǎng)站:
https://ustbhuangyi.github.io/better-scroll/
star:300+
Install:
npm install better-scroll --save-dev
importBScrollfrom'better-scroll';
大小:24 KB
功能介紹:
better-scroll 是一個(gè)只有24.8KB的 Java 模擬瀏覽器自帶滾動(dòng)條的插件,是在iscroll開源的基礎(chǔ)上進(jìn)行優(yōu)化的一款插件,簡單好用,輕巧高性能,功能強(qiáng)大,API通俗易懂,是一款優(yōu)秀的scroll插件,拋棄原生滾動(dòng)條,從現(xiàn)在做起。
Demo:效果預(yù)覽地址:https://jawil.github.io/demo/eleme/(PC端切換到移動(dòng)模式)
Demo源碼:
https://github.com/jawil/webpack2注:在ustbhuangyi的源碼下改進(jìn)了一下,做成多頁面,技術(shù)棧:webpack2+vue.js2+sass+axios
better-picker – 一款輕量級(jí)IOS風(fēng)格的Java選擇器
github:
https://github.com/ustbhuangyi/picker
官方網(wǎng)站:
http://ustbhuangyi.github.io/picker/
star:200+
Install:
npm: npm install better-picker --save-dev
importPickerfrom'better-picker'
大小:46.5 KB
功能介紹: 移動(dòng)端最好用的的篩選器組件,高仿 ios 的 UIPickerview ,非常流暢的體驗(yàn),原生 JS 實(shí)現(xiàn),不依賴任何插件和第三方庫。
Demo:
效果預(yù)覽地址:http://ustbhuangyi.github.io/picker/
Sortable – 一款用于實(shí)現(xiàn)元素拖拽排序的功能的插件
github:
https://github.com/RubaXa/Sortable
官方網(wǎng)站:
http://rubaxa.github.io/Sortable/
star:9k+
Install:
Bower: bower install sortablejs --save
npm: npm install sortablejs
大?。? KB
功能介紹:
Sortable:現(xiàn)代瀏覽器上用于實(shí)現(xiàn)元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依賴 jQuery這玩意。
Demo:效果預(yù)覽地址:
http://rubaxa.github.io/Sortable/
slick – 功能異常強(qiáng)大的一個(gè)圖片滑動(dòng)切換效果庫
github:
https://github.com/kenwheeler/slick
官方網(wǎng)站:
http://kenwheeler.github.io/slick/
star:17k+
Install:
Bower: bower install slick-carousel --save
npm: npm install slick-carousel
CDNs:
https://cdnjs.com/libraries/slick-carousel
https://www.jsdelivr.com/projects/jquery.slick
大小:40 KB
功能介紹:
slick 是一個(gè)功能異常強(qiáng)大的一個(gè)圖片滑動(dòng)切換效果庫,接口豐富,支持各種動(dòng)畫和各種樣式的切換滑動(dòng),唯一的缺點(diǎn)就是基于jQuery,基本廢了,現(xiàn)在沒人喜歡用jQuery,該淘汰了。。。支持 RequireJS 以及 Bower 安裝。
Demo:效果預(yù)覽地址:http://kenwheeler.github.io/slick/
swipe – 非常輕量級(jí)的一個(gè)圖片滑動(dòng)切換效果庫
github:
https://github.com/lyfeyaj/Swipe
官方網(wǎng)站:
http://lyfeyaj.github.io/swipe/
star:200+
Install:
Bower: bower install swipe-js --save
npm: npm install swipe-js
大?。? KB
功能介紹:
swipe:非常輕量級(jí)的一個(gè)圖片滑動(dòng)切換效果庫, 性能良好, 尤其是對(duì)手機(jī)的支持, 壓縮后的大小約 5kb??梢越Y(jié)合 jQuery、RequireJS 使用。
Demo:效果預(yù)覽地址:http://lyfeyaj.github.io/swipe/
Slideout.js – 觸摸滑出式 Web App 導(dǎo)航菜單
github:
https://github.com/mango/slideout
官方網(wǎng)站:
https://slideout.js.org/
star:6k+
Install:
npm:npm install slideout
spm:spm install slideout
bower:bower install slideout.js
component:component install mango/slideout
< src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></>
大?。? KB
功能介紹:
Slideout.js 是為您的移動(dòng) Web 應(yīng)用開發(fā)的觸摸滑出式的導(dǎo)航菜單。它沒有依賴,自由搭配簡單的標(biāo)記,支持原生的滾動(dòng),您可以輕松地定制它。它支持不同的 CSS3 轉(zhuǎn)換和過渡。最重要的是,它只是4KB 。
Demo:效果預(yù)覽地址:https://slideout.js.org/
SweetAlert – 替代 Alert 的漂亮的提示效果
github:
https://github.com/t4t5/sweetalert
官方網(wǎng)站:
http://t4t5.github.io/sweetalert/
star:15k+
Install:
bower:bower install sweetalert
npm:npm install sweetalert
< src="dist/sweetalert.min.js"></>
<link rel="stylesheet"type="text/css"href="dist/sweetalert.css">
大?。?6 KB
功能介紹:
Sweet Alert 是一個(gè)替代傳統(tǒng)的 Java Alert 的漂亮提示效果。SweetAlert 自動(dòng)居中對(duì)齊在頁面中央,不管您使用的是臺(tái)式電腦,手機(jī)或平板電腦看起來效果都很棒。另外提供了豐富的自定義配置選擇,可以靈活控制。
Demo:效果預(yù)覽地址:http://t4t5.github.io/sweetalert/
類似插件:limonte/sweetalert2,好像這個(gè)最近還在更新,這個(gè)感覺更漂亮,大同小異,這里不多做介紹。
github:
https://github.com/limonte/sweetalert2
官方網(wǎng)站:
https://limonte.github.io/sweetalert2/
Awesomplete.js - 比datalist更強(qiáng)大更實(shí)用,零依賴的簡單自動(dòng)補(bǔ)全插件
github:
https://github.com/leaverou/awesomplete/
官方網(wǎng)站:
http://leaverou.github.io/awesomplete/
star:5k+
Install: npm:npm install awesomplete
大?。? KB
功能介紹:
Awesomplete 是一款超輕量級(jí)的,可定制的,簡單的自動(dòng)完成插件,零依賴,使用現(xiàn)代化標(biāo)準(zhǔn)構(gòu)建。你可以簡單地添加 awesomplete 樣式,讓它自動(dòng)處理(你仍然可以通過指定 HTML 屬性配置更多選項(xiàng)),您可以用幾行 JS 代碼,提供更多的自定義。
Demo:效果預(yù)覽地址:http://leaverou.github.io/awesomplete/
Cleave.js – 自動(dòng)格式化表單輸入框的文本內(nèi)容
github:
https://github.com/nosir/cleave.js/
官方網(wǎng)站:
http://nosir.github.io/cleave.js/
star:6k+
Install:
npm:npm install --save cleave.js
bower:bower install --save cleave.js
大?。?1.1 KB
功能介紹:
Cleave.js 有一個(gè)簡單的目的:幫助你自動(dòng)格式輸入的文本內(nèi)容。 這個(gè)想法是提供一個(gè)簡單的方法來格式化您的輸入數(shù)據(jù)以增加輸入字段的可讀性。通過使用這個(gè)庫,您不需要編寫任何正則表達(dá)式來控制輸入文本的格式。然而,這并不意味著取代任何驗(yàn)證或掩碼庫,你仍應(yīng)在后端驗(yàn)證數(shù)據(jù)。它支持信用卡號(hào)碼、電話號(hào)碼格式(支持各個(gè)國家)、日期格式、數(shù)字格式、自定義分隔符,前綴和塊模式等,提供 CommonJS/AMD 模式以及ReactJS 組件端口。
Demo:效果預(yù)覽地址:http://nosir.github.io/cleave.js/
Immutable.js – Java 不可變數(shù)據(jù)集合(Facebook出品)
github:
https://github.com/facebook/immutable-js
官方網(wǎng)站:
http://facebook.github.io/immutable-js/
star:18k+
Install:
npm install immutable --S-D
大?。?0 KB
功能介紹:
不可變數(shù)據(jù)是指一旦創(chuàng)建就不能被修改的數(shù)據(jù),使得應(yīng)用開發(fā)更簡單,允許使用函數(shù)式編程技術(shù),比如惰性評(píng)估。Immutable JS 提供一個(gè)惰性 Sequence,允許高效的隊(duì)列方法鏈,類似 map 和 filter ,不用創(chuàng)建中間代表。Immutable.js 提供持久化的列表、堆棧、Map, 以及 OrderedMap 等,最大限度地減少需要復(fù)制或緩存數(shù)據(jù)。
Demo:
<src="immutable.min.js"></>
<>
varmap1 = Immutable.Map({a:1, b:2, c:3});
varmap2 = map1.set('b', 50);
map1.get('b'); // 2
map2.get('b'); // 50
</>
更多信息和探討請(qǐng)移步,這里不多做介紹:facebook immutable.js 意義何在,使用場景sortable?(https://www.zhihu.com/question/28016223)
Popmotion.js – 小巧,靈活的 Java 運(yùn)動(dòng)引擎
github:
https://github.com/Popmotion/popmotion
官方網(wǎng)站:
https://popmotion.io/
star:3k+
Install:
npm install --save popmotion
import{ tween } from'popmotion';
大?。?2 KB
功能介紹:
Popmotion 是一個(gè)只有12KB的 Java 運(yùn)動(dòng)引擎,可以用來實(shí)現(xiàn)動(dòng)畫,物理效果和輸入跟蹤。原生的DOM支持:CSS,SVG,SVG路徑和DOM屬性的支持,開箱即用。Popmotion 網(wǎng)站上有很多很贊的效果,趕緊去體驗(yàn)一下。
Demo:效果預(yù)覽地址:http://codepen.io/popmotion/pen/egwMGQ
Dynamics.js - 創(chuàng)建逼真的物理動(dòng)畫的 JS 庫
github:
https://github.com/michaelvillar/dynamics.js
官方網(wǎng)站:
http://dynamicsjs.com/
star:6k+
Install:
npm: npm install dynamics.js
bower: bower install dynamics.js
大小:20 KB
功能介紹:
Popmotion 是一個(gè)只有12KB的 Java 運(yùn)動(dòng)引擎,可以用來實(shí)現(xiàn)動(dòng)畫,物理效果和輸入跟蹤。原生的DOM支持:CSS,SVG,SVG路徑和DOM屬性的支持,開箱即用。Popmotion 網(wǎng)站上有很多很贊的效果,趕緊去體驗(yàn)一下。
Demo:效果預(yù)覽地址:http://dynamicsjs.com/
Rainyday.js – 使用 Java 實(shí)現(xiàn)雨滴效果
github:
https://github.com/maroslaw/rainyday.js
官方網(wǎng)站:
http://maroslaw.github.io/rainyday.js/
star:5k+
Install:
在github的dist目錄下載rainyday.min.js
大?。?0 KB
功能介紹:
Rainyday.js 背后的想法是創(chuàng)建一個(gè) Java 庫,利用 HTML5 Canvas 渲染一個(gè)雨滴落在玻璃表面的動(dòng)畫。Rainyday.js 有功能可擴(kuò)展的 API,例如碰撞檢測和易于擴(kuò)展自己的不同的動(dòng)畫組件的實(shí)現(xiàn)。它是一個(gè)使用 HTML5 特性純 Java 庫,支持大部分現(xiàn)代瀏覽器。
Demo:效果預(yù)覽地址:http://maroslaw.github.io/rainyday.js/demo012_1.html
Swiper – 經(jīng)典的移動(dòng)觸摸滑塊輪播插件
github:
https://github.com/nolimits4web/Swiper
官方網(wǎng)站:
http://idangero.us/swiper/
star:11.8k+
Install:
在github上下載
大小:暫不確定,按需引入
功能介紹:
Swiper 是移動(dòng) Web 開發(fā)中最常用的滑塊插件,是一款免費(fèi)的,最現(xiàn)代化的移動(dòng)觸摸滑塊,支持硬件加速的轉(zhuǎn)換和驚人的原生表現(xiàn)。它的目的是在移動(dòng)網(wǎng)站,移動(dòng) Web 應(yīng)用程序和 Hygrid 混合應(yīng)用程序中使用。最初的設(shè)計(jì)主要是為 iOS,但同時(shí)也支持最新的 Android,Windows Phone 8 和現(xiàn)代的桌面瀏覽器。
Demo:效果預(yù)覽地址:http://idangero.us/swiper/#.WOik3l--uaW
Snabbt.js – 極簡的 Java 動(dòng)畫庫
github:
https://github.com/daniel-lundin/snabbt.js
官方網(wǎng)站:
http://daniel-lundin.github.io/snabbt.js/
star:5k+
Install:
bower:bower install snabbt.js
npm:npm install snabbt.js
CDNs:
https://cdnjs.com/libraries/snabbt.js
http://www.jsdelivr.com/#!snabbt
大?。?6 KB
功能介紹:
Snabbt.js 是一個(gè)簡約的 Java 動(dòng)畫庫。它會(huì)平移,旋轉(zhuǎn),縮放,傾斜和調(diào)整你的元素。通過矩陣乘法運(yùn)算,變換等可以任何你想要的方式進(jìn)行組合。最終的結(jié)果通過 CSS3 變換矩陣設(shè)置。
Demo:效果預(yù)覽地址:http://daniel-lundin.github.io/snabbt.js/periodic.html
imagesLoaded – 檢測網(wǎng)頁中的圖片是否加載完成
github:
https://github.com/desandro/imagesloaded
官方網(wǎng)站:
http://imagesloaded.desandro.com/
star:6k+
Install:
Bower: bower install imagesloaded --save
npm: npm install imagesloaded
CDNs:
< src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></>
< src="https://unpkg.com/imagesloaded@4.1/imagesloaded.pkgd.js"></>
大?。? KB
功能介紹:
imagesLoaded 是一個(gè)用于來檢測網(wǎng)頁中的圖片是否載入完成的 Java 工具庫。支持回調(diào)的獲取圖片加載的進(jìn)度,還可以綁定自定義事件??梢越Y(jié)合 jQuery、RequireJS 使用。
Demo:效果預(yù)覽地址:http://codepen.io/desandro/full/hlzaw/
Fort.js – 時(shí)尚、現(xiàn)代的表單填寫進(jìn)度提示效果
github:
https://github.com/idriskhenchil/Fort.js
官方網(wǎng)站:
https://github.com/idriskhenchil/Fort.js
star:800+
Install:
CDN:
css:
https://cdnjs.cloudflare.com/ajax/libs/Fort.js/2.0.0/fort.min.css
js:
https://cdnjs.cloudflare.com/ajax/libs/Fort.js/2.0.0/fort.min.js
大小:6 KB
功能介紹:
Fort.js 是一款用于時(shí)尚、現(xiàn)代的表單填寫進(jìn)度提示效果的 Java 庫,你需要做的就是添加表單,剩下的任務(wù)就交給 Fort.js 算法了,使用非常簡單。提供了Default、Gradient、Sections 以及 Flash 四種效果,滿足開發(fā)的各種場合需要。
Demo:效果預(yù)覽地址:http://idriskhenchil.github.io/default/index.html
MagicSuggest – Bootstrap 主題的多選組合框
github:
https://github.com/nicolasbize/magicsuggest
官方網(wǎng)站:
http://nicolasbize.com/magicsuggest/
star:1k+
Install:
github自行進(jìn)行下載
大?。?1.8 KB
功能介紹:
MagicSuggest 是專為 Bootstrap 主題開發(fā)的多選組合框。它支持自定義呈現(xiàn),數(shù)據(jù)通過 Ajax 異步獲取,使用組件自動(dòng)過濾。它允許空間免費(fèi)項(xiàng)目,也有動(dòng)態(tài)加載固定的建議。
Demo:效果預(yù)覽地址:http://nicolasbize.com/magicsuggest/examples.html
Numeral.js – 格式化和操作數(shù)字的 Java 庫
github:
https://github.com/adamwdraper/Numeral-js
官方網(wǎng)站:
http://numeraljs.com/
star:4k+
Install:
npm: npm install numeral
CDNs:
< src="http://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></>
大?。?0 KB
功能介紹:
Numeral.js 是一個(gè)用于格式化和操作數(shù)字的 Java 庫。數(shù)字可以格式化為貨幣,百分比,時(shí)間,甚至是小數(shù),千位,和縮寫格式,功能十分強(qiáng)大。支持包括中文在內(nèi)的17種語言。
Demo:
varmyNumeral = numeral(1000);
varvalue = myNumeral.value();
// 1000
varmyNumeral2 = numeral('1,000');
varvalue2 = myNumeral2.value();
// 1000
Draggabilly – 輕松實(shí)現(xiàn)拖放功能(Drag & Drop)
github:
https://github.com/desandro/draggabilly
官方網(wǎng)站:
http://draggabilly.desandro.com/
star:2k+
Install:
Bower: bower install draggabilly --save
npm: npm install draggabilly
CDNs:
< src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.min.js"></>
< src="https://npmcdn.com/draggabilly@2.1/dist/draggabilly.pkgd.js"></>
大?。? KB
功能介紹:
Draggabilly 是一個(gè)很小的 Java 庫,專注于拖放功能。只需要簡單的設(shè)置參數(shù)就可以在你的網(wǎng)站用添加拖放功能。兼容 IE8+ 瀏覽器,支持多點(diǎn)觸摸??梢造`活綁定事件,支持 RequireJS 以及 Bower 安裝。
Demo:效果預(yù)覽地址:http://draggabilly.desandro.com/
Quill – 可以靈活自定義的開源的富文本編輯器
github:
https://github.com/quilljs/quill/
官方網(wǎng)站:
https://quilljs.com
star:12k+
Install:
npm: npm install quill
CDNs:
<!-- MainQuilllibrary -->
< src="http://cdn.quilljs.com/1.0.0/quill.js"type="text/java"></>
< src="http://cdn.quilljs.com/1.0.0/quill.min.js"type="text/java"></>
<!-- Themeincluded stylesheets -->
<link >
<link >
<!-- Corebuild withnotheme, formatting, non-essential modules -->
<link >
< src="http://cdn.quilljs.com/1.0.0/quill.core.js"type="text/java"></>
大?。盒枨蟛煌笮〔煌?/p>
功能介紹:
Quill 的建立是為了解決現(xiàn)有的所見即所得(WYSIWYG)的編輯器本身就是所見即所得(指不能再擴(kuò)張)的問題。如果編輯器不正是你想要的方式,這是很難或不可能對(duì)其進(jìn)行自定義以滿足您的需求。
Quill 旨在通過把自身組織成模塊,并提供了強(qiáng)大的 API 來構(gòu)建額外的模塊來解決這個(gè)問題。它也并沒有規(guī)定你用樣式來定義編輯器皮膚。Quill 還提供了所有你希望富文本編輯器說用于的功能,包括輕量級(jí)封裝,眾多的格式化選項(xiàng),以及廣泛的跨平臺(tái)支持。
Demo:效果預(yù)覽地址:https://quilljs.com/
basket.js – 基于 LocalStorage 的資源加載器
github:
https://github.com/addyosmani/basket.js
官方網(wǎng)站:
https://addyosmani.com/basket.js/
star:2k+
Install:
Bower: bower install basket.js --save
npm: npm install basket.js
大?。? KB
功能介紹:
basket.js是一款基于 LocalStorage 的資源加載器,可以用來緩存 和 css, 手機(jī)端使用速度快于瀏覽器直接緩存。
Demo:效果預(yù)覽地址:https://addyosmani.com/basket.js/
scrollReveal.js – 使元素以非常酷帥的方式進(jìn)入畫布 (Viewpoint)
github:
https://github.com/jlmakes/scrollreveal
官方網(wǎng)站:
https://scrollrevealjs.org/
star:12k+
Install:
Bower: bower install scrollreveal --save
npm: npm install scrollreveal
CDNs:
< src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></>
大?。? KB
功能介紹:
scrollReveal.js 是一個(gè)用于使元素以非??釒浀姆绞竭M(jìn)入畫布的 Java 工具庫。輕量級(jí),高性能,無依賴的一個(gè)小巧酷炫的庫。 Demo:效果預(yù)覽地址:https://scrollrevealjs.org/
moment.js – 一款輕量級(jí)的Java日期處理類庫
github:
https://github.com/moment/moment/
官方網(wǎng)站:
http://momentjs.com/
star:30k+
Install:
bower install moment --save # bower
npm install moment --save # npm
yarn add moment # Yarn
Install-PackageMoment.js # NuGet
spm install moment --save # spm
meteor add momentjs:moment # meteor
大?。?6.6 KB
功能介紹:
moment.js是一個(gè)輕量級(jí)的Java庫日期解析、驗(yàn)證操作,格式化日期的庫。
Demo:效果預(yù)覽地址:http://momentjs.com/
infinite-scroll – 一款滾動(dòng)加載按需加載的輕量級(jí)插件
github:
https://github.com/infinite-scroll/infinite-scroll
官方網(wǎng)站:
http://www.infinite-scroll.com/
star:4k+
Install:
github自行下載
大?。?0 KB
功能介紹:
infinite-scroll是一款滾動(dòng)加載,滾動(dòng)到最下到自動(dòng)加載的輕量級(jí)Java插件,簡單實(shí)用,按需加載提高用戶體驗(yàn),非常適合移動(dòng)端使用,配合上面的圖片懶加載如虎添翼。
Demo:效果預(yù)覽地址:http://www.dazeddigital.com/
歡迎大家按照格式補(bǔ)充,持續(xù)更新,有什么好用的輪子趕緊滾起來吧!
推薦有福利,送1024論壇邀請(qǐng)碼,嘿嘿嘿。
tips
華為開發(fā)者大賽”,由管理員邀請(qǐng)進(jìn)入 SF「2017 華為開發(fā)者大賽交流群