Cipta dan gunakan aplikasi satu halaman dalam Power Pages

Power Pages menyokong penyepaduan kod aplikasi satu halaman (SPA) yang dicipta dengan alat bantuan AI generasi akan datang, seperti GitHub Copilot. Keupayaan ini membolehkan pembangun membawa pengalaman bahagian hadapan berasaskan komponen moden ke dalam Power Pages dengan menggunakan bahasa semula jadi sebagai antara muka pengekodan.

Dengan membimbing, menguji dan memperhalusi kod yang dijana AI, pembuat boleh mengalihkan tumpuan mereka daripada tugas pelaksanaan berulang kepada orkestrasi peringkat lebih tinggi. Pendekatan ini memperkasakan pembangunan yang lebih intuitif dan kreatif sambil mengekalkan kualiti dan piawaian gred perusahaan.

Artikel ini menunjukkan kepada anda cara:

Cipta dan sediakan projek SPA untuk Power Pages dengan menggunakan Power Platform CLI (PAC CLI).
Muat naik dan muat turun aset kod ke dan dari laman Power Pages anda.
Sediakan struktur projek yang selamat dan boleh diselenggara.
Ketahui perbezaan utama antara pelaksanaan Power Pages berasaskan SPA dan tradisional.

Nota

Tapak SPA ialah tapak Power Pages yang berjalan sepenuhnya dalam penyemak imbas pengguna (pemaparan bahagian pelanggan). Tidak seperti tapak Power Pages tradisional, anda mengurus tapak SPA hanya melalui kod sumber dan alat antara muka baris arahan (CLI).
Penyepaduan Git Power Platform tidak disokong untuk tapak web Aplikasi Single-Page (SPA) dalam Power Pages.

Prasyarat

Sebelum anda memulakan, pastikan anda mempunyai:

Persekitaran Power Pages dengan keistimewaan admin.
Power Platform CLI (PAC CLI) versi 1.44.x atau lebih baru dipasang dan disahkan.
Laman Power Pages pada versi 9.7.4.x atau lebih baru.
Benarkan muat naik fail JavaScript dalam persekitaran Dataverse.
Repositori Git tempatan dengan projek bahagian hadapan tersuai anda, seperti React, Angular atau Vue.

Benarkan muat naik fail JavaScript

Secara lalai, sesetengah persekitaran Dataverse menyekat muat naik fail JavaScript (.js). Jika anda menghadapi ralat "Import gagal: Lampiran sama ada bukan jenis yang sah atau terlalu besar. Ia tidak boleh dimuat naik atau dimuat turun.", kemas kini tetapan persekitaran anda untuk membenarkan jenis fail ini.

Untuk melaraskan tetapan dalam pusat pentadbiran Power Platform bagi persekitaran, ikut langkah berikut:

Daftar masuk ke pusat pentadbiran Power Platform.
Dalam anak tetingkap navigasi, pilih Urus.
Dalam anak tetingkap Urus , pilih Persekitaran.
Pilih persekitaran.
Dalam bar perintah, pilih Tetapan.
Kembangkan Produk dan kemudian pilih Privasi + Keselamatan.
Dalam bahagian Lampiran Disekat , alih keluar js daripada senarai sambungan fail.
Pilih Simpan.

Buat dan gunakan tapak SPA

Power Pages tapak SPA diuruskan menggunakan arahan PAC CLI upload-code-site dan download-code-site. Selepas anda memuat naik tapak, ia muncul dalam Power Pages dalam senarai Tapak tidak aktif. Aktifkan tapak untuk menyediakannya kepada pengguna.

Muat naik tapak SPA

Gunakan arahan pac pages upload-code-site untuk memuat naik sumber tempatan anda dan aset yang disusun ke persekitaran Power Pages anda.

Syntax

