资讯专栏INFORMATION COLUMN

微信公众平台JSSDK分享接口开发(PHP实现)

MonoLog / 2174人阅读

摘要:最近做个移动端的应用,要实现自定义微信分享功能,实现过程中遇到一些小小的坑,这里分享一下。后来微信放出了,开始对端提供丰富强大的官方接口支持,也逐渐淡出了开发者的视野。

最近做个移动端的H5应用,要实现自定义微信分享功能,实现过程中遇到一些小小的坑,这里分享一下。

以前微信官方是没有正式支持微信分享的自定义接口(包括图片、标题、描述)的,然而有一些大神找到了WeixinJSBridge这个强大的“对象”,一个方法调用就轻而易举地实现了分享功能。

后来微信放出了JSSDK,开始对H5端提供丰富、强大的官方接口支持,WeixinJSBridge也逐渐淡出了开发者的视野。

然而这个JSSDK的调用方法,实现起来却并不是太容易。难点不在于技术上,而是业务流程上。虽然是一个前端的接口,但是为了安全性,微信要求开发者进行服务端的验证,而这个验证竟然还要分两步来进行……如此一来,对于仅仅是想要实现一个“分享到朋友圈”功能的人来说,真是有点叫人吐血。

事实上呢,这个后端的两步验证,对于熟悉微信开发流程的人来说,也是很合理的。因为第一步,获取“AccessToken”,是所有微信业务的起点;而第二步,获取JSApi的签名,才是使用JSSDK对应的需求。如果说项目上本来就针对微信进行了一些开发,这点需求应该是可以很快解决了。

好了,废话到此结束,下面说后端接口具体实现步骤。接口的实现是基于PHP语言的,PHP的语法简单明了,相信各位不熟悉这门语言的同学应该能够理解;代码已经托管在OSChina上开源共享,可以下载使用;链接见文章末尾。

第一步,官方文档是一定要细读的。然后你的微信公众号已经通过认证,这点是不用提醒的吧?

第二步,绑定安全域名。公众号后台左菜单 -> 设置 -> 公众号设置 -> 功能设置 -> JS接口安全域名。注意这里填写顶级域名的话,对其所有子域名都是有效的。所以为了有效利用三个名额,最好直接填写顶级域名。

第三步,写代码了。这里虚拟了一个项目,包括前端和服务端的实现。

代码:http://git.oschina.net/w2ex/snipets/tree/master/weixinapi
演示:http://snipets.willizm.cn/weixinapi/webapp/

项目目录结构:

/
/data     数据目录,用来存放微信端获取到的AccessToken和Ticket数据
/lib      
/lib/Weixin.class.php 微信接口类库
/webapp   前端示例
/webapp/index.html
/webapp/main.js
/api.php  服务端接口示例,这里演示了对jsonp的支持
/config.php  配置文件,包括appId、appSecret、数据目录,顺带支持SAE环境
/callback.php   微信回调接口,代码直接拷贝微信文档中的Demo

重点在于Weixin.class.php中三个方法的实现:getAccessToken、getTicket、createSignature。这三个方法各自有一些注意事项,前面两个都要求用户在服务端缓存微信接口返回的数据,因此在每次调用时都要检查一下是否已经过期;第三个方法则有两点容易犯低级错误:其一,前端传过来的url是不需要hash部分(就是#及其后面的一段)的,这个前端需要注意;其二,服务端签名算法中拼接字符串时nonceStr是全部小写的,应写成noncestr,再就是要注意拼接的顺序不能错。

前端部分,除了上面说的传递url时需要去掉hash外,还需注意,业务逻辑应尽可能wx.ready中调用,以避免网络延迟带来的问题。开发调试时记得开启调试选项,这样就可以根据弹出的错误码来对照文档排查问题。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86205.html

相关文章

  • 微信公众平台JSSDK分享接口开发PHP实现

    摘要:最近做个移动端的应用,要实现自定义微信分享功能,实现过程中遇到一些小小的坑,这里分享一下。后来微信放出了,开始对端提供丰富强大的官方接口支持,也逐渐淡出了开发者的视野。 最近做个移动端的H5应用,要实现自定义微信分享功能,实现过程中遇到一些小小的坑,这里分享一下。 以前微信官方是没有正式支持微信分享的自定义接口(包括图片、标题、描述)的,然而有一些大神找到了WeixinJSBridge...

    banana_pi 评论0 收藏0
  • thinkphp3.2,微信JS-SDK开发过程中遇到的各种问题与细节分享

    摘要:备注登录后可在开发者中心查看对应的接口权限。下载官网提供的示例代码,参照中的代码一步一步来实现。否则分享后的页面会签名失败返回的与分享的是否一致 首先完成官方文档前两步(很好理解就不具体说了):步骤一:绑定域名先登录微信公众平台进入公众号设置的功能设置里填写JS接口安全域名。备注:登录后可在开发者中心查看对应的接口权限。步骤二:引入JS文件在需要调用JS接口的页面引入如下JS文件,(支...

    miya 评论0 收藏0
  • 微信公众平台网页开发实战--2.从手机相册中选照片然后分享

    摘要:通过对需求的了解,可以将其分解为微信端手机用户,可以使用微信的。图分享到朋友圈编辑的图成功分享自定义图片到朋友圈微信公众平台网页开发实战混合开发解密欢迎一起交流本书 通过对需求的了解,可以将其分解为:(1)微信端手机用户,可以使用微信的JSSDK。(2)选取图片,使用JSSDK的chooseImage,由于分享图片时本地地址无法分享,因此还需要JSSDK的uploadImage。(3)...

    hlcfan 评论0 收藏0
  • 微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

    摘要:点击右上角的分享到朋友圈按钮,会看到如图所示的。图测试用例分享界面图分享到朋友圈图分享到朋友圈成功提示微信公众平台网页开发实战混合开发解密欢迎一起交流本书 对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示。showImg(https://segmentfault.com/img/bVPdlg?w=145&h...

    wums 评论0 收藏0
  • 微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

    摘要:点击右上角的分享到朋友圈按钮,会看到如图所示的。图测试用例分享界面图分享到朋友圈图分享到朋友圈成功提示微信公众平台网页开发实战混合开发解密欢迎一起交流本书 对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示。showImg(https://segmentfault.com/img/bVPdlg?w=145&h...

    韩冰 评论0 收藏0

发表评论

0条评论

MonoLog

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<