WebApp简单模式创建

泽思网络 上海APP开发商 创建WebApp 创建WebApp分为普通模式和高级模式。简单模式创建的WebApp已经能够满足大部分开发者的需求，如果您需要更多高级功能和更好的预览体验请参照创建WebApp（高级模式）。目录 隐藏一、创建WebApp（普通模式）1、什么是360WebApp2、使用简单模式生成应用2.1、填写WebApp基本资料2.2、预览应用2.3、提交审核二、创建WebApp（高级模式）1、使用高级模式生成应用1.1、生成应用的AppID1.2、下载应用制作工具1.3、选择WebApp存储目录1.4、基本信息1.5、基本信息（续）1.6、应用配置1.7、创建完成1.8、上传应用2、配置文件详解3、高级功能3.1、WebApp支持直接调用的接口3.2、开发者可实现的接口3.3、对ActiveX控件的支持一、创建WebApp（普通模式）1、什么是360WebApp360WebApp是基于360应用开放平台接口实现的APP程序。合作伙伴可以快速开发出能同时在360安全桌面、360安全浏览器、360网址导航等平台上运行的web应用程序，分享360的海量用户。360WebAPP实质上是将网页或Flash以应用窗口的形式在用户桌面显示，在制作的过程中需要注意内容的宽度和高度，以便应用嵌入窗口后能在用户电脑上达到最佳的显示效果。示例：豆瓣电台（应用网页地址：http:/douban.fm/radio）嵌入应用窗口后的效果2、使用简单模式生成应用在阅读文本教程之前您可以先观看下面的视频教程对创建应用的过程又一个大致的了解：2.1、填写WebApp基本资料访问（在此页面您需要填写应用的基本信息，包括名称、分类、介绍、版本号，此外您还需要填写以下应用信息来生成您的WebApp。名称说明默认值应用实现方式WebApp可以是一个网页地址，也可以直接上传一个flash文件，请按照您的应用实际情况填写。填写前请先确定您的应用符合应用审核标准的要求 授权回调地址(选填)用户授权您的应用后，应用会自动跳转到您填写的授权回调地址(例如： )。此项非必填项，若不填写WebApp将默认使用应用的URL地址作为授权回调地址。注：在调用授权API时如单独指定了回调地址参数，则会使用参数中的地址作为授权回调地址。扩展阅读：OAuth2.0文档 API文档 应用窗口大小应用窗口的尺寸（包括标题栏和边框） Logo图标显示在应用窗口、应用列表、应用介绍页中，png格式，72*72像素图标PSD模板下载地址： Loading图片应用加载时显示的图片，jpg或png 高级属性初始化时间在初始化的过程中应用窗口中将显示Loading图片，可以尽量设置的长一点，因为应用只要加载完成就会显示，而无需一直等待。3全屏显示应用窗口上是否有全屏显示按钮，网页预览暂未实现禁用鼠标右键应用窗口中是否可以点击鼠标右键，网页预览暂未实现禁用最大化应用窗口上是否有最大化按钮，网页预览暂未实现禁用滚动条应用窗口中是否有滚动条，网页预览暂未实现禁用翻页效果是否在页面切换时显示从右向左的翻页效果，电子书，购物类应用可以尝试，网页预览暂未实现禁用浏览工具条是否在应用顶部显示类似于浏览器的前进、后退导航按钮，网页预览暂未实现禁用2.2、预览应用以上信息填写完成后可点击“预览应用”按钮进行WebApp预览，此处以豆瓣音乐为例，效果如下2.3、提交审核如果在预览的过程中对当前的效果不满意，您可以关闭预览窗口并对应用信息进行修改。确认应用效果后您可以点击“提交”按钮完成应用的创建，应用创建成功后进入以下页面。 在此页面您可以点击“提交审核”按钮将刚刚创建的应用进行审核提交。至此我们已经通过”简单模式”完成了一个WebApp的创建和提交，过程非常简单吧？简单模式创建的WebApp已经能够满足大部分开发者的需求，如果您还需要更多高级功能和更好的预览体验请参照创建WebApp（高级模式）。二、创建WebApp（高级模式）1、使用高级模式生成应用1.1、生成应用的AppID使用高级模式创建应用前必须先在应用开放平台生成一个唯一的应用AppID，具体生成方法如下1.在应用开放平台（）点击“提交应用”。2.在创建应用页面点击右上角的“高级模式提交”(如下所示)。 3.填写应用的基本信息并点击“创建”按钮，成功创建后应用的AppID将在下方显示，例如我获得的AppID是：100114241。1.2、下载应用制作工具获得ApppID后我们就可以开始生成应用了，首先下载360WebApp的本地制作工具。下载地址：1.3、选择WebApp存储目录工具下载完成后解压并运行360WebAppWizard.exe，程序运行后显示界面如下。对于初次开发应用的开发者，可点击“开始创建”创建自己的应用。若创建完成后需修改应用的配置信息，可点击“开始编辑”修改应用。 因为我们是创建应用，首先点击“创建应用”按钮并将WebApp存储目录设为D盘 1.4、基本信息在选择好WebApp的存储目录后，点击“下一步”进入信息编辑页面（如下图） 在此页面需要填写应用的详细信息，各项信息描述如下。名称说明默认值AppID之前生成的AppID 应用名称应用对用户显示的名称。 版本号用于应用升级，格式为1.0.0.1001。若应用需要升级，请在应用提交页面输入新的版本号，并提交新的应用。1.0.0.1001logo图标logo.png显示于标题栏，png格式，16*16像素。 任务栏图标logo.ico显示于任务栏的图标，ico格式，应包含16*16、 32*32、48*48像素三个32位图标。 背景图片back.png或back.jpg，启动Web应用时显示的背景图片，png或jpg格式，图片大小和应用窗口的内部大小（不包含窗口边框）应保持一致。 应用URL指向您的应用的URL地址，也可以是本地Flash文件。 LOGO图标、任务栏图标、Loading图片需要使用图形编辑软件制作，在这里我就不详细介绍了。我已经事先准备好了以下图片，因此在这里我只需要点击“浏览”按钮选择即可。1.5、基本信息（续）开发者还需输入应用的一些相关信息，各项详细描述如下，此处我将宽度设为423、高度213、应用初始化时间为15秒：名称说明默认值应用窗口宽度/高度应用窗口的宽度与高度。应用窗口默认有边框，这里的宽度与高度包含边框和标题栏的大小。360搜索中的webapp不宜大于540*500，游戏类可放宽至630*600宽度800高度600应用初始化时间指定启动应用时Loading图片的展现时间，单位为秒。对于页面加载慢的应用，可将时间设长一点。页面加载完成后，将忽略超时时间，立即显示页面内容。15秒1.6、应用配置开发者可以配置应用的一些基本属性，每项均提供了默认值，开发者可根据需要修改。各项配置信息详细描述如下：名称说明默认值全屏显示应用是否可以全屏显示，如果允许会在标题栏上出现全屏按钮。禁用右键应用是否有右键菜单。对于Flash应用，此项必须为禁用。禁用窗口边框指定应用是否含有窗口边框，当不含有窗口边框时，应用不可被拖动。建议一般应用包含边框，如果想做出Widget 效果应用可以设置为无边框模式。允许1.7、创建完成填写完上述内容后点击“下一步”按钮，即可生成应用。这个时候查看之前设置的WebApp存储目录 （D:）会发现多了一个以 应用名称-应用ID 命名的文件夹。进入该文件夹后可双击运行“测试.bat”预览应用。注意：测试.bat不属于应用内容，提交应用时请勿提交该文件。 若需要修改创建的应用，可运行WebAppWizard，选择“修改应用”功能进行修改。1.8、上传应用现在我们可以回到之前的提交应用网页（如下图） 此处您还需要提供 72*72的Logo图标（如下）图标PSD模板下载地址： Logo图标上传完成后请点击“应用程序文件”后面的上传按钮，选择并上传之前生成的应用（上传前请先将应用打包为zip格式）。上传完成之后点击“确定”按钮进入提交审核页面（如下）自此一个使用高级模式创建的应用已成功提交，请点击“提交审核”等待我们审核完成发布吧！2、配置文件详解*针对高级模式使用WebAppWizard创建向导创建应用，将生成基本的config.ini配置文件。此外， WebApp还提供了许多其他功能，若开发者想创建更丰富的应用，可手动修改config.ini配置文件。config.ini配置文件主要包含两个小节：info包含应用的名称、AppID和版本信息，WebAppWizard已自动生成。各字段详细描述如下：字段说明示例*id您申请开发Web应用时获得的AppID。id=10000003*name显示于360安全桌面的文字说明，建议不要太长。name=每日图片头条*version用于应用升级，格式为1.0.0.1001。version=1.0.0.1001注：*表示为必选项。AppSetting包含应用的配置信息，其中必选项及部分非必选项由WebAppWizard自动生成。各字段详细描述如下：字段说明示例【必选项】*title显示于标题栏、任务栏的文字说明，建议不要太长。WebAppWizard默认将该值等同于【info】节中的【name】字段，开发者可根据需要修改。title=每日图片头条*url指向您的应用页面网址（必须以http:/开头），也可以是本地Flash文件。url=*iconlogo图标，显示于标题栏，png格式，16*16像素。icon=logo.png*smicon显示于任务栏的图标，ico格式，应包含16*16、 32*32、48*48像素三个32位图标。smicon=logo.ico*catch_img启动应用时显示的背景图片，png或jpg格式，图片大小和应用窗口的内部大小（不包含窗口边框）应保持一致。catch _img=back.png*width应用的窗口宽度。width=800*height应用的窗口高度。height=600*timeout指定启动应用时背景图片的展现时间，单位为秒。对于页面加载慢的应用，可将时间设长一点，若showWhenOK=1（默认值），则页面加载完毕后忽略该时间设定而显示页面。若showWhenOK= 0，则页面必须等待该时间结束后才能显示。timeout=15*frame指定应用是否含有窗口边框，1为含有，0为不含有。当不含窗口边框的时候，Web应用不可以被拖动（此时可通过接口wappCaptionMove移动窗口）。建议：一般应用都应包含边框，如果想做出Widget 效果应用可以设置为不含。frame=1【可选项】max指定应用是否显示最大化按钮，有边框模式时显示于标题栏右侧，最大化后窗口边框不消失。默认为禁用。max=0fullscreen指定标题栏是否显示全屏按钮，全屏状态时将隐藏窗口边框。默认为禁用。fullscreen=0browsertoolbar指定应用是否支持类似于浏览器的前进、后退和刷新按钮工具条，显示在标题栏左侧。默认为禁用，WebApp不鼓励开发者使用此属性。browsertoolbar=0vscroll指定是否允许显示垂直滚动条，默认为禁用，WebApp不鼓励开发者使用此属性。小说、咨询等应用可设置为允许。vscroll=0hscroll指定是否允许显示水平滚动条，默认为禁用，WebApp不鼓励开发者使用此属性。hscroll=0dialog指定应用的页面内容是否禁止被鼠标选中，默认为禁用，即允许页面内容被鼠标选中。dialog=0rclick指定是否使用右键，默认为禁用。对于Flash应用，此项必须设置为禁用。rclick=0showWhenOK指定是否在未超时的情况下，忽略超时（由timeout设置）显示应用的页面，默认为允许。建议设置为允许，防止用户长时间等待页面出现。showWhenOK=1NewWindowInIE指定应用的新页面是否在IE浏览器中弹出，默认为禁用，对网银应用必须设置为允许。NewWindowInIE=0NaviEffect指定应用在页面切换时是否显示页面加载效果，默认为禁用。对于那些页面加载缓慢的应用使用此属性可以提示用户目前状态。NaviEffect=0SlideEffect指定应用在页面切换时是否显示从右向左的翻页效果，适用于小说、咨询浏览等场合，默认为禁用。SlideEffect=0redirect指定应用是否自己管理cookie和临时文件，默认为禁用。若应用需要通过cookie等保存客户端信息，建议设置为允许，将cookie等文件存储于当前应用目录下，防止被“垃圾清除”等工具删除。redirect=0resize是否允许用户改变应用窗口大小，0为不允许，1为允许，默认为不允许。resize=0注：可选项中，若允许，则其值为1，否则为0。除以上两个小节外，config.ini配置文件还包含以下配置节：3、高级功能*针对高级模式，以下API目前只有在用户从360安全桌面打开应用时可以使用。WebApp除通过config.ini配置文件配置应用属性外，还提供了许多接口供开发者调用。3.1、WebApp支持直接调用的接口开发者可以调用WebApp支持的一些接口方法（API），使得应用的用户体验更加丰富。这些API可以由HTML 页面中的JavaScript调用，开发者可根据实际需求调用这些API。 调用方法如下所示（以调用接口wappSizeWindow为例）： function ChangeSize(width, height) window.external.wappSizeWindow(width, height); /必须在调用接口前加上external，否则调用失败。 3.1.1、窗口操作接口 wappFullScreen该接口设定应用的窗口显示方式。接受一个bool类型的参数，true表示应用窗口全屏显示，false 表示以窗口形式显示。调用方法：window.external.wappFullScreen(flag); 使用场合：应用窗口框架已提供了全屏显示按钮，若开发者需添加自己的全屏显示按钮，或隐藏了窗口框架时，可调用该接口实现全屏与窗口显示间的切换。wappCloseWindow该接口可以关闭应用窗口，无参数。调用方法：window.external.wappCloseWindow(); 使用场合：同wappFullScreen接口。wappMiniWindow该接口使应用窗口最小化，无参数。调用方法：window.external.wappMiniWindow(); 使用场合：同wappFullScreen接口。wappSizeWindow该接口可以调整应用窗口的大小。接受两个参数，分别为应用框架窗口的宽度和高度。调用方法：window.external.wappSizeWindow(width, height); 使用场合：当应用允许用户调整窗口大小时，可调用该接口，如使用音乐播放器的迷你模式等。wappEnableResize该接口接受一个bool类型的参数，true 表示允许用户通过鼠标拖动改变应用窗口的大小，false表示不允许。调用方法：window.external.wappEnableResize(flag); 使用场合：当应用允许用户调整窗口大小时，可调用该接口，如视频播放器等。wappShowWindowFrame该接口决定了是否显示应用的窗口框架。接受一个bool类型的参数，true为显示窗口框架，false为隐藏窗口框架。调用方法：window.external.wappShowWindowFrame(flag)； 【注：没有框架的窗口是无法拖动的，但可通过wappCaptionMove接口实现窗口的拖动。】使用场合：当应用不需要WebApp提供的窗口框架时，可将其隐藏。wappCaptionMove该接口不需要传递参数，用于移动应用窗口。可以在这样的场景中调用：应用没有显示窗口框架，但是又想拖动它，那么可以在某个页面元素的onmousedown事件中调用该接口。调用方法： function onMouseDown() window.external.wappCaptionMove(); Hello World 应用场合：当应用窗口框架被隐藏时，可调用该接口拖动窗口。wappSetTopMost该接口接受一个bool类型的参数，当为true时，则应用窗口处于Windows窗口Z-order的顶端。调用方法：window.external.wappSetTopMost(flag); 应用场合：当应用需置顶时（即永远显示在屏幕窗口最前面）调用该接口，如音乐播放器显示歌词、视频播放器播放时置顶等。3.1.2、页面呈现 wappOnload在 HTML加载完成后调用它，通知应用窗口该页面已加载完毕。window.external.wappOnload(); 应用场合：适用于页面加载缓慢的场合，当主体页面加载完成后即可调用该接口通知Web应用页面已加载完毕并显示，此时后台继续加载其他页面。wappShowLoading当HTML页面切换的时候，调用该接口显示加载中的动画效果，接受一个bool类型的参数，若为true，即显示加载动画，false则隐藏。调用方法：window.external.wappShowLoading(flag); 应用场合：适用于加载缓慢的页面，可通过显示加载动画优化窗口显示效果。wappShowExplorer该接口接受一个string类型的参数，在浏览器中打开指定的URL。调用方法：window.external.wappShowExplorer(URL); 应用场合：当用户点击某一链接或按钮时，可调用该接口打开指定的HTML页面。3.1.3、附加功能接口 wappGetProperty / wappSetPropertywappGetProperty / wappSetProperty以键值对的形式永久存储一些信息，但是每条内容不超过200个字符。该信息存储于settings.ini文件中（调用wappSetProperty后自动生成，位于应用根目录）。wappGetProperty接受一个string类型的参数，即键名，如果有对应的值，则返回该值，否则返回undefined。调用方法：var value = window.external.wappGetProperty(key); if(value != undefined) / do something wappSetProperty接受两个string类型的参数，分别表示键和值，值的长度不超过200个字符。调用方法：window.external.wappSetProperty(key,value); 应用场合：通过wappGetProperty/wappSetProperty可永久性的存储应用的配置信息，当应用启动时，即可通过wappGetProperty接口获取配置信息。如音乐播放器等可记录用户上次听的歌曲列表等。wappDownloadFiles该接口从服务器端下载指定的文件到客户端电脑。接受三个参数，第一个参数string类型的URL；第二个参数是询问用户下载目录时，选择目录对话框文件过滤的扩展名（如doc、zip等），string类型；第三个参数是bool类型，若为true，则会直接下载文件到桌面上，false则会询问用户下载的目录。下载过程中无任何提示信息。调用方法：window.external.wappDownloadFiles(URL,filter,flag); 应用场合：用于如小说下载等应用。wappSetAsDesktop该接口将指定的图片设置为客户端电脑的桌面。接受两个参数，第一个是string类型的图片URL地址，第二个参数设置桌面的方式，目前只支持值为2。window.external.wappSetAsDesktop(URL,2); 应用场合：如美图秀秀等应用，可将用户指定的图片设置为桌面。3.2、开发者可实现的接口WebApp提供的以下接口属于回调函数，开发者只需实现该接口功能即可，无需调用，当相应的事件发生时，Web应用自动回调该函数，完成开发者指定的功能。onDnDFile接口参数列表：onDnDFile(fileName, x, y)当应用窗口有文件拖放的时候，如果应用的开发者实现了这个接口，就可以接收到被拖放的文件信息，以及事件发生的位置。允许接受文件拖放的应用可实现该接口。接口实现示例： function onDnDFile(fileName, x, y) var msg = 窗口有文件拖放。; msg += 文件名：; msg += fileName; msg += X:; msg += x; msg += Y:; msg += y; alert(msg); 如上示例，当应用窗口接收到文件拖放时，会显示下图所示对话框。onFullScreen接口参数列表：onFullScreen(flag)当应用全屏显示或退出全屏显示时，会触发该接口。如果开发者实现了这个接口，就可以获得全屏的消息。该接口有一个bool类型的参数，若为true，则表示此时应用全屏显示，若为false，则表示此时应用退出全屏显示。若需要在全屏与窗口显示切换时执行某些操作，可实现该接口。目前有两种情况会触发该事件。一是通过配置文件中的FullScreen=1字段，在应用标题栏显示“全屏”按钮，当用户点击该按钮时，会触发该接口。二是应用调用wappFullScreen(flag)接口时会触发该接口。接口实现示例： function onFullScreen(flag) if (flag = true) alert(您选择了全屏显示！); else alert(您退出了全屏显示！); 如上示例，当该接口被触发时会显示如下图所示对话框。3.3、对ActiveX控件的支持WebApp支持ActiveX控件，且ActiveX控件无需注册，即可被WebApp加载。要使用ActiveX控件，必须在config.ini配置文件【AppSetting】节中添加ax配置信息。假设应用中需要使用文件名为myactive.dll的ActiveX控件（同时支持其他后缀名的ActiveX控件，如.ocx等），则其配置如下：AppSetting ax=myactivex.dll myactivex.dll GUID=86FE6260-2604-4E30-B575-D5069722ADA5 ax=myactivex.dll字段中描述的ActiveX文件，要放到应用的根目录，即config.ini配置文件同级目录。对ax字段中指明的ActiveX文件，需单独建立一个以该文件名命名的节，节中包含该控件的GUID属性。GUID字段的值必须以大括号括起来。若应用中存在多个ActiveX文件，可以在ax项中用竖线“ | ”分割。假设存在a.dll和b.ocx两个ActiveX控件文件，则其config.ini配置示例如下：AppSetting ax=a.dll | b.ocx a.dll GUID=86FE6260-2604-4E30-B575-D5069722ADA5 b. ocx GUID=48FE2A69-4526-7B1A-C368-48D2A69B01E6 只要配置好这些，当应用启动的时候，就会加载ax项中列出的ActiveX控件了。