pac pages upload-code-site `
  --rootPath <local-source-folder> `
  [--compiledPath <build-output-folder>] `
  [--siteName <site-display-name>]

Parameter

Parameter_	Alias	Diperlukan	Perihalan
`--rootPath`	`-rp`	Ya	Folder setempat yang mempunyai fail sumber tapak anda
`--compiledPath`	`-cp`	Tidak	Laluan ke aset yang disusun, seperti React `build`
`--siteName`	`-sn`	Tidak	Nama paparan untuk laman Power Pages anda

Contoh

pac pages upload-code-site `
  --rootPath "../your-project" `
  --compiledPath "./build" `
  --siteName "Contoso Code Site"

Jika anda tidak mempunyai projek sedia ada, cuba contoh pelaksanaan tapak SPA menggunakan React, Angular dan Vue.

Mentakrifkan parameter muat naik dengan `powerpages.config.json`

Sesuaikan tingkah laku arahan upload-code-site dengan memasukkan powerpages.config.json fail dalam folder akar tapak anda. Apabila fail ini hadir, jalankan upload-code-site dengan parameter sahaja --rootPath . Perintah membaca baki nilai daripada fail konfigurasi. Jika anda membekalkan kedua-dua argumen baris arahan dan nilai konfigurasi, argumen baris arahan diutamakan.

Medan konfigurasi

Medan	Jenis	Diperlukan	Perihalan
`siteName`	rentetan	Ya	Nama paparan untuk laman Power Pages.
`compiledPath`	rentetan	Ya	Laluan ke direktori output yang disusun (contohnya, folder Vite `dist` atau React `build` ), berbanding dengan `powerpages.config.json`.
`defaultLandingPage`	rentetan	Ya	Halaman HTML disiarkan apabila akar tapak dibuka, berbanding ( `compiledPath` biasanya `index.html`).
`bundleFilePatterns`	rentetan[]	Tidak	Senarai corak kad bebas yang mengenal pasti fail dalam tapak `web-files` yang dialih keluar oleh CLI sebelum memuat naik binaan baharu. Gunakan medan ini untuk membersihkan himpunan basi yang dicincang kandungan supaya aset lama tidak terkumpul di laman web ini. Lihat Pembahagian kod dan pembersihan bundle.
`includeSource`	boolean	Tidak	Apabila `true`, arahan memuat naik kod sumber anda sebagai tambahan kepada aset yang disusun. Lalai kepada `false`.
`sourceExcludePatterns`	rentetan[]	Tidak	Corak kad bebas untuk fail sumber dikecualikan daripada muat naik. Digunakan hanya apabila `includeSource` ( `true` contohnya, untuk melangkau `node_modules` fail persekitaran atau setempat).

Untuk rujukan medan yang paling tepat dan up-to-date, lihat skema.powerpages.config.json Tambah sifat padanan $schema pada fail konfigurasi anda untuk mendayakan pengesahan dan autolengkap dalam editor yang menyokong Skema JSON.

Sampel `powerpages.config.json`

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

Muat turun tapak SPA

Gunakan arahan pac pages download-code-site untuk memuat turun kod tapak sedia ada ke direktori tempatan untuk tujuan penyuntingan atau sandaran.

Syntax

pac pages download-code-site `
  [--environment <env-url-or-guid>] `
  --path <local-target-folder> `
  --webSiteId <site-guid> `
  [--overwrite]

Parameter

Parameter_	Alias	Diperlukan	Perihalan
`--environment`	`-env`	Tidak	Dataverse persekitaran (GUID atau URL penuh). Lalai kepada profil pengesahan aktif anda
`--path`	`-p`	Ya	Direktori tempatan untuk memuat turun kod tapak
`--webSiteId`	`-id`	Ya	GUID rekod laman web laman web Power Pages SPA
`--overwrite`	`-o`	Tidak	Ganti fail sedia ada dalam direktori sasaran jika ia wujud

Contoh

pac pages download-code-site `
  --environment "https://contoso.crm.dynamics.com" `
  --path "./downloaded-site" `
  --webSiteId "11112222-bbbb-3333-cccc-4444dddd5555" `
  --overwrite

