Share via

Edytuj kod w aplikacji Visual Studio Code for the Web (wersja zapoznawcza)

  • Artykuł

[Ten temat pochodzi ze wstępnej wersji dokumentacji i może ulec zmianie.]

W studio projektowym można edytować kod witryny, używając edytora Visual Studio Code for the Web. Ta funkcja umożliwia edycję treści statycznych, HTML, CSS, Liquid i JavaScript dla następujących metadanych witryny:

Metadane Zawartość
Zaawansowane formularze (formularze wieloetapowe) JavaScript
Formularze podstawowe JavaScript
Wstawki zawartości Wszystkie obsługiwane wstawki zawartości
Listy JavaScript
Pliki sieci Web Wyświetlanie i pobieranie plików multimedialnych. Edycja plików tekstowych (kodu).
Strony internetowe Cała obsługiwana zawartość (dla każdego języka), kod JavaScript i CSS
Szablony sieci Web Wszystkie obsługiwane treści

Uwaga

Nie będzie można tworzyć rekordów metadanych, a jedynie dodawać i edytować treść, kod oraz przeglądać/pobierać załączniki plików.

Visual Studio Code for the Web zapewnia bezpłatny programu Microsoft Visual Studio Code bez potrzeby instalacji uruchamiany całkowicie przeglądarce, co pozwala przeglądać kod witryny oraz szybko i bezpiecznie wprowadzać uproszczone zmiany kodu. Więcej informacji: Doświadczenie Visual Studio Code for the Web.

Ważne

  • Jest to funkcja w wersji zapoznawczej.
  • Funkcje w wersji zapoznawczej nie są przeznaczone do użytku w środowiskach produkcyjnych i mogą mieć ograniczoną funkcjonalność. Te funkcje są udostępniane przed oficjalnym wydaniem, dzięki czemu klienci mogą szybciej uzyskać do nich dostęp i przekazać opinie na ich temat.

Demonstracja użycia Visual Studio Code for the Web do edycji witryny Power Pages.

Uwaga

  • Pierwsze załadowanie programu Visual Studio Code for the Web może zająć trochę czasu, ponieważ będą instalowane wymagane rozszerzenia dla tej funkcji.
  • Operacje Tworzenia, Usuwania i Zmieniania nazwy pliku nie są obsługiwane.
  • Ta funkcja wykorzystuje rozszerzenie internetowe narzędzi Power Platform Tools. Rozszerzenia sieci Web są ograniczone przez piaskownicę przeglądarki i dlatego mają ograniczenia w porównaniu ze zwykłymi rozszerzeniami.
    • Power PlatformCLI nie jest obsługiwane.
    • Funkcje rozszerzenia internetowego narzędzia Power Platform Tools są ograniczone do edytowania kodu Power Pages.
    • Ta funkcja nie jest dostępna w chmurze Government Community Cloud (GCC), Government Community Cloud (GCC High) i Department of Defense (DoD). Użytkownicy w tych regionach będą używać aplikacji Zarządzanie portalami w celu edytowania kodu. Zobacz temat Edytowanie kodu w aplikacji Zarządzanie portalami, aby uzyskać więcej informacji.

Edytowanie kodu dostępnego w studio projektowym

Możesz rozpocząć edytowanie kodu witryny przy użyciu programu Visual Studio Code for the Web ze strony głównej Power Pages, wybierając opcję Edytuj kod witryny z menu rozwijanego Edytuj.

W studio projektowym można też edytować kod z następujących obszarów:

Spróbujmy teraz edytować kod przy użyciu tych obszarów.

Edytowanie kodu strony sieci Web z obszaru roboczego stron

Po otwarciu Power Pages design studio widoczna jest opcja Edytuj kod w menu Pages1 i w prawym górnym rogu ekranu2.

Edytowanie kodu z obszaru roboczego stron.

Kod szablonu nagłówka z obszaru roboczego stron

Wybierz Edytuj nagłówek witryny, a następnie wybierz Edytuj kod, aby otworzyć edytor kodu.

Edytowanie nagłówka stron z obszaru roboczego stron.

Edytowanie kodu niestandardowego CSS z obszaru roboczego stylu

Przejdź do obszaru roboczego Styl i wybierz dostępne menu niestandardowego CSS Edytuj kod, aby otworzyć edytor kodu.

Edytuj kod w niestandardowym CSS.

Powiadomienie o konflikcie scalania

Jeśli współpracujesz z innymi programistami, mogą wystąpić sytuacje, w których będziesz pracować nad tym samym kodem źródłowym. W przypadku próby zapisania zmian w nieaktualnym pliku otrzymasz powiadomienie o Porównaniu lub Nadpisaniu zmian.

Porównanie kodu pokaże aktualny kod obok twojego kodu i pozwoli ci przywrócić istniejące zmiany, zaakceptować każdą zmianę z osobna lub użyć swoich zmian i nadpisać istniejącą treść.

Scalanie konfliktów w kodzie.

Będziesz mógł przejrzeć najnowszą treść i scalić lub nadpisać kod albo odrzucić zmiany.

Samouczek: edytowanie kodu witryny przy użyciu Visual Studio Code for the Web

