;

达人】提问: 怎样导出案例的html包?

求详细的操作方法。


2 个回答

问答宝宝

常见问题的补充说明:


关于在本地运行导出包


案例导出包中,包含一个index.html文件,一个资源包,以及一个js文件。导出包,可以直接部署在服务器环境中来运行。


由于导出包中使用到了网页服务接口,所以直接双击index.html是无法打开H5的。如需在本地运行,需要部署local host服务器环境。


关于二次开发

在iH5中,所有的DOM对象都是通过js来动态生成的,而不是通过静态的写在index.html中, 所以如果需要在案例导出之后,在导出包上进行二次开发,需要去修改导出包中的js文件。由于这个js文件经过压缩处理,直接修改的难度非常大,所以建议不要直接在导出包的基础上进行代码开发。


如需对iH5的案例进行二次开发,可以在案例中使用自定义js函数,自定义函数除了可以引入外部的任何逻辑,也可以通过id  (以 ids.XXX的方法来调用)来控制案例中添加的任何对象。


如果需要使用代码来创建html,可以通过容器对象(container)的createDomElement的方法。 详见开发者文档


关于调用外部数据


如果需要导出之后,和外部的数据进行交互,可以现在案例中使用api工具完成外部数据交互的逻辑,主要包括:


1、请求外部数据 (比如图片语音识别,验证码,验证token等)

2、发送H5案例中产生的数据至外部平台 (用户在表单中提交的数据,本地存储的token,用户的交互行为等)


可在本问答平台上搜索“api”来获取api工具的几种基本的使用场景配置方法。


配置好api后,再进行案例导出,部署完成之后即可实现与外部的数据交互。


配置微信分享接口


由于微信的access_token请求以及签名生成等服务,都需要在服务器端进行,所以如果案例导出后,部署至自己的服务器,需要首先根据微信的网页开发文档来部署服务器端的服务。


微信分享接口的配置请见微信的文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115



部署完成之后,可在iH5案例导出包中的index.html中嵌入一段JS代码来通过config接口注入微信的权限验证配置信息,然后再根据微信的配置文档在index文件中插入额外的代码来设置案例的转发分享截图和描述。


微信授权调用

如果需要在案例中调用微信授权,并将用户的昵称或头像,在案例中进行显示,(在iH5案例中,使用微信对象来实现的相关功能),则需要进行专门的对接,因为iH5案例中的调用微信的接口的动作是整合在案例代码中的,如果需要从外部获取微信授权相关信息,然后再注入H5案例,如果不进行专门的技术对接是无法实现的。


如果不是绝对必须,不建议在导出的案例中使用微信授权登录的服务,而是在iH5工具中实现所有的案例效果,并通过配置自定义的微信授权接口,以及自定义域名,来实现品牌定制的需求。



ih5

iH5 3.0导出HTML包的说明

    只有使用iH5新版工具编辑的作品才可以导出HTML代码包。如果你的作品需要

导出HTML包并部署到你指定的服务器上,则可以购买服务。操作如图)

 2017-06-08_154108.jpg1496907818(1).png



   导出包为压缩文件5581c499c1ba843cd528957a219d1ea.png。导出HTML包后,请先部署至服务器环境,然后访

问相应目录下ihdex.html文件即可播放案例。直接在PC中打开index.html文件是

无法预览的。


blob.png

导出包样例下载地址: https://pan.baidu.com/s/1nu71NiL 密码: 43kd


样例播放地址:http://file.ih5.cn/learning/cel/%E6%A0%B7%E4%BE%8B%E5%AF%BC%E5%87%BA%E5%8C%85/index.html

 

    导出的HTML包并非全部为源代码,不适合在导出的基础上做二次开发。如需

二次开发,建议直接用iH5新版工具的自定义函数。如图:

blob.png

开发者文档地址:http://doc.ih5.cn/docs/%E5%BC%80%E5%8F%91%E8%80%85%E6%96%87%E6%A1%A3/%E5%A6%82%E4%BD%95%E5%B5%8C%E5%85%A5%E4%BB%A3%E7%A0%81/%E5%B5%8C%E5%85%A5%E4%BB%A3%E7%A0%81%E7%9A%84%E6%96%B9%E6%B3%95/


学习地图