Aktifkan dan uji laman web anda

Pergi ke Power Pages.
Pilih Tapak tidak aktif, cari tapak anda dan pilih Aktifkan semula.
Apabila tapak aktif, pergi ke URL tapak anda untuk menyemak penggunaan.

Petua

Mana-mana arahan kemudian upload-code-site mengemas kini tapak aktif secara automatik.

Struktur dan konfigurasi projek

Susun atur projek yang konsisten membantu memastikan tingkah laku muat naik yang betul.

/your-project
│
├─ src/                       ← Your source code, like React components
├─ build/                     ← Compiled assets, output of the `npm run build` command
├─ powerpages.config.json     ← Optional CLI configuration file
└─ README.md

Gunakan fail pilihan powerpages.config.json untuk menyesuaikan cara arahan berfungsi upload-code-site .

Pemisahan kod dan pembersihan bundle

Apabila aplikasi satu halaman berkembang, satu himpunan JavaScript menjadi besar dan lambat untuk dimuatkan. Alat binaan moden menyelesaikan masalah ini dengan pemisahan kod. Teknik ini memecahkan apl kepada bahagian yang lebih kecil yang dimuat turun oleh penyemak imbas atas permintaan (contohnya, hanya apabila pengguna menavigasi ke laluan tertentu). Setiap ketulan dipancarkan dengan cincang kandungan dalam nama failnya, seperti Dashboard-BSbmIXoe.js, jadi penyemak imbas boleh mengcachenya untuk tempoh yang lama dan memuat turunnya semula hanya apabila kandungannya berubah.

Pemisahan kod memperkenalkan pertimbangan penggunaan yang unik untuk tapak SPA Power Pages: kerana setiap binaan menghasilkan nama fail cincang baharu, larian upload-code-site berulang akan meninggalkan fail cincang lama di tapak. Selama banyak penggunaan, ketulan yatim piatu ini terkumpul di laman web web-filesini. Bidang wujud bundleFilePatternspowerpages.config.json untuk membersihkannya.

Dayakan pemisahan kod

Pemisahan kod dikendalikan oleh alat binaan bahagian hadapan anda, bukan oleh Power Pages, jadi pendekatan bergantung pada rangka kerja dan bundler yang anda gunakan. Teknik yang paling biasa ialah memuatkan bahagian apl dengan import dinamik, selalunya digunakan pada tahap laluan atau paparan supaya setiap bahagian dimuat turun hanya apabila pengguna menavigasi kepadanya (pemuatan malas).

Bundler seperti Vite, webpack dan esbuild juga boleh mengumpulkan modul ke dalam ketulan bernama secara eksplisit. Untuk konfigurasi yang tepat, lihat dokumentasi untuk rangka kerja dan bundler anda.

dist/assets/
├─ index-BJltBIP-.js        ← app entry
├─ index-DMwMk7hv.css       ← styles
├─ Dashboard-BSbmIXoe.js    ← lazy route chunk
├─ InvoiceList-DwjrGrAI.js  ← lazy route chunk
└─ InvoiceDetail-D3DVGkeM.js← lazy route chunk

Mana-mana pendekatan yang anda pilih, hasilnya adalah sama, dan ia adalah bahagian yang penting untuk penggunaan: binaan memancarkan berbilang fail output, masing-masing dengan cincang kandungan dalam namanya. Oleh kerana cincang tersebut berubah apabila kandungan fail berubah, setiap binaan menghasilkan set nama fail yang berbeza. Bahagian seterusnya menerangkan cara memastikan persekitaran Dataverse anda bersih apabila nama tersebut berubah.

Bagaimana `upload-code-site` membersihkan berkas basi

