微信jssdk

最近遇到了一个微信分享的问题,一个客户的网站他要求要做一个微信分享功能。码农嘛肯定先在网上找插件,像jiathis,百度分享,mob这类的插件一大堆简单易用,分享到时分享出去了但是有一个问题就是不能自定义缩略图和摘要,上网一查要分享到微信需要微信jssdk授权。

这里要求一下继承环境要配好。

首先打开微信开发者文档搜索jssdk

还有微信的一些合法网站设置之类的就自己去看文档吧

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432

又发现一个坑爹的地方,微信真的坑,公众号里面要设置ip白名单不然获取不到access-token

拉到最下面的附录6有一个官方的demo点击下载(嫌麻烦这里也行http://demo.open.weixin.qq.com/jssdk/sample.zip

里面有4中版本,了解过一点php就选php

php文件夹里面有4个文件access_token.php和jsapi_ticket.php使用来存放access_token和jsapi_ticket(不用管它)

jssdk.php是授权的后台代码;然后让我感觉痛苦的是这个sample.php明明是html却硬搞成php这样就不能直接用了需要改代码


打开sample.php文件最上面是这个,先将你的appid和secret填上然后把$jssdkhe $signPackage这两段复制到jssdk.php文件代码的最下面如下图,其他的删除掉

这里的思路是这样的把sample.php这个文件改成html这样比较好套到网站上去

sample.php文件下的这些php代码就要用ajax请求来完成,

改动如下

<script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    $.get('jssdk.php',function (res) {
        wx.config({
            debug: true,
            appId: res.appId,
            timestamp: res.timestamp,
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ]
        });
        wx.ready(function () {
            wx.onMenuShareTimeline({
                title: '1', // 分享标题
                link: 'www.baidu.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '', // 分享图标
                success: function () {
                    // 用户点击了分享后执行的回调函数
                }
            })
        });
    },'json');

</script>

上面的jq记得引入这里是通过jq中的$.get()方法请求的(在这里被坑了好长时间本来想用$.ajax的一直报$未定义索性换成$.get)请求里面记得写上json格式(返回参数的时候赋值被坑了一把),还有wx.ready这个方法也要一起写在$.get的回调函数里面不然不会执行。然后把sample.php文件改成sample.html。好了到这里sample.php文件搞完了。

接下来是jssdk.php。把76行和55行的代码改成下面的形式

$access_token = $res['access_token'];
$ticket = $res['ticket'];

莫名的报错换种方式写。

然后是下面的94.95.96这三行去掉(也是报错的问题)

到这里就差不多了拉到代码最下面将要传递的数据转换成json字符串的形式引入下面这句

echo json_encode($signPackage);

下面来测试一下吧。

网页打开localhost我的是默认的80端口所以不用加端口

按f12可以看到

这个只是测试还没应用到网站上面(网站的框架是.net),中间碰到很多只是点,这次的问题对我来说收获很大,可能是我水平不够吧。



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值