±à¼ÍƼö: |
±¾ÎÄÖ÷Òª½éÉÜÈçºÎÀûÓÃ
Vue.jsµÄ¿ò¼ÜElectronʵÏÖ objcÖйú µÄ¿çƽ̨ȫջӦÓÃÒÔ¼°ÏîÄ¿´î½¨µÄÏêϸ½éÉÜ£¬Ï£Íû¶ÔÄúÄÜÓÐËù°ïÖú¡£
±¾ÎÄÀ´×ÔÓÚHalfros£¬,ÓÉ»ðÁú¹ûÈí¼þAlice±à¼ÍƼö¡£ |
|
ǰÑÔ
Ò».Ϊʲô»áдÕâ¸öÏîÄ¿£¿
×ʼÓÐÕâ¸öÏë·¨µÄʱºòÊÇÀ´×ÔÒ»¸öÍøÓÑ£¬ËûÔÚÎҵIJ©¿ÍÉÏÎÊÎÒ£¬ÍøÉÏÓÐûÓÐдµÄ±È½ÏºÃµÄ Weex demo
£¿ÎÒ˵ÓÈ´óдµÄÄǸö Hacker News ÊÇ×îºÃµÄ¡£ºóÀ´ÍøÓѾÍ˵£¬Â¥Ö÷ÄÜдһ¸öô£¿ÎÒµ±Ê±»Ø´ðÔÝʱ²»ÐС£ÆäʵÕâÊÂÎÒÒ»Ö±¼ÇÔÚÐÄÀï¡£
½ñÄê5ÔÂ19ºÅ£¬GitHub ʹÓà Electron ÖØÐ´ÁË macOS ºÍ Windows µÄ¿Í»§¶Ë£¬¼ÓÉϽüЩÄê¿ç¶Ë¿ª·¢Ô½À´Ô½»ð£¬¶ÔÓÚһЩ¹«Ë¾À´Ëµ£¬Web
ºÍ app Ó¦¸Ã¶¼ÊÇÐèÒªµÄ£¬app »¹ÐèÒª iOS ºÍ Android Á½¸öƽ̨£¬ÔÙÓÐÉõÕß»¹Òª¿ª·¢Ð¡³ÌÐò£¬×ÀÃæ¼¶µÄÓ¦ÓÃËäÈ»ÉÙ£¬µ«ÊÇÓÃ
Electron Ò»Ñù¿ÉÒÔÒ»Æð¿ª·¢ÁË¡£×Ô¼ºÒ²ÃÈÉúÁËÏëÒªÔ¾Ô¾ÓûÊÔµÄÄîÍ·¡£
ÓÉÓÚ½Ó´¥µ½ÁË Vue.js£¬µ±È»²»ÏëÍ£ÁôÔÚ³õ¼¶£¬Ïë½ø½×£¬ÓÈ´ó¸ø³öÁ˽¨Ò飬¾ÍÊǶàʵ¼ù£¬¶àÁ·¡£ÎªÁË¼Ó¿ì½ø½×µÄ²½·¥£¬×Ô¼ºË½Ï¾ÍÕÒÏîÄ¿Á·¡£
ÖÁÓÚΪºÎÑ¡Ôñ Objc Öйú£¬ÀíÓÉÆäʵºÜ¼òµ¥£¬ÒòΪÎÒÊÇ iOS ¿ª·¢Õß¡£ÔÚ iOS ¿ª·¢ÕßÖУ¬Objc
»ù±¾ÉÏÈ˾¡½ÔÖª£¨Óв»ÖªµÀµÄ£¿£©£¬ß÷ÉñÒ²»ù±¾ÉÏÈ˾¡½ÔÖª£¬ÎÒ¸öÈ˺ܳç°Ýß÷Éñ£¬ËùÒÔ¾ÍÑ¡ÁË Objc ÖйúÀ´Ð´¡£
ÒòΪ°® ... ...
¶þ.Õâ´ÎΪºÎ¿ç¶Ë¿ª·¢Ã»ÓÐweex£¿
Õâ´ÎÔÚÎÒдÍêÏîÄ¿ÒԺ󣬷¢ÏÖ Vue µÄ´úÂëÖ±½Óת»»³É Weex µÄÏîÄ¿£¬ÊÇÎÞ·¨ÊµÏֵģ¬ºÃ¶à±¨´í¡£¶øÇÒ²»ÊÇÒ»ÏÂ×ÓÄܶ¼ÐÞ¸´ºÃ¡£ÎÒÏàÐÅÊÇÎÒʹÓÃ×ËÊÆµÄÎÊÌ⣬²»ÊÇ
Weex µÄÎÊÌâ¡£¶ÔÁË£¬Weex ÓÖ·¢²¼Ð°汾ÁË£¬½ÓÏÂÀ´ÓÐʱ¼äµÄ»°¾Í°Ñ Weex °æµÄÒ²×öÒ»±é¿ªÔ´¡£
ºÃÁË£¬½øÈëÕýÌ⣬˵ÏîÄ¿£º
¼¼ÊõÕ»ºÍÖ÷Òª¿ò¼Ü
1.Vue È«¼ÒͰ£ºvue2 + vuex + vue-router
+ webpack
2.ES6
3.ÍøÂçÇëÇó£ºaxios
4.Ò³ÃæÏàӦʽ¿ò¼Ü£ºbootstrap£¬element-ui
5.ºǫ́£ºexpress
6.´úÂë¸ßÁÁ£ºhighlight.js
7.Êý¾Ý¿â£ºlowdb
8.markdown½âÎöÆ÷£ºvue-markdown
9.±íµ¥ÑéÖ¤£ºvee-validate
10.¿çƽ̨¿ò¼Ü£ºElectron
ÏîÄ¿¹¹½¨
ÓÉÓÚß÷ÉñµÄ Objc ÍøÕ¾ÊÇÖ±½Ó·µ»Ø html£¬ËùÒÔÏë½øÐÐÄ£ÄâÍøÂçÇëÇó·µ»ØÊý¾Ý£¬¾ÍÖ»ÄÜ×Ô¼º´î½¨Ò»¸öºǫ́£¬Ð´
api ·µ»ØÊý¾ÝÁË¡£
ÎÒÀûÓà Express °Ñºǫ́´î½¨ÔÚ 8081¶Ë¿ÚÉÏ£¬²¢Ð´ºÃ·ÓÉ£¬ÇëÇó»áתµ½8080£¬¿ªÆô·þÎñÆ÷µÄʱºòÒ²»á×Ô¶¯¿ªÆôºǫ́¡£
# install dependencies
°²×°ÒÀÀµ
npm install
# serve with hot reload at localhost:8080
npm run dev # serve with hot reload at localhost:8080
npm run start # build for production with minification ´ò°ü
npm run build # build for production and view the bundle
analyzer report
npm run build --report # run unit tests
npm run unit # run e2e tests
npm run e2e # run all tests
npm test # ´ò°ü Mac Ó¦ÓÃ
npm run build:mac # ´ò°ü Linux Ó¦ÓÃ
npm run build:linux # ´ò°ü Win Ó¦ÓÃ
npm run build:win # ´ò°ü Cordova Ó¦ÓÃ
npm run build:app |
ÕâÀïÒªµ¥¶À˵һÏ Cordova µÄ´ò°ü·½Ê½£¬Ëü±È×ÀÃæ¶ËµÄÉÔÎ¢ÌØÊâÒ»µã¡£
Ê×Ï顄 src/main.js ÎļþÖйØÓÚ Coredova µÄÈýÐÐ×¢ÊÍ´ò¿ª£¬Coredova ¿âµÄ³õʼ»¯ÐèÒª°üÔÚÉú³É
Vue ʵÀý µÄÍâÃæ¡£´ò¿ª×¢ÊÍÒÔºó£¬ÔÙÖ´ÐнÓÏÂÀ´µÄ²½Öè¡£
ÎÒÔÚÏîÄ¿ÖзÅÁËÒ»¸ö Makefile£¬¿ÉÒÔ¸ù¾ÝÕâ¸öÀ´×ö¡£
1.Ê×ÏÈÈ«¾Ö°²×° cordova ÃüÁî
2.ÔÙÊäÈëÏÂÃæµÄÃüÁÉú³É app ÏîĿĿ¼
cordova create
app com.vueobjccn vueobjccn |
½øÈëµ½ app Îļþ¼ÐÖÐ
Ìí¼Ó¶ÔÓ¦µÄƽ̨
cordova platform
add ios
cordova platform add android |
ÔËÐÐÏîÄ¿
cordova run ios
cordova run android |
Cordova Ö»Éú³ÉÁËÒ»¸ö¿ÇµÄ app£¬ÀïÃæ¾ßÌåµÄÄÚÈÝ»¹ÊǶÁÈ¡µÄÍøÒ³£¬ÔÚÉú³ÉµÄ¶ÔÓ¦µÄÓ¦ÓÃÀïÃæÓÐÒ»¸ö
www µÄÎļþ¼Ð£¬Õâ¸öÎļþ¼ÐÀïÃæ¾ÍÊÇÒª¼ÓÔØÒ³Ãæ¡£JavaScript ´ò°üÖ®ºóÊÇ»áÉú³É www µÄÎļþ¼Ð£¬Ö»ÒªÈ¥Ìæ»»
Cordova ¶ÔӦƽ̨ÀïÃæµÄ www Îļþ¼ÐÀïÃæµÄÄÚÈݼ´¿É¡£
¶îÍâ˵¼¸¾ä£¬ÔÚ app ·¢Õ¹µ½ÏÖÔÚÕâô³ÉÊìµÄʱ´ú£¬Èç¹û¹¹½¨Ò»¸ö´óµÄ app£¬Óà Cordova ¿ò¼ÜÈ¥×ö£¬²»ÓÃÔÉú£¬²»×öÈκÎÓÅ»¯£¬Óû§ÌåÑéȷʵ²»ÈçÔÉúµÄ¿ì¡£ÎÒÕâ´Î¾ÍרÃÅ´ò°üÌåÑéÁË
Cordova app£¬Ã»ÓÐ×öÈκÎÓÅ»¯£¬´ò°ü³öÀ´¾ÍÓã¬Èç¹ûÊÇÌôÌÞµÄÓû§£¬·ÅÔÚµ±½ñ¸÷´ó app ½Ó½üÍêÃÀµÄÌåÑé¶ÈÏà±ÈÀ´Ëµ£¬È·Êµ»á¸Ðµ½Âú×ã¸ÐÂԵ͡£Èç¹ûÕæµÄҪǰ¶Ë¿ª·¢
app £¬¸ø2¸ö½¨Ò飬Èç¹ûÊÇÓà Cordova ¿ò¼Ü£¬Ò»¶¨Òª¾¡Á¿ÓÅ»¯ÓÅ»¯£¬²»È»ÐÔÄܲ»ÈçÔÉú¡£Èç¹ûÏëÓнӽüÔÉúµÄÌåÑ飬ÄÇô¿ÉÒÔ¿¼ÂÇÓÃ
React Native »òÕß Weex¡£
¿çƽ̨¿ª·¢
JavaScript ¿çƽ̨¿ª·¢´ò°ü³É×ÀÃæ¼¶Ó¦Óã¬Ö÷ÒªÓà Electron ¿ò¼Ü¡£ÕâÀïÐèÒªÔÚ devDependencies
ÀïÃæ°²×°ºÃ "electron"¡¢"electron-builder"¡¢"electron-packager"
ÕâÈý¸ö¡£ÆäËûµÄ·¾¶ÅäÖÃÔÚ webpack ÀïÃæÅäÖúü´¿É¡£
¹ØÓÚ Cordova µÄ°²×°£¬È·Êµ¿ÉÒÔͲÛÒ»µãÍøÂçµÄÎÊÌâ¡£Èç¹ûÄãÔÚÒ»¸ö·Ç½»·¾³ºÜ²îµÄµØ·½£¬ÕæµÄºÜÍ´¿à¡£±ÈÈç֮ǰÔÚÒ»¸ö·Ç½»·¾³ºÜ²îµÄÇé¿öÏÂÈ«¾Ö°²×°
Cordova £¬¸÷ÖÖ±¨´í£¬¾ÍËãÊÇ»»ÁË cnpm ÍêÈ«°²×°ÁËÒÔºó£¬Ìí¼Ó iOS ƽ̨ÒÔºóÒÔºó»á±¨Ò»¸ö
co ÎļþÕÒ²»µ½µÄÎÊÌ⣬¸Ð¾õÊÇ cnpm ûÓаÑÃüÁî°²×°ÍêÕû¡£ºóÀ´Îһص½¼ÒÀ·Ç½ÍøÂçºÜºÃ£¬npm
install Ò»ÏÂ×ӾͰ²×°ºÃÁË¡£²»¹ýÓиöС²åÇú£ºCordova iOS 4.4.0 template
Èç¹û±¨´í£¬¾Í¶à°²×°¼¸´Î£¬ÔÒò»¹ÊǷǽµÄÔÒò£¬Ã»ÓÐ catch µ½¡£
»¹ÓпÉÄÜ»áÓöµ½ÏÂÃæÕâ¸ö´íÎó£º
"Error:
Cannot find module 'config-chain'" when running
'ionic start' |
Õâ¸ö´íÎó¾ÍÓà sudo ÃüÁîÖØÐ³¢ÊÔÒ»±éÔÃüÁî¾ÍºÃÁË¡£
×îÖÕ´ò°üÍê³É»áÔÚ dist µÄÎļþ¼ÐÖС£
½ÓÏÂÀ´Õ¹Ê¾Ò»ÏÂÕâ¸ö¿çÈý¶ËµÄÓ¦ÓÃÔÚ¸÷¸öƽ̨ϵıíÏÖ£º
ÏÈչʾһÏ Web ¶Ë