Sebelum memuat naik aset yang disusun anda, upload-code-site memadamkan setiap fail dalam tapak web-files yang sepadan dengan corak kad bebas dalam bundleFilePatterns, kemudian memuat naik binaan semasa. Tingkah laku padam-kemudian-muat naik ini mengekalkan set fail yang digunakan sama dengan output disusun terbaharu anda dan bukannya melapisi setiap binaan di atas yang sebelumnya.

Untuk pembersihan berfungsi, corak kad bebas dalam bundleFilePatterns mesti sepadan dengan nama fail yang dipancarkan oleh binaan anda. Terdapat dua cara untuk memastikan ia tepat, bergantung pada cara alat binaan anda menamakan fail.

Pilihan 1: Senaraikan corak kad bebas secara langsung

Banyak alat binaan mengekalkan awalan nama yang stabil dan hanya menukar cincang kandungan, seperti index-[hash].js. Apabila nama fail output anda mengikut corak yang boleh diramal seperti ini, senaraikan corak kad bebas untuk setiap satu dalam bundleFilePatterns. Tiada perkakas tambahan diperlukan:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

Corak kad bebas seperti sepadan index-*.js dengan fail itu pada setiap binaan, tanpa mengira cincang. Tambah satu entri bagi setiap fail output dan tambah corak baharu apabila binaan anda mula menghasilkan fail output baharu.

Pilihan 2: Jana corak kad bebas dengan skrip pasca binaan

Gunakan pendekatan ini apabila nama fail output anda tidak mengikut corak yang boleh diramalkan atau apabila apl anda menghasilkan banyak fail yang namanya berubah semasa anda menambah dan mengalih keluar laluan, yang menjadikan senarai penyelenggaraan tangan terdedah kepada ralat. Skrip pendek yang berjalan selepas binaan mengimbas output yang disusun dan menulis bundleFilePatterns semula dengan corak kad bebas untuk setiap fail yang dipancarkan. Sebagai contoh, apabila alat binaan menamakan fail sebagai [name]-[hash].[ext], skrip dikurangkan Dashboard-BSbmIXoe.js kepada corak Dashboard-*.js.

scripts/postbuild.js:

#!/usr/bin/env node

/**
 * Post-build script: scans dist/assets/ and updates powerpages.config.json
 * with bundleFilePatterns that match all Vite-generated chunks.
 *
 * This ensures `pac pages upload-code-site` cleans up old hashed bundles
 * on each deploy instead of accumulating stale files.
 *
 * Usage: node scripts/postbuild.js
 * Or via npm: "postbuild": "node scripts/postbuild.js" in package.json
 */

import { readdirSync, readFileSync, writeFileSync } from 'fs'
import { join } from 'path'

const ROOT = join(import.meta.dirname, '..')
const DIST_ASSETS = join(ROOT, 'dist', 'assets')
const CONFIG_PATH = join(ROOT, 'powerpages.config.json')

// Vite output format: [name]-[hash].[ext]
// We want to extract "name" and "ext" to produce "name-*.ext" patterns
const HASH_PATTERN = /^(.+)-[A-Za-z0-9_-]{6,12}\.(js|css)$/

try {
  const files = readdirSync(DIST_ASSETS)
  const patternSet = new Set()

  for (const file of files) {
    const match = file.match(HASH_PATTERN)
    if (match) {
      const [, baseName, ext] = match
      patternSet.add(`${baseName}-*.${ext}`)
    }
  }

  const patterns = [...patternSet].sort()

  if (patterns.length === 0) {
    console.log('No hashed bundles found in dist/assets/ — skipping config update.')
    process.exit(0)
  }

  // Read current config
  const config = JSON.parse(readFileSync(CONFIG_PATH, 'utf-8'))
  const oldPatterns = config.bundleFilePatterns || []

  // Check if update is needed
  const oldSet = new Set(oldPatterns)
  const newSet = new Set(patterns)
  const changed = oldSet.size !== newSet.size || [...newSet].some(p => !oldSet.has(p))

  if (!changed) {
    console.log(`bundleFilePatterns already up-to-date (${patterns.length} patterns).`)
    process.exit(0)
  }

  // Update config
  config.bundleFilePatterns = patterns
  writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2) + '\n', 'utf-8')

  console.log(`Updated powerpages.config.json with ${patterns.length} bundle patterns:`)
  for (const p of patterns) {
    console.log(`  ${p}`)
  }
} catch (err) {
  console.error('postbuild error:', err.message)
  process.exit(1)
}

