本文已参与「新人创作礼」活动，一起开启掘金创作之路。
场景描述
在POC环节，经常需要做些酷炫到页面，为客户演示，为了便于访问，通常会将Html静态页面打包上传到Salesforce站点或Salesforce1上。
方法介绍
- 编写本地静态文件，打包应用后将zip包上传至静态资源；
- 通用到两种方式编写VF index页面： a. 在VF中直接引用静态资源到index.html
<apex:page docType="html-5.0" sidebar="false" showHeader="false" standardStylesheets="false"
action="{!URLFOR($Resource.ShangpinhuiZip, 'shangpinhui/index.html')}">
</apex:page>
b. 直接将index页面改造成visualforce.page，在page里面引用静态资源中的link/js
<apex:page docType="html-5.0" sidebar="false" showHeader="false" standardStylesheets="false" >
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>库存查询</title>
<apex:stylesheet value="{!URLFOR($Resource.LY_POC, 'LY_POC/css/bootstrap.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.LY_POC, 'LY_POC/css/index.css')}"/>
</head>
<body>
<div class="fixed">
<span>库存列表(共6条)</span>
<a href="javascript:void(0)" class="glyphicon glyphicon-filter filter"></a>
</div>
<div class="container">
<div class="search" style="display: none;">
<p><label for="name">备件名称：</label><input id="name" type="text"/></p>
<p><label for="num">备件号：</label><input id="num" type="text"/></p>
<p><label for="warehouse">仓库名称：</label><input id="warehouse" type="text"/></p>
<button class="btn btn-default">库存查询</button>
</div>
<ul class="wrap">
<li class="item">
<p class="name">Hydrus&Centaurus&P1&P3.0</p>
<p class="level">库存分类级别：B<span>当前库存：12000</span></p>
<p class="warehouse">仓库： 哈尔滨子库</p>
<p class="spare_part">备件：80300698<span>替换备件：80509138</span></p>
<p class="desc">备件描述：CT病床_水平拖链 CT_Couch_Horizontal Drag Chain</p>
</li>
<li class="item">
<p class="name">Hydrus&Centaurus&P1&P3.0</p>
<p class="level">库存分类级别：A<span>当前库存：26</span></p>
<p class="warehouse">仓库：杭州子库</p>
<p class="spare_part">备件：80509135<span>替换备件：80509138</span></p>
<p class="desc">备件描述：CT病床_水平驱动器 CT_Couch_Horizontal Controller</p>
</li>
<li class="item">
<p class="name">P1&Hydrus</p>
<p class="level">库存分类级别：C<span>当前库存：0</span></p>
<p class="warehouse">仓库： 哈尔滨子库</p>
<p class="spare_part">备件：80100010<span>替换备件：80509138</span></p>
<p class="desc">备件描述：CTU16球管</p>
</li>
<li class="item">
<p class="name">Hydrus&Centaurus&P1&P3.0</p>
<p class="level">库存分类级别：B<span>当前库存：36800</span></p>
<p class="warehouse">仓库： 中国总库</p>
<p class="spare_part">备件：80100010<span>替换备件：80509138</span></p>
<p class="desc">备件描述：CT病床_水平拖链 CT_Couch_Horizontal Drag Chain</p>
</li>
<li class="item">
<p class="name">Hydrus&Centaurus&P1&P3.0</p>
<p class="level">库存分类级别：A<span>当前库存：26</span></p>
<p class="warehouse">仓库：杭州子库</p>
<p class="spare_part">备件：80509135<span>替换备件：80509138</span></p>
<p class="desc">备件描述：CT病床_水平驱动器 CT_Couch_Horizontal Controller</p>
</li>
<li class="item">
<p class="name">P1&Hydrus</p>
<p class="level">库存分类级别：C<span>当前库存：0</span></p>
<p class="warehouse">仓库： 哈尔滨子库</p>
<p class="spare_part">备件：80100010<span>替换备件：80509138</span></p>
<p class="desc">备件描述：CT病床_水平拖链 CT_Couch_Horizontal Drag Chain</p>
</li>
</ul>
</div>
<apex:includeScript value="{!URLFOR($Resource.LY_POC, 'LY_POC/js/jquery.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.LY_POC, 'LY_POC/js/bootstrap.min.js')}"/>
<script type="text/javascript">
$(function(){
$(".filter").click(function(){
$(".search").toggle();
});
});
</script>
</body>
</apex:page>
-
将index page配置成Visualforce Tab
-
将该Tab拖到Salesforce1 Menu中展示：
如果没见到你配置的Tab，操作如下图：
再次查看Salesforce Navigation，并移到右边：
站点操作：
在站点中将主页设置为index.page即可：