ÔÙչʾһÏÂÔÚÊÖ»úä¯ÀÀÆ÷ÉϵÄЧ¹û£º
Androidƽ̨
Nexus 5x µÄ Web

Nexus 6P µÄ Web

iOS ƽ̨
iPhone 5 µÄ Web

iPhone 7 µÄ Web

iPhone 7 Plus µÄ Web

iPad µÄ Web

½Ó×ÅÔÙ¿´¿´ Mac ¶ËÉϵıíÏÖ£º




×îºó¿´¿´ Cordova µÄЧ¹û£º






¹¦ÄÜչʾ
Óà Vue.js ´î½¨Ò»¸ö Web Ò³ÃæºÜ¿ì¡£

¿´¿´ Vuex ¹ÜÀí״̬µÄ·½±ã¡£µÇ¼״̬±£´æÔÚ state ÀïÃæ£¬È«¾Ö¶¼»á»ñÈ¡µ½¡£

Ò»µ©Óû§Ã»ÓеǼ£¬µã»÷¹ºÂòµç×ÓÊéµÄʱºò£¬ÅжÏûÓÐÓû§µÇ¼¶¼»áÌø×ªµ½µÇÂ¼Ò³Ãæ¡£
»¹ÓÐÒ»µãÖµµÃ˵µÄÊÇ£¬ÓÉÓÚÕâÊÇÒ»¸ö SPA £¬ËùÒÔÀïÃæµÄ·Óɶ¼Óà Router-link ʵÏֵ쬶øÃ»ÓÐÑ¡ÓÃ
<a> ±êÇ©µÄÌø×ª£¬Ð§¹û¾ÍÊÇÌø×ª²¢²»ÓÃÈ¥ÇëÇóÊý¾Ý£¬ÃëÌø¡£Õâ¸öÓû§ÌåÑéÕæµÄºÜˬ¡£
<router-link> ±ÈÆðдËÀµÄ <a href="...">
»áºÃһЩ£¬ÀíÓÉÈçÏ£º
ÎÞÂÛÊÇ HTML5 history ģʽ»¹ÊÇ hash ģʽ£¬ËüµÄ±íÏÖÐÐΪһÖ£¬ËùÒÔ£¬µ±ÄãÒªÇл»Â·ÓÉģʽ£¬»òÕßÔÚ
IE9 ½µ¼¶Ê¹Óà hash ģʽ£¬ÎÞÐë×÷Èκα䶯¡£
ÔÚ HTML5 history ģʽÏ£¬router-link »áÀ¹½Øµã»÷ʼþ£¬ÈÃä¯ÀÀÆ÷²»ÔÙÖØÐ¼ÓÔØÒ³Ãæ¡£
µ±ÄãÔÚ HTML5 history ģʽÏÂʹÓà base Ñ¡ÏîÖ®ºó£¬ËùÓÐµÄ to ÊôÐÔ¶¼²»ÐèҪд£¨»ù·¾¶£©ÁË¡£