Wayar skrip ke dalam binaan anda supaya ia sentiasa berjalan selepas bundler:

{
  "scripts": {
    "build": "tsc -b && vite build && node scripts/postbuild.js"
  }
}

Sekarang penggunaan adalah dua arahan, dan laman web tidak pernah mengumpul ketulan yatim piatu:

npm run build
pac pages upload-code-site --rootPath .

Selepas binaan, powerpages.config.json mencerminkan himpunan semasa yang tepat, contohnya:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "Dashboard-*.js",
    "InvoiceDetail-*.js",
    "InvoiceList-*.js",
    "index-*.css",
    "index-*.js"
  ]
}

Pengesahan dan kebenaran

Power Pages tapak SPA menggunakan model security yang sama seperti tapak Power Pages tradisional.

Konfigurasikan pembekal identiti

Pergi ke Power Pages.
Cari tapak anda dan pilih Edit.
Pilihpembekal Identiti>.
Tambah atau sediakan penyedia identiti, seperti Microsoft Entra ID.
Setiap tapak baharu secara automatik mempunyai pembekal Microsoft Entra ID lalai.

Akses konteks pengguna dalam kod

Dapatkan metadata pengesahan pada klien:

URL Pihak Berkuasa:

Pihak berkuasa atau URL log masuk untuk Microsoft Entra ID ialah:
```
https://login.windows.net/<tenantId>
```
Cari URL Autoriti untuk pembekal identiti lain yang dikonfigurasikan dengan pergi ke tetapan konfigurasi Power Pages><your site>>Keselamatan>Pembekal identiti>.

Butiran pengguna:

window["Microsoft"].Dynamic365.Portal.User

Sampel aliran Reaksi

import { IconButton, Tooltip } from '@mui/material';
import {
    Login,
    Logout
} from '@mui/icons-material';
import React from 'react';
export const AuthButton = () => {
    const username = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.userName ?? "";
    const firstName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.firstName ?? "";
    const lastName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.lastName ?? "";
    const tenantId = (window as any)["Microsoft"]?.Dynamic365?.Portal?.tenant ?? "";
    const isAuthenticated = username !== "";
    const [token, setToken] = React.useState<string>("");

    React.useEffect(() => {
        const fetchAntiForgeryToken = async (): Promise<string> => {
            try {
                const tokenEndpoint = "/_layout/tokenhtml";

                const response = await fetch(tokenEndpoint, {});

                if (response.status !== 200) {
                    throw new Error(`Failed to fetch token: ${response.status}`);
                }

                const tokenResponse = await response.text();                
                const valueString = 'value="';
                const terminalString = '" />';
                const valueIndex = tokenResponse.indexOf(valueString);

                if (valueIndex === -1) {
                    throw new Error('Token not found in response');
                }

                const requestVerificationToken = tokenResponse.substring(
                    valueIndex + valueString.length,
                    tokenResponse.indexOf(terminalString, valueIndex)
                );

                return requestVerificationToken || '';
            } catch (error) {
                console.warn('[Impersonation] Failed to fetch anti-forgery token:', error);
                return '';
            }
        };

        const getToken = async () => {
            try {
                const token = await fetchAntiForgeryToken();
                setToken(token);
            } catch (error) {
                console.error('Error fetching token:', error);
            }
        };
        getToken();
    }, []);

    return (
        <div className="flex items-center gap-4">
            {isAuthenticated ? (
                <>
                    <span className="text-sm">Welcome {firstName + " " + lastName}</span>
                    <Tooltip title="Logout">
                        <IconButton color="primary" onClick={() => window.location.href = "/Account/Login/LogOff?returnUrl=%2F"}>
                            <Logout />
                        </IconButton>
                    </Tooltip>
                </>
            ) : (
                <form action="/Account/Login/ExternalLogin" method="post">
                    <input name="__RequestVerificationToken" type="hidden" value={token} />
                    <Tooltip title="Login">
                        <IconButton name="provider" type="submit" color="primary" value={`https://login.windows.net/${tenantId}/`}>
                            <Login />
                        </IconButton>
                    </Tooltip>
                </form>
            )}
        </div>
    );
};

