微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

最新推荐文章于 2024-06-25 03:20:55 发布

学习如逆水行舟

最新推荐文章于 2024-06-25 03:20:55 发布

阅读量2.9k

点赞数 1

分类专栏：跨平台 app 文章标签：微信开发 HTML 5 JSSDK 网页开发实战

本文链接：https://blog.csdn.net/kgsew/article/details/73252177

版权

本文介绍了如何使用微信JSSDK封装分享功能，通过创建index.html和shareApi.js实现网页分享到朋友圈。在JSSDK环境配置中调整参数，并在HTML5网页中添加相应代码。成功分享后，将显示相应的UI提示。

摘要由CSDN通过智能技术生成

对微信的JSSDK进行封装一下，创建一份类似的文件结构，增加index.html与shareApi.js文件，结构如图3.3所示。

图3.3 3.2节文件结构

另外，提醒读者一下，wxJSSDK.js文件的JSSDK环境配置中，需要更改一下配置参数，代码如下：

01	        jsApiList: [ // 其他代码略
02	            "onMenuShareTimeline",
03	            "onMenuShareAppMessage",
04	            "onMenuShareQQ",
05	            "onMenuShareWeibo"
06	        ] 		// 必填，需要使用的JS接口列表，所有JS接口列表见附录B

index.html文件增加如下代码(HTML5网页)：

01	<!DOCTYPE html>
02	<html lang="en">
03	<head>
04		<meta charset="UTF-8">
05		<title>第3章 3.2节 分享接口的作用</title>
06	    <!--依赖文件：jQuery-->
07	    <script src="./js/jquery-1.11.2.min.js"></script>
08	    <!--依赖文件：微信的JSSDK源文件-->
09	    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
10	    <!--依赖文件：coolie-->
11	    <script src="./js/cookie.js"></script>
12	    <!--JSSDK的环境-->
13	    <script src="./js/wxJSSDK.js"></script>
14	    <!--引入检测API的分享接口-->
15	    <script src="./shareApi.js"></script>
16	</head>
17	<body>
18	    <h1 style="font-size: 40px">:)</h1>
19	    <b style="font-size: 20px">分享接口的作用！</b>
20	</body>
21	</html>

shareApi.js增加分享API的测试封装方案代码：
01	/*声明：
02	        为了方便读者朋友，这里省略配置环境，直接写检测代码。
03	 */
04	
05	/*
06	 函数名称：wxJSSDK.shareApi
07	 函数功能：为wxJSSDK增加分享模块
08	 参数