使用静态资源

学习目标

完成本单元后，您将能够：

阐述静态资源的含义及使用静态资源的原因。
解释独立静态资源和压缩静态资源之间的区别。
创建并上载静态资源。
在 Visualforce 页面中添加静态资源。

备注

用中文（简体）学习？在此徽章中，Trailhead 实践挑战验证使用英文。括号中提供了译文，用作参考。确保复制粘贴英文值，将 Trailhead Playground 切换为英语，将区域设置切换为美国。按此处说明进行。

查看 Trailhead 本地化语言徽章了解如何利用 Trailhead 译文。

静态资源简介

静态资源允许您上载可以在 Visualforce 页面中引用的内容。资源可以归档（例如 .zip 和 .jar 文件）、图像、样式表、JavaScript 和其他文件。

静态资源由 Lightning 平台管理和分发，该平台充当文件的内容分发网络 (CDN)。自动处理缓存和分发。

静态资源使用 $Resource 全局变量进行引用，该变量可由 Visualforce 直接使用，或用作 URLFOR() 等函数的参数。

创建并上载简单的静态资源

为独立的静态资产创建简单、独立的静态资源。

当静态资源与其他资源不相关，也就是说，不是一组类似资源（例如图标组的一部分）时，创建独立的静态资源是很简单的。

从 http://jquery.com/download/ 下载当前版本的 jQuery JavaScript 库。
从设置中，在“快速查找”方框中输入“静态资源”，然后选择静态资源，最后单击新建。
输入 jQuery 作为名称。
单击 Choose File（选择文件），然后选择您之前下载的 jQuery JavaScript 文件。
如果看到缓存控制菜单，选择“公共”。此项目并非在所有组织中都可见。
单击保存。

您现在拥有 jQuery 的静态资源版本，通过在 {!$Resource.jQuery } 等表达式中引用就能在 Visualforce 页面中使用 jQuery。让人惊喜的是，在无需更改任何 Visualforce 页面的情况下，您可以编辑静态资源并将其更新至 jQuery 3.1.2。静态资源引用处理细节。

在 Visualforce 页面中添加静态资源

使用 $Resource 全局变量和点记法来引用独立的静态资源。

要创建新的 Visualforce 页面，请打开 Developer Console，然后单击 File（文件） | New（新建） | Visualforce Page（Visualforce 页面）。输入 HelloJQuery 作为页面名称。

在编辑器中，将标记替换为以下内容。

<apex:page>
    <!-- Add the static resource to page's <head> -->
    <apex:includeScript value="{!Resource.jQuery }"/>
    <!-- A short bit of jQuery to test it's there -->
    <script type="text/javascript">
        jQuery.noConflict();
        jQuery(document).ready(function() {
            jQuery("#message").html("Hello from jQuery!");
        });
    </script>
    <!-- Where the jQuery message will appear -->
    <h1 id="message"></h1>
</apex:page>

单击 Preview（预览）可打开页面预览，您可以在进行更改时查看该预览。应该会打开一个新窗口，显示一条 jQuery 的短消息。

页面中除了说明如何在 Visualforce 页面包含 JavaScript 资源外，没有更多信息。关键是 $Resource 全局变量的使用。使用点记法将 $Resource 与 <apex:includeScript>（对于 JavaScript 文件）、<apex:stylesheet>（对于 CSS 样式表）或 <apex:image>（对于图形文件）标记中的资源名称组合，以将 $Resource 添加到您的页面。

创建并上载压缩的静态资源

创建压缩的静态资源，将通常一起更新的相关文件组合在一起。

当静态资产是一组相关项（例如，一组应用程序图标或复杂的 JavaScript库）时，最好创建压缩的静态资源。创建一个 zip 文件，其中包含您想要组合在一起的所有元素，然后将 zip 文件上载到 Lightning 平台。

从 http://jquerymobile.com/download/ 下载当前版本的 jQuery Mobile JavaScript 库。
打开 zip 文件并删除 /demos/ 目录及其内容。
压缩文件夹并将其重命名为 jquery.zip。
从设置中，在“快速查找”方框中输入“静态资源”，然后选择静态资源，最后单击新建。
输入 jQueryMobile 作为名称。
单击选择文件，然后选择 jquery.zip 文件。
如果看到缓存控制菜单，选择“公共”。此项目并非在所有组织中都可见。
单击保存。

现在，您拥有了可在 Visualforce 页面中使用的 jQuery Mobile 静态资源版本。接下来，您将学习如何引用压缩静态资源中的单个文件。

将压缩的静态资源添加到 Visualforce 页面

使用 $Resource 全局变量以及 URLFOR() 函数来引用压缩静态资源中的项目。

URLFOR() 函数可以将压缩静态资源的引用以及其中项目的相对路径组合起来，以创建一个 URL，该 URL 可以与引用静态资源的 Visualforce 组件一起使用。例如，URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png') 返回压缩静态资源中特定图形资产的 URL，该 URL 可供 <apex:image> 组件使用。您可以为 <apex:includeScript> 和 <apex:stylesheet> 组件的 JavaScript 及样式表文件构建类似的 URL。

如果您尚未下载 jQuery Mobile JavaScript 库的当前版本，请按照“创建并上载简单的静态资源”部分的说明进行操作。添加为静态资源。
要创建新的 Visualforce 页面，请打开 Developer Console，然后单击 File（文件） | New（新建） | Visualforce Page（Visualforce 页面）。输入 jQueryMobileResources 作为页面名称。

在编辑器中，将标记替换为以下内容。

<apex:page showHeader=”false” sidebar=”false” standardStylesheets=”false”>
    <!-- Add static resource to page’s <head> -->
    <apex:stylesheet value=”{!
        URLFOR($Resource.jQueryMobile,’jquery.mobile-1.4.5.css’)}”/>
    <apex:includeScript value=”{!$Resource.jQueryMobile }”/>
    <apex:includeScript value=”{!
        URLFOR($Resource.jQueryMobile,’jquery.mobile-1.4.5.js’)}”/>
    <div style=”margin-left: auto; margin-right: auto; width: 50%”>
        <!-- Display images directly referenced in a static resource -->
        <h3>Images</h3>
        <p>A hidden message:
            <apex:image alt=”eye” title=”eye”
                url=”{!URLFOR($Resource.jQueryMobile, ‘images/icons-png/eye-black.png’)}”/>
            <apex:image alt=”heart” title=”heart”
                url=”{!URLFOR($Resource.jQueryMobile, ‘images/icons-png/heart-black.png’)}”/>
            <apex:image alt=”cloud” title=”cloud”
                url=”{!URLFOR($Resource.jQueryMobile, ‘images/icons-png/cloud-black.png’)}”/>
        </p>
    <!-- Display images referenced by CSS styles, all from a static resource. -->
    <h3>Background Images on Buttons</h3>
    <button class=”ui-btn ui-shadow ui-corner-all
        ui-btn-icon-left ui-icon-action”>action</button>
    <button class=”ui-btn ui-shadow ui-corner-all
        ui-btn-icon-left ui-icon-start”>star</button>
    </div>
</apex:page>

本示例使用 jQuery Mobile Javascript 库 1.4.5 版本。如果您使用的是较新版本，请更新代码第 4 行和第 7 行中的版本号。

单击 Preview（预览）可打开页面预览，您可以在进行更改时查看该预览。打开新窗口，并显示来自 jQuery Mobile 静态资源的部分图像。

为简单起见，此页面仅显示如何在 Visualforce 页面上引用压缩的静态资源。如果您想了解有关如何组合 Visualforce 和 JavaScript 库（例如 jQuery Mobile）的更多信息，请参阅其他资源。

资源