Gunakan API Web Power Pages

Pembangun boleh menggunakan API Web Power Pages untuk memuatkan kandungan ke dalam UI atau untuk mencipta, mengemas kini dan memadamkan rekod. Sebelum menggunakan API ini, pastikan API Web yang diperlukan didayakan dan keizinan jadual dan peranan web yang sesuai dikonfigurasikan dengan betul.


// Create query to get all cards from Dataverse
const fetchCards = async () => {
    const response = await fetch("/_api/cr7ae_creditcardses");
    const data = await response.json();
    const cards = data.value;
    const returnData = [];

    // Loop through the cards and get the name and id of each card
    for (let i = 0; i < cards.length; i++) {
        const card = cards[i];
        const cardName = card.cr7ae_name;
        const cardId = card.cr7ae_creditcardsid;
        const features = card.cr7ae_features
            ?.split(',')
            .map((feature: string) => feature.trim());
        const type = card.cr7ae_type;
        const image = card.cr7ae_image;
        const category = card.cr7ae_category
            ?.split(',')
            .map((cat: string) => cat.trim());
        
        // ...additional processing/pushing to returnData...
    }

    return returnData;
};

Sediakan pembangunan tempatan dengan mendayakan panggilan API Web daripada localhost menggunakan pengesahan Microsoft Entra ID

Pembangun memerlukan kitaran lelaran yang lebih pantas, penyahpepijatan tempatan dan keupayaan muat semula panas semasa membina aplikasi. SPA menyokong aliran kerja ini dengan mendayakan panggilan API Web selamat daripada localhost menggunakan pengesahan v1 Microsoft Entra ID (Azure AD).

Persediaan ini membolehkan anda:

Jalankan apl anda secara setempat dengan sokongan pengesahan penuh.
Gunakan alat pembangunan moden seperti Vite untuk muat semula panas dan maklum balas pantas.
Elakkan isu CORS apabila memanggil API Web Power Pages.
Mempercepatkan pembangunan tanpa menggunakan perubahan pada portal.

Konfigurasi ini membolehkan pengalaman pembangunan tempatan yang produktif untuk SPA, jadi pembangun boleh membina, menguji dan mengulangi dengan cepat dengan akses API penuh dan sokongan pengesahan.

Penting

Gunakan titik akhir Microsoft Entra v1 sahaja untuk pengesahan.
Pengesahan pembawa hanya disokong dalam portal versi 9.7.6.6 atau lebih baru.
Gunakan seting ini hanya dalam persekitaran pembangunan.

Langkah-langkah konfigurasi

Dayakan pengesahan SPA
1. Dalam portal Azure, buka apl Microsoft Entra yang didaftarkan untuk portal anda.
2. Dayakan pengesahan Aplikasi Satu Halaman (SPA).
3. Tambah localhost sebagai URI ubah hala dengan menggunakan konfigurasi platform aplikasi Satu halaman . Untuk maklumat lanjut, lihat Cara menambah URI ubah hala dalam permohonan anda.
  - Ubah hala URI:http://localhost:<port>/ .

Tambah tetapan tapak

Tambahkan tetapan site ini dalam Power Pages:

Authentication/BearerAuthentication/Enabled = true
Authentication/BearerAuthentication/Protocol = OpenIdConnect
Authentication/BearerAuthentication/Provider = AzureAD

