[{"data":1,"prerenderedAt":477},["ShallowReactive",2],{"page:\u002Fru\u002Fposts\u002Fcode_n_shit\u002Fbx24":3,"translations:\u002Fru\u002Fposts\u002Fcode_n_shit\u002Fbx24":476},{"id":4,"title":5,"author":6,"body":7,"date":461,"description":462,"draft":463,"extension":464,"image":465,"listed":466,"meta":467,"navigation":466,"path":468,"seo":469,"stem":470,"tags":471,"theme":6,"toc":466,"__hash__":475},"content_ru\u002Fru\u002Fposts\u002Fcode_n_shit\u002Fbx24.md","Vue и Битрикс24",null,{"type":8,"value":9,"toc":451},"minimark",[10,15,27,36,39,47,50,54,57,94,97,102,105,108,125,128,131,143,146,154,158,165,254,256,261,263,278,282,285,314,317,369,371,383,385,397,401,404,412,416,419,435,440,443,447],[11,12,14],"h2",{"id":13},"однажды-мне-пришлось","Однажды мне пришлось...",[16,17,18,19,26],"p",{},"Писать приложение для Битрикс24. Такие приложения состоят из интерфейса и номинального бэк-энда. Это значит, что по сути это SPA приложение и скрипт на богомерзком php или ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Fpython.org",[24],"nofollow","нормальном языке"," который заметит веб-сервер.",[16,28,29,30,35],{},"Я вообще не близок к миру фронтенда, и если что-то и делал когда-то, то это был днострап и инфернальный jQuery которые вместе превращали 2 килобайтный лендинг в пыхтящее, кривое и разноцветное, но все еще говно мамонта весом в Гигабайт. Благо я не из ",[20,31,34],{"href":32,"rel":33},"https:\u002F\u002Fru.wikipedia.org\u002Fwiki\u002F%D0%9B%D0%93%D0%91%D0%A2",[24],"верстальщиков и дизайнеров",".",[16,37,38],{},"В общем в этот раз я решил научится какому-нибудь интересному 11\u002F10 актуальному JS фреймворку, да еще желательно такому, чтобы когда-нибудь свершилась моя давнишняя мечта: написать хелло ворлд на Android.\nИ выбор мой пал на Vue, потому что а тебя волнует? ну понравился он мне.",[16,40,41,42,46],{},"Короче понравился он мне и теперь у меня появилось ви́дение А?а?а? понял(а\u002Fли\u002Fло\u002F",[43,44,45],"del",{},"пошло на",").",[16,48,49],{},"Ближе к делу.",[11,51,53],{"id":52},"битрикс24","Битрикс24",[16,55,56],{},"У Битрикса есть JS-библиотека(что очень громко сказано), которую отдает сам Битрикс по-простому:",[58,59,64],"pre",{"className":60,"code":61,"language":62,"meta":63,"style":63},"language-js shiki shiki-themes monokai","\u003Cscript src=\"\u002F\u002Fapi.bitrix24.com\u002Fapi\u002Fv1\u002F\" \u002F>\n","js","",[65,66,67],"code",{"__ignoreMap":63},[68,69,72,76,80,84,87,91],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"sCdxs","\u003C",[68,77,79],{"class":78},"s8I7P","script",[68,81,83],{"class":82},"sHkqI"," src",[68,85,86],{"class":78},"=",[68,88,90],{"class":89},"s_Ekj","\"\u002F\u002Fapi.bitrix24.com\u002Fapi\u002Fv1\u002F\"",[68,92,93],{"class":74}," \u002F>\n",[16,95,96],{},"Однако нас это не интересует, потому что Vue клал на такие кэйси(если это не встраивание конечно). Посему у нас есть три варианта импортнуть это дело.",[98,99,101],"h3",{"id":100},"способ-первыйфуу","Способ первый(фуу)",[16,103,104],{},"Я люблю и ненавижу eslint поэтому этот способ я конечно же люблю, ведь вдальнейшем от каждого использования BX24(это переменная инициализируемая js-библиотекой) eslint будет пытаться совершить суицид и попутно выжечь все красные пиксели на мониторе.",[16,106,107],{},"Делается все просто:",[109,110,111,122],"ol",{},[112,113,114,115,118,119],"li",{},"Добавляем тег ",[65,116,117],{},"\u003Cscript src=\"\u002F\u002Fapi.bitrix24.com\u002Fapi\u002Fv1\u002F\" \u002F>"," в ",[65,120,121],{},"\u003Chead>",[112,123,124],{},"Пользуемся...",[16,126,127],{},"Однако eslint не понимает, редактор методов не видит и так далее.",[16,129,130],{},"Плюсы:",[132,133,134,137,140],"ul",{},[112,135,136],{},"Дешево",[112,138,139],{},"Сердито",[112,141,142],{},"Временно",[16,144,145],{},"Минусы:",[132,147,148,151],{},[112,149,150],{},"Ненадежно",[112,152,153],{},"Невсегда работает",[98,155,157],{"id":156},"способ-второйкостыльныйпочти-третий","Способ второй(костыльный\u002Fпочти третий)",[16,159,160,161,164],{},"Ставим полезную либу ",[65,162,163],{},"vue-plugin-load-script","\nИ каждый раз когда хотим обратится в API, делаем так",[58,166,168],{"className":60,"code":167,"language":62,"meta":63,"style":63},"\u002F\u002F в main.js\nVue.use(LoadScript);\n\u002F\u002F в компоненте\nthis.$loadScript(\"\u002F\u002Fapi.bitrix24.com\u002Fapi\u002Fv1\u002F\")\n.then(() => {\n    BX24.callMethod(...)\n})\n",[65,169,170,176,188,194,214,232,248],{"__ignoreMap":63},[68,171,172],{"class":70,"line":71},[68,173,175],{"class":174},"snpHw","\u002F\u002F в main.js\n",[68,177,179,182,185],{"class":70,"line":178},2,[68,180,181],{"class":74},"Vue.",[68,183,184],{"class":82},"use",[68,186,187],{"class":74},"(LoadScript);\n",[68,189,191],{"class":70,"line":190},3,[68,192,193],{"class":174},"\u002F\u002F в компоненте\n",[68,195,197,201,203,206,209,211],{"class":70,"line":196},4,[68,198,200],{"class":199},"szGx7","this",[68,202,35],{"class":74},[68,204,205],{"class":82},"$loadScript",[68,207,208],{"class":74},"(",[68,210,90],{"class":89},[68,212,213],{"class":74},")\n",[68,215,217,219,222,225,229],{"class":70,"line":216},5,[68,218,35],{"class":74},[68,220,221],{"class":82},"then",[68,223,224],{"class":74},"(() ",[68,226,228],{"class":227},"sOx1s","=>",[68,230,231],{"class":74}," {\n",[68,233,235,238,241,243,246],{"class":70,"line":234},6,[68,236,237],{"class":74},"    BX24.",[68,239,240],{"class":82},"callMethod",[68,242,208],{"class":74},[68,244,245],{"class":78},"...",[68,247,213],{"class":74},[68,249,251],{"class":70,"line":250},7,[68,252,253],{"class":74},"})\n",[16,255,130],{},[132,257,258],{},[112,259,260],{},"Достаточно не костыль, чтобы было почти хорошо(нет их, но первый способ принципиально буду ненавидеть)",[16,262,145],{},[132,264,265,272,275],{},[112,266,267,268,271],{},"Скрипт загружается каждый раз(конечно ",[43,269,270],{},"ca$h"," кэш, но все же)",[112,273,274],{},"Выглядит ужасно из-за дополнительных отступов и скобок",[112,276,277],{},"Нормальный минус",[98,279,281],{"id":280},"способ-третийнеплохой","Способ третий(неплохой)",[16,283,284],{},"На самом деле все еще проще:",[109,286,287,295,301,304],{},[112,288,289,290,294],{},"Делаем утилиту(ее можно найти ",[20,291,293],{"href":292},"\u002Fjs\u002Fbx24.js","здесь",")",[112,296,297,298],{},"Создаем ",[65,299,300],{},"Promise",[112,302,303],{},"Резолвим в нем загрузку скрипта и реджектим че хотим",[112,305,306,307,310,311,313],{},"Экспортируем ",[65,308,309],{},"init()"," и возвращаем из него ",[65,312,300],{}," когда попросят",[16,315,316],{},"Внутри компонента, где надо, делаем:",[58,318,320],{"className":60,"code":319,"language":62,"meta":63,"style":63},"\u002F\u002F                                     🔽ето утилита🔽\nlet {default: BX24Init} = await import('.\u002Futils\u002Fbx24');\nconst BX24 = await BX24Init();\n",[65,321,322,327,351],{"__ignoreMap":63},[68,323,324],{"class":70,"line":71},[68,325,326],{"class":174},"\u002F\u002F                                     🔽ето утилита🔽\n",[68,328,329,332,335,337,340,343,345,348],{"class":70,"line":178},[68,330,331],{"class":227},"let",[68,333,334],{"class":74}," {default: BX24Init} ",[68,336,86],{"class":78},[68,338,339],{"class":78}," await",[68,341,342],{"class":78}," import",[68,344,208],{"class":74},[68,346,347],{"class":89},"'.\u002Futils\u002Fbx24'",[68,349,350],{"class":74},");\n",[68,352,353,356,359,361,363,366],{"class":70,"line":190},[68,354,355],{"class":227},"const",[68,357,358],{"class":74}," BX24 ",[68,360,86],{"class":78},[68,362,339],{"class":78},[68,364,365],{"class":82}," BX24Init",[68,367,368],{"class":74},"();\n",[16,370,130],{},[132,372,373,376],{},[112,374,375],{},"Выглядит неплохо(да тут только так оценивают)",[112,377,378,379,382],{},"Работает именно так как запланировано ",[43,380,381],{},"сатаной"," разрабами битрикса",[16,384,145],{},[132,386,387],{},[112,388,389,390,393,394,294],{},"Придется делать каждый метод использующий API асинхронным(хотя можно импортировать один раз в и без того асинхронном ",[65,391,392],{},"mounted"," и сохранить где-нибудь в ",[65,395,396],{},"data()",[98,398,400],{"id":399},"способ-четвертыйпочти-хороший","Способ четвертый(почти хороший)",[16,402,403],{},"Я его еще не сделал. Да, вот так. Но вроде как можно сделать примерно тоже самое(99%, нужно что-то с асинхронностью решить), что и в третьем способе, но вызвать где-нибудь:",[132,405,406,409],{},[112,407,408],{},"в main.js и сделать глобальный Vue.use()",[112,410,411],{},"сделать псевдо-компонент как event-bus, сделать use от него и использовать его как саму переменную с помощью мета-магии обработки method not defined или как оно там исключения",[11,413,415],{"id":414},"заключение","Заключение",[16,417,418],{},"Всем приятной разработки на Vue. Если беретесь за битрикс, то старайтесь сделать его или хотя бы его части лучше. Как говорится",[420,421,422],"blockquote",{},[16,423,424,425,429,430,434],{},"\u003C\u003C ",[426,427,428],"em",{},"Никогда не спорьте с идиотами. Вы опуститесь до их уровня, где они вас задавят своим опытом"," © ",[431,432,433],"strong",{},"Омар Кон Стэтхэм",", 1488 год до нашей эры >>",[16,436,437],{},[431,438,439],{},"* * *",[16,441,442],{},"Ах да, приложение, вот что получилось(запись ниже). В общем оно выводит контакты, компании и сделки на карту и строит между ними маршрут с помощью Google Карт. Также есть бинд в календарь и планируются бинды в сделки и лиды, так что если тебе нужно что-то такое, то пиши по контактам.",[444,445],"video-player",{"src":446},"\u002Fmov\u002Fbx24.mov",[448,449,450],"style",{},"html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .s8I7P, html code.shiki .s8I7P{--shiki-default:#F92672}html pre.shiki code .sHkqI, html code.shiki .sHkqI{--shiki-default:#A6E22E}html pre.shiki code .s_Ekj, html code.shiki .s_Ekj{--shiki-default:#E6DB74}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .snpHw, html code.shiki .snpHw{--shiki-default:#88846F}html pre.shiki code .szGx7, html code.shiki .szGx7{--shiki-default:#FD971F}html pre.shiki code .sOx1s, html code.shiki .sOx1s{--shiki-default:#66D9EF;--shiki-default-font-style:italic}",{"title":63,"searchDepth":178,"depth":178,"links":452},[453,454,460],{"id":13,"depth":178,"text":14},{"id":52,"depth":178,"text":53,"children":455},[456,457,458,459],{"id":100,"depth":190,"text":101},{"id":156,"depth":190,"text":157},{"id":280,"depth":190,"text":281},{"id":399,"depth":190,"text":400},{"id":414,"depth":178,"text":415},"2020-01-21","Однажды мне пришлось... Писать приложение для Битрикс24. Такие приложения состоят из интерфейса и номинального бэк-энда. Это значит, что по сути это SPA приложение и скрипт на богомерзком php или нормальном языке который заметит веб-сервер.",false,"md","\u002Fimages\u002Fbx24_vue.png",true,{},"\u002Fru\u002Fposts\u002Fcode_n_shit\u002Fbx24",{"title":5,"description":462},"ru\u002Fposts\u002Fcode_n_shit\u002Fbx24",[65,62,472,473,474,52],"vue","b24","bitrix24","tVvFwrMJGIJ-ImFWmq34Nu_Mn-F3jVESZZQdwwa5tC8",[],1790369235096]