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

最新推荐文章于 2020-12-23 08:59:46 发布

置顶

Huangyong_csdn

最新推荐文章于 2020-12-23 08:59:46 发布

阅读量971

点赞数 1

CC 4.0 BY-SA版权

分类专栏：安卓开发笔记安卓进阶文章标签： ajax请求json ajax加载页面数据自定义微信分享页面 js获取URL参数 js调起app

本文链接：https://blog.youkuaiyun.com/huang_yong_/article/details/85532773

本文介绍了如何使用jQuery和Ajax在H5页面中实现从URL获取参数并动态加载数据，以解决分享到微信/QQ时的内容显示问题。文章详细讲解了前端关键知识点，包括获取URL参数、Ajax请求及解析、处理跨域问题，以及分享逻辑，如配置manifest.xml以调起App，并提供了关键代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近在做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'))

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

<body> 
  <img id="img" width="100%" src="" alt="">
  <h2 id="title"></h2>
  <p id="desc"></p>
<script>
	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r =