µÇ³öÒ³ÃæÍ¬Àí£¬Ò»µ©Óû§µÇ³ö£¬ËùÓÐÏÔʾÓû§ÃûµÄµØ·½¶¼»á±ä³ÉµÇ¼£¬navigationBar ÉϵĹºÎï³µÒ²Ò»²¢Ïûʧ¡£ÓÃ
Vuex ¹ÜÀí״̬£¬Í¦ºÃµÄ¡£

Õâ¾ÍÊÇ email µÄ±íµ¥ÑéÖ¤ÁË£¬Ã»ÓÐÌ«¶àµÄ¼¼Êõº¬Á¿¡£

ÕâÀïÊǹºÎï³µÒ³Ãæ£¬ÕâÀïÓõ½ÁË MVVM Ò³ÃæµÄ°ó¶¨µÄ˼Ïë£¬Ò³ÃæÉÏ4¸ö°´Å¥£¬µãÈÎÒâÒ»¸ö°´Å¥¶¼»áÁ¢¼´¸Ä±äÏÂÃæµÄ×ܼۡ£¹ØÓÚ
Vue.js µÄ MVVM ʵÏÖ˼ÏëÖµµÃ iOSer ÃÇѧϰ¡£
½ÓÏÂÀ´Õâ¸öÊÇ iPhone µÄ Safari ÉϵıíÏÖ£¬ËÙ¶È»¹¿ÉÒÔ¡£

