前言:
这次介绍的内容，主要是分享网页。把自己站点的页面分享到微信里面以卡片形式展现，有标题，摘要，缩略图。而不是单纯的分享链接。让你分享给别人时，显得比较高级也比较专业。还有就是，在这个不安全的互联网世界。以链接形式分享，一般的人都不会去点击。所以开发微信分享也成了宣传站点的基本功。
目录：
- 开发前的准备
- 在页面中开发
- 调试接口
一：开发前的准备
首先你必须有一个微信公众号，服务号、订阅号皆可。进入公众号后台，开启开发者模式。
通过左侧菜单找到公众号设置
公众号设置
然后设置js安全域名，这里填写你项目的域名就可以了
安全域名
设置好了之后，就可以去下载微信官方的JS-SDK里面包含了各种语言的demo和sdk。
最后点开微信公众号的后台左侧的开发中的基本设置，可以获取AppID和AppSecret
基本设置
二: 在页面中开发
- 首先在要分享的html页面中引入分享所需的js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
- 获取签名
//引入sdk。不同框架引入略有不同，总是是引入第三方库类
import('JYmusic.JSSDK');;
$jssdk = new \JSSDK("你的AppID", "你的AppSecret");
//调用获取签名方法
$signPackage = $jssdk->GetSignPackage();
//将签名变量传递到模板
$this->assign('signPackage',$signPackage);
//渲染页面
$this->display();
- 页面中配置微信
在JavaScript中配置微信
<!--首先引入js文件，固定写法-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="javascript">
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '<{$signPackage.appId}>', // 必填，公众号的唯一标识
timestamp:'<{$signPackage.timestamp}>' , // 必填，生成签名的时间戳
nonceStr: '<{$signPackage.nonceStr}>', // 必填，生成签名的随机串
signature: '<{$signPackage.signature}>',// 必填，签名，见附录1
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
"onMenuShareTimeline", //分享给好友
"onMenuShareAppMessage", //分享到朋友圈
"onMenuShareQQ", //分享到QQ
"onMenuShareWeibo" //分享到微博
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
</script>
appId, timstamp,nonceStr 都是签名变量里包含了的 直接打印出来就可以了。重点是看看jsApiList
字面上理解就是接口列表。这里需要传入一个数组，这个数组里包含了你需要使用的接口名称。接口有非常的多详情请见微信开发文档#附录2-所有JS接口列表
4.在页面加载时，调用接口
紧接着wx.config方法之后就是微信接口的调用方法
config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
这里的例子主要时分享接口，分享接口一般是把接口的调用放在ready执行。
wx.ready(function () {
//配置好需要分享的几个配置，这里只是演示，实际开发中应该是动态的变量
var shareData = {
title: '测试标题',
desc: "测试简介",
link: window.location.href,
imgUrl:"你的站点域名 __STATIC__/images/dianji.png"//传递给微信需传递完整的带url链接
};
//调用各个接口并传入配置变量
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
wx.onMenuShareQQ(shareData);
wx.onMenuShareWeibo(shareData);
});
注意，调用的接口，必须是在config方法中传入的jsApiList数组中声明了的。如果要调用别的接口，请在config的jsApiList事先添加。否者会调用失败。
三：调试接口
现在我们打开微信开发者工具（没有的赶紧下载）
准备调试
当页面进入的时候会有相关的调试信息在控制台
控制台信息
config:ok 代表config数据注入成功
wx.config获取到的jssdk权限如下 下方的表格就是获取到的接口的权限列表
我们在些权限列表的时候写了四个接口，这里表格中有4个接口的名字。这就代表我们拿到了所有我们申请的接口的权限
当我们点右上角，然后分享给朋友
image.png
在询问是否发送的时候，控制台会输出这条分享需要的一些参数，比如标题，介绍，图片等等。
image.png
当我们点了发送之后，控制台会打印发送状态
image.png
当我们点击取消也会打印状态，我就不演示了。
分享到朋友圈也是大同小异。没什么区别。
最终分享的结果在手机上
最终分享效果
另外忘了说，微信分享这个接口是必须具备微信的开发者资质才有权限调用，也就是要交300保护费。大家可以使用微信的测试账号测试。
其实今天只是介绍了微信jssdk的很小一部分应用，微信的开发者还是非常的牛逼的。里面其实有很多的细节。今天就没有展开的介绍。大家有兴趣多研究研究文档，多熟悉开发者工具肯定会有很多的收获。
如果有那些说的不对的地方，希望大神能指正，大家共同学习。
以上
网友评论