Gunakan ADAL.js untuk pengesahan
- Laksanakan pengesahan bahagian pelanggan dengan menggunakan ADAL.js.
Nota

MSAL.js tidak serasi kerana Power Pages menggunakan titik akhir v1 Microsoft Entra, manakala MSAL menggunakan v2. Format penerbit berbeza antara versi.
Tambah pengepala kebenaran
- Sertakan pengepala ini dalam semua permintaan API Web:
```
Authorization: Bearer <id_token>
```
Tetapkan keterlihatan tapak kepada Awam
- Tetapan ini membolehkan localhost mengakses tapak untuk tujuan pembangunan dan ujian.

Konfigurasikan proksi pembangunan

Jika anda menggunakan Vite, tambahkan kod ini untuk vite.config.js mengelakkan isu CORS:

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/_api': {
        target: 'https://site-foo.powerappsportals.com',
        changeOrigin: true,
        secure: true
      }
    }
  }
});

Perbezaan daripada tapak Power Pages sedia ada

Jadual berikut meringkaskan perbezaan utama antara tapak SPA yang dicipta dengan ciri ini dan tapak Power Pages tradisional:

Ciri	Tingkah laku tapak SPA
Muat semula bahagian pelayan	Sentiasa mengembalikan halaman akar tapak dan penghala bahagian klien memaparkan sub-laluan.
Konflik laluan	Laluan bahagian pelanggan diutamakan, dan penyegaran keras kembali ke akar.
Ruang kerja halaman	Ruang kerja halaman tidak disokong. Gunakan penghalaan pelanggan dan halaman laman klien. Untuk keselamatan peringkat halaman, semak peranan web yang diperuntukkan dengan objek pengguna global dan render UI secara bersyarat.
Ruang kerja gaya	Penggayaan dengan ruang kerja gaya tidak disokong. Gunakan penggayaan rangka kerja anda, seperti CSS, CSS-in-JSatau kelas utiliti.
Penyetempatan	Sokongan bahasa tunggal. Laksanakan pemuatan sumber bahagian pelanggan.
Templat cecair	Kod cecair dan templat Cecair tidak disokong. Akses data dengan menggunakan enjin templat rangka kerja anda dan API Web.

FAQ

Apakah sokongan yang tersedia untuk ujian unit dan penyepaduan?

Pada masa ini, tiada sokongan terbina dalam untuk ujian unit dan penyepaduan. Pembuat harus menulis dan melaksanakan ujian ini secara tempatan atau dalam saluran paip CI/CD mereka.

Adakah terdapat sokongan untuk Power Fx penyepaduan menggunakan WebAssembly?

Keupayaan ini tidak disokong pada masa ini.

Adakah kod sumber tersedia dalam Power Pages?

Pada masa ini, pembuat boleh membina tapak web menggunakan TypeScript atau GitHub Copilot Agent. Fail JavaScript dan CSS yang disusun boleh diakses dan boleh diedit dalam Visual Studio Code. Walau bagaimanapun, penyuntingan fail HTML secara langsung dan meluas tidak disokong pada masa ini.

Bolehkah saya mencipta komponen secara luaran dengan menggunakan ciri ini dan membawanya ke tapak Power Pages?

Tidak, anda tidak boleh membawa komponen yang dijana luaran ke laman Power Pages sedia ada dengan menggunakan ciri ini.

Bolehkah saya menambah komponen di luar kotak seperti senarai dan borang?

Menambah komponen di luar kotak seperti senarai dan borang tidak disokong pada masa ini. Walau bagaimanapun, anda boleh membina borang dan senarai tersuai dengan menggunakan rangka kerja React dan API Web.

Bolehkah saya mendayakan tapak SPA sebagai PWA daripada ruang kerja Sediakan?

