jQuery+Ajax实现自定义微信/QQ分享详情页

前言

最近在做app内分享功能，希望在分享点开后进入一个网页，显示影片标题、海报、简介，那么能不能在URL地址后拼接参数方式将数据传给页面呢，前端同学告诉我当然是可以的，于是有了方案一：在分享url后拼接这些数据，在H5页面用js获取到URL里的参数，经过一番折腾，我也在前端同学的帮助下实现了这个方案，开心了好一会儿，却很快发现这种方案有个弊端，当简介内容文本达到一定长度，在qq是分享失败的，URL会被截断，猜测是qq对传入的地址做了长度限制，虽然微信分享没问题，但是有分享不了的，肯定是不能接受的，另外我隐隐地也觉得这种方案不够优雅，想着有么有其他方案呢，URL只传内容id，让h5页面自己获取数据，根据对前端的了解，ajax可以实现页面内局部刷新数据而不需要重新加载页面，于是决定搞一波，二把刀的我踩了好多坑，终于有了方案二，我觉得比较完美的方式：jQurey+ajax在页面内请求数据并显示在页面上。

前端关键知识点：

• js获取URL中的参数
• js将数据加载到页面中(dom操作)
• ajax向服务器接口发送请求，获取所需数据
• ajax请求到的json数据提取出所需内容

• ajax跨域问题解决方案（重点）

分享逻辑关键点：

• 配置manifest.xml，给app设置scheme、host，使得分享页面可以通过js调起App
• APP将内容id拼接到分享url后，调起分享
• js调起app时判断app是否已安装，如果未安装自动跳到下载页面
• 如果app已安装，js通过sheme协议调起app，并传入内容ID，app根据内容ID请求数据，然后打开详情页，填充数据

一、前端知识点

1、2获取URL后的参数并显示到页面中：

关键代码：

//获取URL中未经过encode的参数，也就是未经过转化的明文数据
var id = decodeURI(getQueryString('id'))
//获取URL中经过encode的参数，将被转化为明文数据
var imgUrl = decodeURIComponent(getQueryString('img'))

完整代码参考示例（也就是方案一）：

3、4、5 ajax发送请求及解析

关键代码，这里是用了jQuery对ajax封装的请求方式，相比原生ajax简单好用，省去了很多操作。

//GET请求
function(){ 
		$.ajax({ 
		    type: "GET", 	
			url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php?number=" + $("#keyword").val(),
			dataType: "json",
			success: function(data) {
				if (data.success) {
					$("#searchResult").html(data.msg);
				} else {
					$("#searchResult").html("出现错误：" + data.msg);
				}  
			},
			error: function(jqXHR){     
			   alert("发生错误：" + jqXHR.status);  
			},     
		});
	}

//POST请求
function(){ 
		$.ajax({ 
		    type: "POST", 	
			url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php",
			data: {
				name: $("#staffName").val(), 
				number: $("#staffNumber").val(), 
				sex: $("#staffSex").val(), 
				job: $("#staffJob").val()
			},
			dataType: "json",
			success: function(data){
				if (data.success) { 
					$("#createResult").html(data.msg);
				} else {
					$("#createResult").html("出现错误：" + data.msg);
				}  
			},
			error: function(jqXHR){     
			   alert("发生错误：" + jqXHR.status);  
			},     
		}

代码具体含义就不一一解释了，随便搜索一下很多很全，这里重点说下跨域问题

关于什么是跨域,可以自行百度，网上介绍很多，这里只稍作介绍：js请求服务器接口，不同的域名被视为不同的域，不同的域之间的请求会被浏览器限制，控制台显示请求返回的 status为0，既不是200，也不是404，也没有返回数据：

举个栗子，拿我的分享页面：

我的分享页面是index.html，需要请求的服务器接口是 http://test.zmovie.cn/getData.php 接口文件位于腾讯云服务器里。

如果这个index.html文件放在GitHub.io域名下的，请求地址为 http://github.xxx.io/index.html
ajax请求地址为 完整的接口地址,url =" http://test.zmovie.cn/getData.php"，就会发现请求不到任何数据，返回status=0巴拉巴拉。这就是跨域造成的问题。

如果我把index.html文件放在服务器接口文件同目录下，访问方式为：http://test.zmovie.cn/index.html
对应的ajax的url可以这么写url = “getData.php”;这时再访问index.html就可以请求到数据，这是因为js请求的域和接口是同一个域。

那么跨域怎么解决？

方案有3个：

• 代理（不建议） 将所需数据委托给另一个html文件，这个文件放在接口同目录，间接实现同域请求，
  麻烦，不优雅。
• jsonp （非常不建议） 需要改造ajax请求代码，同时要改造服务器接口文件，不得不说，这是最不优雅的方式了，两面都的劳动。
• xhr2（推荐） 只需要在接口文件内添加三行声明代码，改动量很小，页面端无需改造ajax请求代码，这个才是优雅的方式，当然我就是采用了这种方式的，推荐。关键代码如下：

完整代码如下：

前端知识点完！

二、分享逻辑部分

这部分就简单带过了，网上介绍的很多，这里记录一下代码片和需要注意的事项：

• 微信分享需要在开放平台填写key，这个key是应用打包之后的指纹，可安装应用后通过别的工具app获取。
• 微信内是不支持直接调起app的，如果你的应用上架了应用宝，可以直接到对应页面，间接方式拉起，否则，还是乖乖提示用户浏览器打开分享页面吧
• 判断应用是否安装，方案很多，大同小异，js无法判断是否安装，只能是通过方法超时检查这种间接的方式。关键代码如下：

• app内获取传入的数据，关键代码如下：

Uri data = getIntent().getData();
if (data != null) {
   id = data.getQueryParameter("data");
}

• app清单文件配置：

			//-------关键代码开始--------
            
                
                

                

                
            
            //-------关键代码结束--------
            
                

                
            

结束！

欢迎下载体验案例app：极光影院

参考资料：
幕课网-ajax全接触