ÔÚ¿çÆ½Ì¨µÄÕ⼸¸öÓ¦ÓÃÖУ¬ÌåÑé×îºÃµÄ£¬ÎÒ¾õµÃ»¹ÊÇ Mac µÄÓ¦Óá£Ê¹ÓÃÆðÀ´ÂúÒâ¶È·Ç³£¸ß¡£

×îºó¾ÍÊÇ Cordova ¿ò¼Ü´î½¨µÄ ÊÖ»ú app£¬ÌåÑé¶È²»¸ß£¬¾ßÌåÈçºÎ£¬¿´Í¼°É£¬×ÜÖ®²»ÓÅ»¯µÄ Cordova
£¬¶ÔÓÚÌôÌÞµÄÎÒÀ´Ëµ£¬ÎÒÊDz»ÂúÒâµÄ¡£
iPhone ÉϵÄÓ¦ÓÃ

iPad ÉϵÄÓ¦ÓÃ

ÏîÄ¿Íê³ÉÖ®ºóµÄ¸ÐÏë
ÏȰ²ÀûһϠelement-ui Õâ¸öÏîÄ¿£¬ÓÃËüÀ´´î½¨ÏîÄ¿£¬ÕæµÄºÜ¿ì£¬Ò³ÃæºÜ¿ì¾Í¿ÉÒԴÍê³É£¬¿ª·¢
Vue.js µÄͬѧһ¶¨ÓÐÌý¹ýÕâ¸ö¿â¡£½ÚÔ¼³öÀ´µÄ´ó°Ñʱ¼ä¿ÉÒ԰Ѹü¶àµÄ¾«Á¦·ÅÔÚÒµÎñ¿ª·¢ÉÏÃæ¡£
´ó¼Ò¶¼ÔÚ˵ÏÖÔÚÊÇ´óǰ¶Ëʱ´ú£¬Òƶ¯¿ª·¢ºÍǰ¶ËÈÚºÏÊDZØÈ»¡£µ«ÊÇÁ½¸öƽ̨µÄ¿ª·¢Æäʵ»¹ÊÇÓкܶàµÄ²»Í¬£¬ÎÒÔÚ¾Àú¹ýǰ¶ËµÄ¿ª·¢ºÍ
iOS ¿ª·¢ÒԺ󣬸ÐÏ뻹ÊǺܶàµÄ£¬Ç°¶ËºÍ iOS ÊÇÓкܶà¿ÉÒÔÏ໥ѧϰµÄµØ·½£¬Á½ÕßÒ²¸÷ÓÐÓÅȱµã¡£
|