微信分享链接,JS-SDK应用

前言:

这次介绍的内容,主要是分享网页。把自己站点的页面分享到微信里面以卡片形式展现,有标题,摘要,缩略图。而不是单纯的分享链接。让你分享给别人时,显得比较高级也比较专业。还有就是,在这个不安全的互联网世界。以链接形式分享,一般的人都不会去点击。所以开发微信分享也成了宣传站点的基本功。

目录:

  1. 开发前的准备
  2. 在页面中开发
  3. 调试接口
一:开发前的准备

首先你必须有一个微信公众号,服务号、订阅号皆可。进入公众号后台,开启开发者模式。
通过左侧菜单找到公众号设置

微信分享链接,JS-SDK应用_第1张图片
公众号设置

然后设置js安全域名,这里填写你项目的域名就可以了
微信分享链接,JS-SDK应用_第2张图片
安全域名

设置好了之后,就可以去下载微信官方的JS-SDK里面包含了各种语言的demo和sdk。

最后点开微信公众号的后台左侧的开发中的基本设置,可以获取AppID和AppSecret


微信分享链接,JS-SDK应用_第3张图片
基本设置
二: 在页面中开发
  1. 首先在要分享的html页面中引入分享所需的js文件

  1. 获取签名
        //引入sdk。不同框架引入略有不同,总是是引入第三方库类
        import('JYmusic.JSSDK');;
        $jssdk = new \JSSDK("你的AppID", "你的AppSecret");
        //调用获取签名方法
        $signPackage = $jssdk->GetSignPackage();
        //将签名变量传递到模板
        $this->assign('signPackage',$signPackage);
        //渲染页面
        $this->display();
  1. 页面中配置微信
    在JavaScript中配置微信



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事先添加。否者会调用失败。

三:调试接口

现在我们打开微信开发者工具(没有的赶紧下载)


微信分享链接,JS-SDK应用_第4张图片
准备调试

当页面进入的时候会有相关的调试信息在控制台


微信分享链接,JS-SDK应用_第5张图片
控制台信息

config:ok 代表config数据注入成功
wx.config获取到的jssdk权限如下 下方的表格就是获取到的接口的权限列表
我们在些权限列表的时候写了四个接口,这里表格中有4个接口的名字。这就代表我们拿到了所有我们申请的接口的权限

当我们点右上角,然后分享给朋友


微信分享链接,JS-SDK应用_第6张图片
image.png

在询问是否发送的时候,控制台会输出这条分享需要的一些参数,比如标题,介绍,图片等等。


微信分享链接,JS-SDK应用_第7张图片
image.png

当我们点了发送之后,控制台会打印发送状态


image.png

当我们点击取消也会打印状态,我就不演示了。
分享到朋友圈也是大同小异。没什么区别。

最终分享的结果在手机上


微信分享链接,JS-SDK应用_第8张图片
最终分享效果

另外忘了说,微信分享这个接口是必须具备微信的开发者资质才有权限调用,也就是要交300保护费。大家可以使用微信的测试账号测试。

其实今天只是介绍了微信jssdk的很小一部分应用,微信的开发者还是非常的牛逼的。里面其实有很多的细节。今天就没有展开的介绍。大家有兴趣多研究研究文档,多熟悉开发者工具肯定会有很多的收获。
如果有那些说的不对的地方,希望大神能指正,大家共同学习。

以上

你可能感兴趣的:(微信分享链接,JS-SDK应用)