鍓嶈█鐪嬩簡Sprite鐨凴enderingReacttotheembeddedLCDscreen锛岃寰楀緢鏈夋剰鎬濄€俁eact鍙互娓叉煋鍒板祵鍏ュ紡娑叉櫠灞忥紝Vue涔熷彲浠ュ悧锛熼偅涔堣繖绡囨枃绔犳垜浠鍋氱殑灏辨槸锛氶【鍚嶆€濅箟锛屽氨鏄皢Vue娓叉煋鍒板祵鍏ュ紡娑叉櫠灞忎笂銆傝繖閲屼娇鐢ㄧ殑娑叉櫠灞忔槸SSD1306锛屽昂瀵镐负0.96鑻卞锛屽垎杈ㄧ巼涓?28x64銆傝鎶奦ue娓叉煋鍒版恫鏅跺睆涓婏紝鎴戜滑杩橀渶瑕佷竴涓ˉ鎺ュ櫒锛屾ˉ鎺ュ櫒蹇呴』瑕佹湁鎺у埗娑叉櫠灞忓拰杩愯浠ｇ爜鐨勮兘鍔涖€傛爲鑾撴淳鐨勭‖浠跺鎺ヨ兘鍔涘拰鍙紪绋嬫€ц嚜鐒舵弧瓒宠繖涓潯浠躲€傛渶鍚庝竴涓棶棰樻潵浜嗭紝鎴戜滑鐢ㄤ粈涔堟妧鏈潵瀹炵幇鍛紵杩欓噷鎴戦€夋嫨Node.js銆傜悊鐢憋細闃跨壒浼嶅痉瀹氬緥锛氣€滀换浣曞彲浠ョ敤JavaScript缂栧啓鐨勫簲鐢ㄧ▼搴忔渶缁堥兘灏嗙敤JavaScript缂栧啓銆傗€濔煇堕┍鍔ㄧ‖浠舵垜鏄竴涓ぇNode.js琛宯pminstall閬嶅竷涓栫晫鍚勫湴銆傪煇惰繖涓湁瓒ｇ殑瀹炶返鍙互鍒嗕负鍑犱釜姝ラ锛氬湪Node.js涓婅繍琛孷ue锛屽皢RaspberryPi杩炴帴鍒板睆骞曡姱鐗囷紝Node.js椹卞姩纭欢锛孴alkischeap,Let'sGo!!!璺ㄧ娓叉煋锛屾棤璁烘槸鍩轰簬React杩樻槸ReactNative鎵€鏍囨鐨勨€淟earnOnce锛學riteAnywhere鈥濓紝鎴栬€匴eex鍩轰簬Vue鎵€鏍囨鐨勨€淲riteOnce锛孯unEverywhere鈥濓紝鏈川涓婇兘鏄湪寮鸿皟瀹冧滑鐨勮法绔覆鏌撹兘鍔?閭ｄ箞浠€涔堟槸璺ㄧ娓叉煋鍛紵React:ReactNativeTaro...Vue:WeexUniApp...鍚勭鍓嶇妗嗘灦鏉ヤ簡锛屽墠绔伐绋嬪笀鎶辨€ㄥ涓嶄細浜唦鑰佹澘浠湅鍒伴兘绗戜簡锛孉ppSingle,鍓嶇鎷嗗垎,灏忕▼搴忓崟浣?鍓嶇鍚?PC/H5,鍓嶇鏅曘€俿kr~杩欏嚑涓法骞冲彴妗嗘灦鐨勫師鐞嗗叾瀹炲ぇ鍚屽皬寮傘€傞€夋嫨Vue/React浣滀负DSL锛屼互DSL妗嗘灦涓烘爣鍑嗭紝鍦ㄦ瘡涓€绔垎鍒紪璇戙€傚湪杩愯鏃讹紝姣忎竴绔兘浣跨敤鑷繁鐨勬覆鏌撳紩鎿庯紙RenderEngines锛夎繘琛屾覆鏌撱€傛覆鏌撳紩鎿庝笉闇€瑕佸叧蹇冧笂灞侱SL鐨勮娉曞拰鏇存柊绛栫暐锛屽彧闇€瑕佸鐞咼SFramework涓粺涓€瀹氫箟鐨勮妭鐐圭粨鏋勫拰娓叉煋鎸囦护銆傛鏄洜涓烘湁浜嗚繖涓覆鏌撳眰鐨勬娊璞★紝鎵嶄娇寰楄法骞冲彴/妗嗘灦鎴愪负鍙兘銆俈ue鍜孯eact鐜板湪閮藉疄鐜颁簡鑷畾涔夋覆鏌撳櫒銆備笅闈㈢畝鍗曚粙缁嶄竴涓嬶細ReactReconcilerReact16閲囩敤浜嗕竴涓柊鐨凴econciler锛屽叾鍐呴儴浣跨敤浜咶iber鏋舵瀯銆俽eact-reconciler妯″潡鏄熀浜巚16鐨勬柊Reconciler瀹炵幇锛屽畠鎻愪緵浜嗗垱寤篟eact鑷畾涔夋覆鏌撳櫒鐨勮兘鍔涖€俢onstReconciler=require("react-reconciler");constHostConfig={//浣犻渶瑕佸湪杩欓噷瀹炵幇涓€浜涙柟娉曘€?/鏈夊叧鏇村淇℃伅鍜岀ず渚嬶紝璇峰弬瑙佷笅鏂囥€倉;constMyRenderer=Reconciler(HostConfig);constRendererPublicAPI={render(element,container,callback){//璋冪敤MyRenderer.updateContainer()浠ュ畨鎺掑鏍圭殑鏇存敼銆?/鏈夊叧瀹為檯绀轰緥锛岃鍙傞槄ReactDOM銆丷eactNative鎴朢eactART銆倉,};module.exports=RendererPublicAPI;VuecreateRenderervue3鎻愪緵浜哻reateRenderAPI锛岃鎴戜滑鍒涘缓鑷畾涔夋覆鏌撳櫒銆俢reateRenderer鍑芥暟鎺ュ彈涓や釜閫氱敤鍙傛暟锛欻ostNode鍜孒ostElement锛屽垎鍒搴斿涓荤幆澧冧腑鐨凬ode鍜孍lement绫诲瀷銆傝嚜瀹氫箟娓叉煋鍣ㄥ彲浠ュ儚杩欐牱浼犲叆鐗瑰畾浜庡钩鍙扮殑绫诲瀷锛歩mport{createRenderer}from'vue'const{render,createApp}=createRenderer({patchProp,...nodeOps})inNodeRunVueSFCToJSon.jsHelloVue{{time}}HiSSD3306瑕佸皢Vue娓叉煋鍒癓CD灞忓箷锛屾垜浠鍏堥渶瑕佷娇Vue鑳藉鍦∟ode.js涓婅繍琛岋紝浣嗘槸涓婇潰鐨凷FC涓嶈兘琚玁ode.js璇嗗埆锛屽畠鍙槸Vue鐨勪竴绉嶇紪绋嬭鑼冿紝鏄竴绉嶆柟瑷€銆傛墍浠ユ垜浠鍋氱殑灏辨槸鍏堝皢SFC杞垚js銆傝繖閲屾垜浣跨敤Rollup灏哠FC鎵撳寘杞崲涓篔S锛堢浉鍏抽厤缃繖閲屽氨涓嶅暟鍡︿簡锛岃创涓紶閫侀棬锛夈€傝嚦姝わ紝Node.js鍙互鎴愬姛杩愯鎵撳寘鍚庣殑js浠ｇ爜锛岃繖杩樹笉澶熴€傛鏃禫ue缁勪欢鐨勭姸鎬佹洿鏂版棤娉曞悓姝ュ埌Node.js銆傚垱寤篊ustomRenderer缁勪欢鐘舵€佹洿鏂版垜浠渶瑕侀€氱煡Node.js鏇存柊鍜屾覆鏌揕CD灞忓箷鍐呭锛屾垜浠渶瑕佸垱寤轰竴涓嚜瀹氫箟鐨勨€滄洿鏂扮瓥鐣モ€濄€傝繖閲岄渶瑕佺敤鍒版垜浠墠闈㈡彁鍒扮殑鑷畾涔夋覆鏌撳櫒锛歝reateRendererAPI銆備笅闈㈢畝鍗曚粙缁嶄竴涓嬫垜浠殑鐩稿叧浣跨敤锛?/index.js//customrendererimport{createApp}from"./renderer.js";//componentimportAppfrom"./App.vue";//containerfunctiongetContainer(){//...}//鍒涘缓娓叉煋鍣ㄥ苟灏嗙粍浠舵寕杞藉埌瀹瑰櫒涓湪鑷畾涔塶odeOpsconstrender=createRenderer({//鍒涘缓鍏冪礌createElement(type){},//鎻掑叆鍏冪礌insert(el,parent){},//閬撳叿鏇存柊patchProp(el,key,preValue,nextValue){},//璁剧疆鍏冪礌鏂囨湰setElementText(node,text){},//涓嬮潰蹇界暐锛屾劅鍏磋叮鐨勭闉嬪彲浠ヨ嚜琛屽涔爎emove(el){},createText(type){},parentNode(node){},nextSibling(nide){},});exportfunctioncreateApp(root){returnrender.createApp(root);}vue娓叉煋鍣ㄩ粯璁ゅ疄鐜颁簡Web骞冲彴鐨凞OM缂栫▼鎺ュ彛锛屽皢VirtualDOM娓叉煋鎴愮湡瀹炵殑DOM銆備絾鏄繖涓覆鏌撳櫒鍙兘杩愯鍦ㄦ祻瑙堝櫒涓紝涓嶅叿澶囪法骞冲彴鑳藉姏銆傚洜姝わ紝鎴戜滑蹇呴』閲嶅啓nodeOps鐩稿叧鐨勯挬瀛愬嚱鏁帮紝瀹炵幇瀵瑰簲瀹夸富鐜鍏冪礌鐨勫鍒犳敼鏌ユ搷浣溿€傛帴涓嬫潵鎴戜滑瀹氫箟涓€涓€傞厤鍣ㄦ潵瀹炵幇鐩稿叧鐨勯€昏緫銆傚湪Adapter瀹炵幇涔嬪墠锛屽厛鐪嬩竴涓嬫垜浠瀹炵幇鐨勯€昏緫锛氬垱寤哄厓绱犲疄渚嬶紙create锛夊皢鍏冪礌瀹炰緥鎻掑叆鍒板鍣ㄤ腑锛屽綋瀹瑰櫒绠＄悊锛堟彃鍏ワ級鐘舵€佸彉鍖栨椂锛岄€氱煡瀹瑰櫒鏇存柊锛堟洿鏂帮級//閫傞厤鍣ㄣ€俲s//TextelementexportclassText{constructor(parent){//鎻愪緵鐖惰妭鐐癸紝鐢ㄤ簬瀵诲潃璋冪敤鏇存柊锛堝鍓嶆墍杩帮紝鐘舵€佹洿鏂扮敱瀹瑰櫒鎵ц锛塼his.parent=parent;}//鍏冪礌缁樺埗锛岃繖閲岄渶瑕佸疄鐜版枃鏈厓绱犳覆鏌撻€昏緫draw(text){console.log(text);}}//閫傞厤鍣ㄥ鍑虹被閫傞厤鍣▄constructor(){//鍔犺浇瀹瑰櫒this.children=[];}//鍔犺浇瀛愬厓绱燼ppend(child){this.children.push(child);}//鍏冪礌鐘舵€佹洿鏂皍pdate(node,text){//鎵惧埌鐩爣娓叉煋consttarget=this.children.find((child)=>child===node);target.draw(鏂囨湰);}clear(){}}//container===adapterinstanceexportfunctiongetContainer(){returnnewAdapter();}濂戒簡锛屽熀鏈殑adapter宸茬粡瀹屾垚浜嗭紝鎺ヤ笅鏉ユ垜浠潵瀹炵幇renderer銆俁endererAbstractimport{createRenderer}from"vue";import{Text}from"./adapter";letuninitialized=[];constrender=createRenderer({//鍒涘缓鍏冪礌锛屽疄渚嬪寲TextcreateElement(type){switch(type){case"text":returnnewText();}},//鎻掑叆鍏冪礌锛岃皟鐢ㄥ姞杞界粺涓€绠＄悊鐨刟dapter鏂规硶insert(el,parent){if(elinstanceofText){el.parent=parent;parent.append(el);uninitialized.map(({node,text})=>el.parent.update(node,text));}returnel;},//閬撳叿鏇存柊patchProp(el,key,preValue,nextValue){el[key]=nextValue;},//鏂囨湰鏇存柊锛岄噸缁榮etElementText(node,text){if(node.parent){console.log(text);node.parent.clear(node);node.parent.update(node,text);}else{uninitialized.push({node,text});}},remove(el){},createText(type){},parentNode(node){},nextSibling(nide){},});exportfunctioncreateApp(root){returnrender.createApp(root);}鏍戣帗娲炬帴灞忚姱鐗嘢SD1306OLEDOLED锛屽嵆鏈夋満鍙戝厜浜屾瀬绠★紙OrganicLightEmittingDiode锛夋槸娑叉櫠鏄剧ず鍣ㄧ殑涓€绉嶃€係SD1306鏄疧LED椹卞姩鑺墖銆俿sd1306鏈韩鏀寔澶氱鎬荤嚎椹卞姩鏂瑰紡锛?800/8080骞跺彛銆丼PI鍜孖IC鎺ュ彛鏂瑰紡銆傝繖閲屾垜浠€夋嫨IIC鎺ュ彛杩涜閫氳锛屽師鍥犲緢绠€鍗曪細1.鎺ョ嚎绠€鍗曟柟渚匡紙涓ゆ牴绾垮氨鍙互椹卞姩OLED锛?.杞瓙濂芥壘...缂虹偣鏄疘IC浼犺緭鏁版嵁鏁堢巼澶參锛屽埛鏂扮巼鍙湁10FPS銆傚埌杈俱€係PI鍒锋柊鐜囨渶楂樺彲杈?200FPS銆傜‖浠舵帴绾縄IC鍙渶瑕?鏍圭嚎锛屽叾涓?鏍规槸鐢垫簮锛屽彟澶?鏍规槸SDA鍜孲CL銆傛垜浠娇鐢↖IC-1鎺ュ彛銆備笅闈㈡槸鏍戣帗娲剧殑GPIO寮曡剼鍥俱€傛敞锛氳浠ュ睆骞曚笂鐨勫疄闄呭紩鑴氬彿涓哄噯銆傚睆骞昖CC杩炴帴鍒癛aspberryPi鐨勫紩鑴?銆?3.3v鐢垫簮灞廏ND杩炴帴鍒癛aspberryPi鐨勫紩鑴?銆?鎺ュ湴灞忓箷SDA鍒癛aspberryPi鐨勫紩鑴?銆?IIC閫氫俊鏃讹紝鏁版嵁pin灞廠CL鎺ユ爲鑾撴淳鐨刾in5銆?IIC閫氫俊鏃讹紝涓烘爲鑾撴淳鐨勬椂閽熺鑴氫娇鑳絀2C1銆傚畨瑁呭伐鍏峰寘sudoapt-getinstall-yi2c-tools2銆傚惎鐢↖2Csudoraspi-config閫夋嫨鎺ュ彛閫夐」鍚敤I2C3銆傛煡鐪嬭澶囨寕杞界姸鎬乮2c-tools鎻愪緵鐨刬2cdetect鍛戒护鍙互鏌ョ湅鎸傝浇鐨勮澶噑udoi2cdetect-y1Node.js椹卞姩纭欢Node.jsLib鍏堟潵鐪嬪嚑涓狽ode.js搴擄紝鐪嬪畬浣犺鎰熷徆~浠讳綍鍙互浣跨敤JavaScript缂栧啓鐨勫簲鐢ㄧ▼搴忥紝鏈€....johnny-fiveJohnnt-Five鏄竴涓満鍣ㄤ汉鍜岀墿鑱旂綉寮€鍙戝钩鍙帮紝鏀寔JavaScript璇█缂栫▼锛屽熀浜嶧irmata鍗忚銆侳irmata鏄绠楁満杞欢鍜屽井鎺у埗鍣ㄤ箣闂寸殑閫氫俊鍗忚銆備娇鐢ㄥ畠锛屾垜浠彲浠ヨ交鏉惧湴鍦ㄦ爲鑾撴淳鍜屽睆骞曡姱鐗囦箣闂存灦璧蜂竴搴фˉ姊併€俽aspi-ioRaspiIO鏄疛ohnny-FiveNode.js鏈哄櫒浜哄钩鍙扮殑I/O鎻掍欢锛屽畠浣縅ohnny-Five鑳藉鎺у埗RaspberryPi涓婄殑纭欢銆俹led-font-5x75x7oled瀛椾綋搴擄紝灏嗗瓧绗﹁浆鎹㈡垚鍗佸叚杩涘埗浠ｇ爜锛岃oled绋嬪簭鍙互璇嗗埆銆傜敤浜庣粯鍒舵枃鏈€俹led-js馃摵鍏煎johnny-five鐨刼led鏀寔搴擄紙johnny-five鏈韩涓嶆敮鎸乷led锛夛紝鎻愪緵浜嗘搷浣渙led鐨凙PI銆傞┍鍔ㄧ▼搴忓疄鐜?/oled.jsconstfive=require("johnny-five");constRaspi=require("raspi-io").RaspiIO;constfont=require("oled-font-5x7");constOled=require("oled-js");constOPTS={width:128,//鍒嗚鲸鐜?.96鑻卞ssd1306128*64height:64,//鍒嗚鲸鐜囧湴鍧€锛?x3c,//鎺у埗杈撳叆鍦板潃锛宻sd1306榛樿涓?x3c};classOledService{constructor(){this.oled=绌猴紱}/***鍒濆鍖栵細鍒涘缓涓€涓狾led瀹炰緥*鍒涘缓鍚庯紝鎴戜滑鍙互閫氳繃鎿嶄綔Oled瀹炰緥鏉ユ帶鍒跺睆骞?/init(){constboard=newfive.Board({io:newRaspi(),});//鐩戝惉鍣ㄩ€€鍑猴紝鍏抽棴灞忓箷board.on("exit",()=>{this.oled&&this.remove();});returnnewPromise((resolve,reject)=>{board.on("ready",()=>{//RaspberryPi杩炴帴SSD1306this.oled=newOled(board,five,OPTS);//鎵撳紑灞忓箷鏄剧ずthis.oled.turnOnDisplay();resolve();});});}//缁樺埗鏂囨湰drawText({text,x,y}){//閲嶇疆鍏夋爣浣嶇疆this.oled.setCursor(+x,+y);//缁樺埗鏂囨湰this.oled.writeString(font,2,鏂囨湰锛?锛岀湡锛?锛夛紱}clear({x,y}){this.oled.setCursor(+x,+y);}//鍒锋柊灞忓箷update(){this.oled.update();}remove(){//鍏抽棴鏄剧ずthis.oled.turnOffDisplay();this.oled=null;}}exportfunctionoledService(){returnnewOledService();}鎺ヤ笅鏉ユ垜浠氨鍙互鍦╝dapterscreen涓皟鐢╫led绋嬪簭娓叉煋浜唦//index.jsimport{createApp}from"./renderer.js";import{getContainer}浠庘€?/adapter鈥濓紱浠庘€?/oled鈥濆鍏oledService}锛涗粠鈥?/App.vue鈥濆鍏pp锛沜onstoledIns=oledService()锛沷ledIns.init().then(()=>{createApp(App).mount(getContainer(oledIns));});//adapter.jsexport绫籘ext{constructor(parent){this.parent=parent;}draw(ints,opts){ints.drawText(opts);鏁存暟鏇存柊锛堬級锛泒}exportclassAdapter{constructor(oledIns){this.children=[];this.oled=oledIns;}append(child){this.children.push(child);}update(node,text){consttarget=this.children.find((child)=>child===node);target.draw(this.oled,{鏂囨湰,x:node.x,y:node.y,});}娓呴櫎锛堥€夋嫨锛墈this.oled.clear锛堥€夋嫨锛夛紱}}exportfunctiongetContainer(oledIns){returnnewAdapter(oledIns);}鑷虫锛屽氨鍙互鎴愬姛鐐逛寒灞忓箷浜嗭紝鏉ョ湅鐪嬫晥鏋滃惂~鏁堟灉灞曠ず鍙傝€僐enderingReacttotheembeddedLCDscreenUsingSSD1306OLED鏍戣帗娲句笂鐨勫睆骞曠粨璇畬鏁翠唬鐮佸凡缁忎笂浼犲埌Github锛屽鏋滀綘瑙夊緱杩欎釜鍋氭硶瀵逛綘鏈夊惎鍙?甯姪锛岀偣涓猻tar鍚Vue宸茬粡鎴愬姛娓叉煋鍒板唴宓屾恫鏅跺睆浜嗭紝鎵€浠ヤ笅涓€姝ヨ鑰冭檻杩炴帴涓€涓憞鏉嗗啓璐悆铔囨父鎴弤鍝堝搱鍝堬紝杩欑寰堚€淛avascript鈥濈殑鈥滈槄璇烩€濆涔犺鎴戞槒鏄忔鐫★紝鎵€浠ユ垜鏇村枩娆㈤€氳繃涓€浜涙湁瓒ｇ殑瀹炶返鏉ュ惛鏀剁煡璇嗐€傚鏋滀綘鍜屾垜涓€鏍风埍鎶樿吘锛屾杩庡叧娉▇