W tym samouczku opisano edytowanie kodu witryny przy użyciu Visual Studio Code for Web.

Krok 1. Edycja kodu witryny przy użyciu Visual Studio Code dla sieci Web

  1. Otwórz witrynę w studiu projektowym Power Pages

  2. Wybierz opcję Edytuj kod w prawym górnym rogu

    Otwieranie Visual Studio Code ze studia projektowego.

  3. Wybierz Otwórz Visual Studio Code w oknie potwierdzenia.

  4. Zaloguj się do usługi Visual Studio Code, korzystając z poświadczeń środowisk.

  5. Poczekaj na zainicjowanie rozszerzenia sieci Web narzędzia Power Platform Tools i załadowanie kodu strony internetowej w lewym okienku.

Krok 2: Aktualizacja treści i kodu

  1. Eksplorator po lewej stronie ekranu ładuje odpowiednie metadane konfiguracji witryny, które można edytować za pomocą Visual Code for the Web.

    Menu Eksploratora dla niezatytułowanego obszaru roboczego z plikami sieci web.

  2. Wprowadź zmiany w odpowiednich plikach metadanych i naciśnij Ctrl+S, aby zapisać zmiany.

  3. Przejdź do studia projektowego i wybierz opcję Synchronizuj, aby ściągnąć wszystkie aktualizacje z bieżącej sesji studia projektowego.

    Interfejs umożliwia użytkownikowi wybranie przycisku Synchronizacja w celu zsynchronizowania zmian wprowadzonych w Visual Studio Code do studia projektowania.

  4. Wybierz Pogląd, by zobaczyć zmiany w witrynie Power Pages.

Korzystanie z aplikacji Visual Studio Code for the Web lub programu Visual Studio Code Desktop

Użytkownicy mogą edytować, debugować i wyświetlać podgląd zmian stron przy użyciu Visual Studio Code for the Web bez konieczności używania zewnętrznych narzędzi. Program Visual Studio Code Desktop udostępnia inne zaawansowane funkcje edytowania wszystkich metadanych witryny i integrowania ich z usługą GitHub, strukturami oraz ciągłymi integracjami/ciągłymi procesami developmentu (CI/CD).

Funkcja VS Code for the Web VS Code Desktop
Tworzenie nowych rekordów metadanych konfiguracji witryny Nie. Ograniczone do stron internetowych, szablonów stron, szablonów internetowych, wstawek zawartości i plików internetowych.
Bezpośrednia edycja witryny Tak Nie.
Edytowanie metadanych witryny Ograniczenie do edytowania stron sieci Web, wstawek zawartości, podstawowych formularzy, formularzy wieloetapowych, list i szablonów sieci Web. Konfiguracja wszystkich metadanych Power Pages
Podgląd witryny Planowane Planowane
Pomoc techniczna Power Platform CLI Nie. Tak
Zaawansowany przepływ pracy z procesorem i magazynem — obsługa narzędzia ReactJS lub innego narzędzia do tworzenia struktury Nie. Tak
Integracja z GitHub z takimi możliwościami, jak zaewidencjonowanie i wyewidencjonanie kodu, zarządzanie konfliktami i scalanie. Nie. Tak

Edytowanie kodu w aplikacji Zarządzanie portalami

Uwaga

  • Edytowanie witryn internetowych przy użyciu Visual Studio Code for the Web nie jest obsługiwane w usługach Government Community Cloud (GCC), Government Community Cloud (GCC High) i Department of DoD (Department of DoD). Użytkownicy w tych regionach mogą używać aplikacji Zarządzanie portalami, aby wprowadzać zmiany.

Jeśli w danym regionie nie jest obsługiwana aplikacja Visual Studio Code for the Web, wybranie ikony edytora kodu </> na pasku poleceń spowoduje otwarcie aplikacji Zarządzanie portalami.

Przejdź do żądanych stron sieci Web, formularzy podstawowych, formularzy wieloetapowych, list lub szablonów sieci Web, aby edytować kod.

Type Lokalizacja kodu
Strona sieci Web Wybierz rekord strony internetowej
Wybierz rekord zawartości strony sieci Web z sekcji Treści zlokalizowane.
Kopię strony można edytować w polu Kopia (HTML) na karcie Ogólne.
Kod Niestandardowy JavaScript i Niestandardowe CSS można edytować na karcie Zaawansowane.
Formularz podstawowy Wybierz rekord formularza podstawowego.
Edytuj kodniestandardowego JavaScript na karcie Ustawienia dodatkowe.
Formularz obejmujący wiele kroków Wybierz rekord formularza wieloetapowego.
Wybierz krok formularza wieloetapowego na karcie Kroki formularza.
Edytuj niestandardowy kod JavaScript na karcie Opcje formularza.
List Wybierz rekord listy.
Edytuj niestandardowy kod JavaScript na karcie Opcje.
Szablon sieci Web Wybierz rekord szablonu sieci Web.
Edytuj Źródło na karcie Ogólne.

Zapisz rekord i wyświetl podgląd witryny internetowej, aby przetestować kod.

Zobacz też