欢迎您访问我的笔记本站旨在于记录一些平时工作中遇到的一些问题和解决方法,方便查阅,部分内容来源于网络,如有侵权请联系我删除
  • 微信微信
您现在的位置是:首页 > PHP后端

微信公众号JSSDK的使用-[原创]

日期:2019-12-26 09:49:58 作者:tanyi 来源:我的笔记 浏览:1512 次
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包,可以让开发者在网页内调用微信APP自有的一些功能,如拍照,扫一扫等,这篇文章主要是记录一下整个使用过程。

框架使用的是tp6并集成EasyWeChat,EasyWeChat是一个开源的非官方的SDK,用于开发公众号和小程序非常方便,没有接触过的可以去看看,https://www.easywechat.com/docs,这是文档地址。

image.png

开发前请打开自己测试公众号界面并配置截图里面的相关信息,重点说明,JS接口是配置域名不是URL,不要带http前缀进去。下面开始进入主题。

从官方文档看jssdk使用大概分为这几步,当然有些步骤也就测试的时候用用,调顺了就一两步就可以了。

image.png

步骤一:绑定域名

这个第一张截图里面已经说明了。

步骤二:引入js文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)

也可下载下来放在本地也行,我是放在自己本地的

步骤三:通过config注入权限验证

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
});

这一步主要是利用这些参数生成签名来组成一个json数据包,然后拿去验证,签名算法官方文档已经写得很清楚,也许你会觉得签名过程比较麻烦,不用担心,我们用了easywechat,签名这些东西就很easy了,下面是easywechat文档截图

image.png

就这一步,返回的结果就是我们需要的json数据包,直接拿到we.config方法里面使用,这里我还是列下代码吧,后端生成json,传到前端页面使用。注意因为tp默认输出标签有过滤方法,所以我们要使用这个json数据的时候要使用php原生输出,如果使用tp的模板标签输出变量的话,json的双引号会被转为实体,无法使用。当然你也可以选择返回数组,然后自己在html页面去组装json数据包,这样就不用担心这个问题,我是直接返回的json数据。下面上代码。

后端代码:

//注册使用updateAppMessageShareData接口(自定义分享内容)
$config=$this->server->jssdk->buildConfig(['updateAppMessageShareData'],true);
return view('oauth_callback',['config'=>$config,]);

这里面的$this->server即easywechat文档里面的$app。这一步生成了我们需要的json数据包,下面就可以在前端html里面使用了。

   <script>
    var config={php}echo $config{/php};
    wx.config(config);
    wx.ready(function(){
       alert('yes');//步骤四通过ready接口处理成功验证
    });
    wx.error(function(res){
       alert('error');//步骤五通过error接口处理失败验证
    });
    </script>

可以看出步骤四和五是检查配置是否成功。正式上线使用这两个方法可以取消,调试的时候可以用用,以便于我们观察配置结果。下面是我前端全部代码。

<button id="cs">分享</button>
<script src="/static/jweixin-1.4.0.js"></script>
<script src="/static/jquery-3.2.1.min.js"></script>
<script>
    var config={php}echo $config{/php};
    wx.config(config);
    wx.ready(function(){
       alert('yes');
    });
    wx.error(function(res){
        alert('error');
    });
    $('#cs').click(function () {
        wx.updateAppMessageShareData({
            title: '测试分享标题', // 分享标题
            desc: '分享描述,测试', // 分享描述
            link: 'http://xxxx/index/index/demo', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://xxxxx/static/index/image/myhead/c89e74f28d4b3a135a791811f5f85089.jpg', // 分享图标
            success: function (re) {
                // 设置成功
            }
        })
    });
</script>

自定义分享内容这个结口正常是进入页面就执行,这里我为了测试手动点击按钮才去执行这个接口。

在调试工具里面打开html页面链接,提示yes说明我们配置没有问题了。

image.png

image.png

这时我们用手机在测试公众号里面打开这个页面点击右上角去分享到qq好友,可以看见分享内容是这样。

image.png

下面我们点击页面按钮执行一下自定义分享内容接口。

image.png

提示执行成功,说明我们现在可以使用自定义分享功能了,下面我们再次点击手机右上角然后分享给qq好友

image.png

可以看见分享内容即是我们在js接口里面自己定义的内容。其他接口参考微信官方文档调用即可。

原创文章转载时请注明原始出处,作者等相关信息

提交评论
评论列表