首页 PHP后端 微信公众号JSSDK的使用【原创】
微信公众号JSSDK的使用【原创】
作者 : tanyi 来源 : 我的笔记 浏览 : 507 次 时间 : 2019-12-26 09:49:58
简述
微信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接口里面自己定义的内容。其他接口参考微信官方文档调用即可。

上一篇: TP6多应用部署简单的个人总结--第一篇【原创】

下一篇: 一个生成二维码的PHP类库,可传logo【转载】
版权声明:原创文章,转载时请注明原始出处,作者等相关信息。
本文连接:https://ntbk8.cn/index/d-101.html
留言
上传图片
评论列表

110 篇

文章总数

66178 次

浏览总数

96 条

评论总数

昵称 Telkobe
职业 PHP开发
家乡 四川南充
住址 暂居成都
QQ 946188985
文章搜索
热门文章
最新文章
新闻头条

1 最深水位及腰,三亚一村庄内涝 被困群众被成功转移

2 最具影响力!海淀融媒又双叒叕上榜啦!

3 厨房煤气泄漏,用打火机测试?这个口诀要记牢

4 济南诚基中心四期迎来改造,曾经无奈的居民“看到希望”

5 杨笠工作室声明:杨笠只是受邀参加某时尚媒体活动,与奔驰无任何商业合作

6 本想在网络找个兼职,结果被骗近八万

7 语文最需要共情,他把课讲到学生心坎上

8 80后女教师扎根乡村10年 逛街看电影成了“奢侈品”

9 上天入地、飞檐走壁……消防“蜘蛛侠”大片来袭!

10 奥运冠军乐靖宜、罗雪娟、焦刘洋沪上同框,她们要复出了?

11 这座县域隶属扬州,处于江苏中部地理位置优越,为何说发展不好?

12 瓦后Wahou属于什么档次?是奢侈品吗?

13 新洲最美教师24年如一日扎根乡村教育,走教一年多来奔波数百公里

14 网红直播喝农药身亡,这些“帮凶”该当何罪?

15 最新!牵动全网人心的这位杭州刑警又有好消息

16 德州一拉面馆搬迁,老板贷款退会员储值金!本人回应:已退15万元,退款还在继续

17 四旬男子不满父亲喊他吃饭,竟持刀将其砍伤,涉故意杀人罪被起诉

18 挥拍魔都, 2021 澳网中国业余挑战赛上海站精彩收官!

19 “液态——2021上海当代艺术展”展出,看艺术家如何诠释“液态”?

20 秀出未来可期的艺术新面貌,2021上海青年艺术博览会下月启幕

21 上海江南民歌大赛颁奖展演在青浦朱家角古镇举行

22 不颁一分钱的“上海好童书”颁出 张文宏主编《病菌简史》获特别奖

23 粤剧《白蛇传·情》昨晚在宛平剧院开演

24 福州一在建摩天轮垮塌

25 中国书坛新人新作展览在新洲面试考核

26 海南省少儿民歌文化季圆满落幕 小小“红心”唱响椰城

27 突发!福州一在建摩天轮疑似意外倒塌

28 老常“还钱”记

29 【践行重要训词精神】十元打底“炸金花”,11人聚众赌博被罚

30 天天315丨这两批次的被子抽检不合格 抵抗外力能力较差易破裂

历史上的今天

1 在113年前的今天,1908年10月19日 (农历九月廿五),日本政府封禁《民报》。

2 在101年前的今天,1920年10月19日 (农历九月初八),苏联英雄约翰·里德英年早逝。

3 在89年前的今天,1932年10月19日 (农历九月二十),右江根据地创建人之一韦拔群被暗害。

4 在86年前的今天,1935年10月19日 (农历九月廿二),中共中央和红一方面军到达陕北。

5 在85年前的今天,1936年10月19日 (农历九月初五),鲁迅在上海病逝。

6 在84年前的今天,1937年10月19日 (农历九月十六),英国物理学家卢瑟福逝世。

7 在78年前的今天,1943年10月19日 (农历九月廿一),《解放日报》发表《在延安文艺座谈会上的讲话》。

8 1949年10月19日 (农历八月廿八),中央人民政府组成。

9 1950年10月19日 (农历九月初九),抗美援朝,志愿军跨过鸭绿江赴朝鲜前线。

10 1956年10月19日 (农历九月十六),波兰政治家哥穆尔卡复出。

11 1965年10月19日 (农历九月廿五),中国尼泊尔正式直接通邮。

12 1978年10月19日 (农历九月十八),卡尔波夫击败克切诺依蝉联世界象棋冠军。

13 1986年10月19日 (农历九月十六),莫桑比克总统座机坠毁 萨莫拉不幸身亡。

14 1987年10月19日 (农历八月廿七),黑色星期一世界股市狂跌。

15 1989年10月19日 (农历九月二十),苏联最新式的航空母舰下水。

16 1995年10月19日 (农历闰八月廿五),北约秘书长克拉斯辞职。

17 1995年10月19日 (农历闰八月廿五),卢泰愚丑闻震惊韩国。

18 1996年10月19日 (农历九月初八),我国第一艘热气飞艇首飞成功。

19 1998年10月19日 (农历八月廿九),格鲁吉亚军人哗变。

20 1998年10月19日 (农历八月廿九),人类首次徒步穿越世界最大峡谷。

21 1998年10月19日 (农历八月廿九),微软公司迎战美国政府。

22 2001年10月19日 (农历九月初三),著名指挥家李德伦逝世。

23 2001年10月19日 (农历九月初三),江泽民与布什首次会晤。

24 2007年10月19日 (农历九月初九),欧盟通过《里斯本条约》 制宪危机有所化解。

25 2007年10月19日 (农历九月初九),全球气候变化举世关注 “巴厘岛路线图”艰难出台。

26 2007年10月19日 (农历九月初九),东盟签署《东盟宪章》 一体化进程加速推进。

27 2007年10月19日 (农历九月初九),多种因素交互作用 国际油价持续高位震荡。

28 2007年10月19日 (农历九月初九),中东和会在美举行 巴以和平进程艰难重启。

29 2010年10月19日 (农历九月十二),“国际制造创新节”首设“蔡伦奖”。

百度统计 站长统计

©2018-2021 www.ntbk8.cn. All rights reserved.  蜀ICP备18006425号

友情链接:  若岚博客  vipbic  快云vps  聚宝盆  飞之梦工作室  7分钟课堂  提交友链