Tidak. Tapak SPA tidak menyokong tetapan apl web progresif (PWA) dalam ruang kerja sediakan. Had ini bermakna anda tidak boleh menggunakan bahagian Mudah alih untuk mendayakan tapak sebagai PWA. Untuk menambah keupayaan PWA, seperti pengalaman apl boleh pasang dan halaman luar talian, laksanakannya dalam kod rangka kerja anda. Contohnya, tambahkan manifes aplikasi web dan pekerja perkhidmatan.

Bagaimanakah kawalan sumber berfungsi?

Pembangun boleh menggunakan Power Platform penyepaduan Git untuk kawalan sumber. Walau bagaimanapun, hanya fail web yang disusun ditambahkan pada repositori, bukan kod sumber penuh.

Adakah laman web ini menyokong SEO?

Oleh kerana laman web SPA dibina dengan rangka kerja React dan menggunakan rendering sisi pelanggan, sokongan SEO adalah terhad.

Apakah sokongan keselamatan dan tadbir urus Power Pages yang ditawarkan oleh tapak SPA?

Power Pages menguatkuasakan keizinan jadual dan peranan web keselamatan pada panggilan API Web, memastikan capaian data sejajar dengan peranan pengguna. Gunakan window["Microsoft"].Dynamic365.Portal.User objek untuk mendapatkan semula sifat pengguna asas dan menyesuaikan pengalaman berdasarkan persona pengguna.

Selain itu, tapak SPA menyokong:

Konfigurasi tapak awam dan swasta
Tetapan tadbir urus, termasuk kawalan ke atas capaian data tanpa nama
Konfigurasi pembekal pengesahan

Ciri-ciri ini membantu memastikan penyepaduan komponen tersuai yang selamat dan patuh dalam Power Pages.

Maklum balas

Adakah halaman ini membantu?

Last updated on 2026-07-21

Cipta dan gunakan aplikasi satu halaman dalam Power Pages

Prasyarat

Benarkan muat naik fail JavaScript

Buat dan gunakan tapak SPA

Muat naik tapak SPA

Syntax

Parameter

Contoh

Mentakrifkan parameter muat naik dengan powerpages.config.json

Medan konfigurasi

Sampel powerpages.config.json

Muat turun tapak SPA

Syntax

Parameter

Contoh

Aktifkan dan uji laman web anda

Struktur dan konfigurasi projek

Pemisahan kod dan pembersihan bundle

Dayakan pemisahan kod

Bagaimana upload-code-site membersihkan berkas basi

Pilihan 1: Senaraikan corak kad bebas secara langsung

Pilihan 2: Jana corak kad bebas dengan skrip pasca binaan

Pengesahan dan kebenaran

Konfigurasikan pembekal identiti

Akses konteks pengguna dalam kod

Sampel aliran Reaksi

Gunakan API Web Power Pages

Sediakan pembangunan tempatan dengan mendayakan panggilan API Web daripada localhost menggunakan pengesahan Microsoft Entra ID

Langkah-langkah konfigurasi

Perbezaan daripada tapak Power Pages sedia ada

FAQ

Apakah sokongan yang tersedia untuk ujian unit dan penyepaduan?

Adakah terdapat sokongan untuk Power Fx penyepaduan menggunakan WebAssembly?

Adakah kod sumber tersedia dalam Power Pages?

Bolehkah saya mencipta komponen secara luaran dengan menggunakan ciri ini dan membawanya ke tapak Power Pages?

Bolehkah saya menambah komponen di luar kotak seperti senarai dan borang?

Bolehkah saya mendayakan tapak SPA sebagai PWA daripada ruang kerja Sediakan?

Bagaimanakah kawalan sumber berfungsi?

Adakah laman web ini menyokong SEO?

Apakah sokongan keselamatan dan tadbir urus Power Pages yang ditawarkan oleh tapak SPA?

Maklumat berkaitan

Maklum balas

Sumber tambahan

Mentakrifkan parameter muat naik dengan `powerpages.config.json`

Sampel `powerpages.config.json`

Bagaimana `upload-code-site` membersihkan berkas basi