• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

php对接Hybrid框架VasSonic教程

JAVA web前端中文站 2年前 (2017-08-10) 1639次浏览 已收录 0个评论

腾讯最近开源了一款高性能的Hybrid 框架VasSonic。目前网上还没有相关的使用教程,因此我便制作和整合了这部分内容,希望能对大家有所帮助。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

关于 VasSonic我就不在过多的介绍了,大家可以查看这篇文章的介绍。

php 对接 Hybrid 框架 VasSonic 教程

VasSonic在项目中的简称Sonic。他们的口号是:专注于提升 H5 首屏加载速度。

下面就开始我们今天的内容,如何用 php 实现Sonic,把Sonic作为前端。

下载并导入 sonic.php。

 require_once(PATH."/sonic.php");

然后添加以下代码。

 if (isset($_GET['sonic']) && $_GET['sonic'] == '1') { 
 // Check if Sonic is needed or not      
 util_sonic::start();     
 $this->_index_v5($uin);     
 util_sonic::end(); }

前端使用

下面是一个简单的演示,演示如何使用 Sonic 为前端。

 <html> <head>     
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">     
 <title>web 前端中文站 Sonic php 实例:www.lisa33xiaoq.net</title>     
 <script type="text/javascript">                          
 //通过 JavaScript 界面与移动客户端进行交互以获取 Sonic 差异数据。             
 function getDiffData(){                 
 window.sonic.getDiffData();             }            
 //步骤 3:处理来自移动客户端的响应,包括 Sonic 响应代码和差异数据。               
 function getDiffDataCallback(result){                 
 var sonicStatus = 0;                  
 /***声音状态:        * 0:无法从手机客户端获取任何数据。* 1:手机客户端首次使用 Sonic。 */                    
 /* 2:移动客户端重新加载整个网站。* 3:网站将通过本地刷新动态更新。
 /* 4:移动客户端的 Sonic 请求收到 304 响应代码,没有任何修改。      * /                  
 sonicUpdateData = {};                 
 var result = JSON.parse(result);                 
 if(result['code'] == 200){                     
 sonicStatus = 3;                     
 sonicUpdateData = JSON.parse(result['result']);} else if (result['code'] == 1000) {                     
 sonicStatus = 1;} else if (result['code'] == 2000) {                     
 sonicStatus = 2;} else if(result['code'] == 304) {                     
 sonicStatus = 4;}                 
 handleSonicDiffData(sonicStatus, sonicUpdateData);             }             
 //步骤 3:处理来自移动客户端的响应,包括 Sonic 响应代码和差异数据。              
 function handleSonicDiffData(sonicStatus, sonicUpdateData){                 
 if(sonicStatus == 3){                      
 //网站将被动态更新,并在本地刷新模式下运行一些 JavaScript。                     
 var html = '';                     
 var id = '';                     
 var elementObj = '';                     
 for(var key in sonicUpdateData){                         
 id = key.substring(1,key.length-1);                         
 html = sonicUpdateData[key];                         
 elementObj = document.getElementById(id+'Content');                         
 elementObj.innerHTML = html;                     }                 }             }     
 </script> </head> <body>     
 //步骤 1:通过插入不同的注释锚来指定模板和数据。     
 <div id="data1Content">         
 <!--sonicdiff-data1-->         
 <p id="partialRefresh"></p>         
 <!--sonicdiff-data1-end-->     </div>     
 <div id="data2Content">         
 <!--sonicdiff-data2-->         
 <p id="data2">here is the data</p>         
 <!--sonicdiff-data2-end-->         
 <p id="pageRefresh"></p>     
 </div>//www.lisa33xiaoq.net     
 <div id = "data3">data3</div>    
 //步骤 2:通过 Javascript 界面从移动客户端接收 diff 数据。     
 <script type="text/javascript">          
 window.function(){                 
 getDiffData();     }     
 </script> </body> </html>

从上面的代码中,我们可以看出,php 版本的使用 sonic 主要分 3 步。

步骤 1:通过插入不同的注释锚来指定模板和数据。数据将用锚包裹<!– sonicdiff-moduleName –> <!– sonicdiff-moduleName-end –>。html 的另一部分是模板。

 <div id="data1Content">  
 <!--sonicdiff-data1-->  
 <p id="partialRefresh"></p>  
 <!--sonicdiff-data1-end--> </div> 
 <div id="data2Content">  
 <!--sonicdiff-data2-->  
 <p id="data2">here is the data</p>  
 <!--sonicdiff-data2-end-->  
 <p id="pageRefresh"></p> </div> 
 <div id = "data3">data3</div>

步骤 2:通过 JavaScript 界面从移动客户端接收到不同的数据。当网站完成时,演示的 JavaScript 界面涉及。但是,当涉及到的时候并不是不可改变的,网站可以随时决定。

 <script type="text/javascript">      
 window.function(){             
 getDiffData(); } </script>

步骤 3:处理从移动客户端收到的不同状态。演示演示如何根据来自移动客户端的差异数据查找和替换指定锚点的数据,然后更新网站。

 //步骤 3 处理来自移动客户端的响应,包括 Sonic 响应代码和差异数据。   
 function getDiffDataCallback(result){} 
 //步骤 3 处理来自移动客户端的响应,包括 Sonic 响应代码和差异数据。   
 function handleSonicDiffData(sonicStatus,sonicUpdateData){}

以上就是 php 对接 Sonic 的教程。欢迎留言吐槽!

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:php 对接 Hybrid 框架 VasSonic 教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址