首页 PHP后端 微信公众号JSSDK的使用【原创】
微信公众号JSSDK的使用【原创】
作者 : tanyi 来源 : 我的笔记 浏览 : 246 次 时间 : 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/d-101.html
留言
上传图片
评论列表

91 篇

文章总数

36190 次

浏览总数

92 条

评论总数

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

1 通了!栖霞救援4号钻孔成功透巷,新的生命联络通道建立!

2 山东栖霞市笏山金矿事故救援最新进展:5中段一名伤势危重矿工已无生命迹象

3 复旦大学附属肿瘤医院发现一人核酸检测结果可疑

4 腊八节送祝福,敬老院里送温暖

5 【年·记忆】在山城永寿过年

6 【年·记忆】淘粮食碨过年面

7 肇庆申办中国足球职业联赛 接受中国足协考察团检验

8 八旬老人险些坠楼 江阴两位热心市民一个托举、一个牵拉

9 喜马拉雅年度优秀开发者评选结果出炉,这些品牌上榜

10 速破涉疫造谣案 “一拖二”被处罚

11 酒后驾车途中被查 瘫倒在地尿湿裤子

12 男子偷别人的外卖吃 真的是为生活所迫?

13 腊八粥暖心,乌铁青年团员为坚守岗位干部职工和旅客送温暖

14 消防员背70多斤设备险坠楼 获救后他这么说...

15 中山市多个智造公共服务平台预计春节前后迎来施工安装小高峰

16 携程联合人民网发起安心过年公益计划

17 新疆博尔塔拉州精河县发生3.0级地震,震源深度17千米

18 女子腹痛难忍 竟是被一根5厘米长鱼骨穿肠了!

19 杭州野生动物世界为动物特制“腊八大餐”

20 真正的富有,是你脸上的微笑

21 孙悟空也玩穿越 《西游记》的“同人文”有多奇幻?

22 8岁小男孩警务室报警:有个3岁小孩跟家人走散了

23 睡前聊一会儿 | 一个差评都没有的店,你会去吗?

24 弟弟酒驾让哥哥“背锅”交警根据签名还原事实

25 关于年终奖,这份调查报告有你感兴趣的内容……

26 大寒之后再坚持一周进入五九 气温日渐回暖

27 时隔19年 大寒与腊八再度喜相逢

28 辞旧迎新从“头”开始 年关临近青岛美发店生意红火

29 骗子盯上“假期档”厦门警方提醒防范三类寒假骗术

30 男子轻信“刷单致富” 成为洗钱帮凶

历史上的今天

1 在745年前的今天,1276年1月21日 (农历正月初四),英诺森五世任第185任教皇。

2 在228年前的今天,1793年1月21日 (农历腊月初十),法王路易十六被送上断头台。

3 在151年前的今天,1870年1月21日 (农历腊月二十),俄国杰出的哲学家、思想家、作家赫尔岑逝世。

4 在144年前的今天,1877年1月21日 (农历腊月初八),中国近代第一位驻外使节郭嵩焘赴英。

5 在136年前的今天,1885年1月21日 (农历腊月初六),日本战犯、陆军大将板垣征四郎出生。

6 在134年前的今天,1887年1月21日 (农历腊月廿八),美籍德国心理学家、格式塔心理学的创始人之一克勒出生。

7 在129年前的今天,1892年1月21日 (农历腊月廿二),英国著名天文学家亚当斯逝世。

8 在126年前的今天,1895年1月21日 (农历腊月廿六),日本决定占领钓鱼岛。

9 在122年前的今天,1899年1月21日 (农历腊月初十),欧宝公司开始生产汽车。

10 在121年前的今天,1900年1月21日 (农历腊月廿一),加拿大军队启程前往南非参加布尔战争。

11 在110年前的今天,1911年1月21日 (农历腊月廿一),美国劳斯首次提出癌肿瘤是病毒所致。

12 在102年前的今天,1919年1月21日 (农历腊月二十),李熙朝鲜高宗逝世。

13 在97年前的今天,1924年1月21日 (农历腊月十六),列宁逝世。

14 在95年前的今天,1926年1月21日 (农历腊月初八),意大利著名神经学家、病理学家戈尔吉逝世。

15 在91年前的今天,1930年1月21日 (农历腊月廿二),伦敦海军会议开幕。

16 在87年前的今天,1934年1月21日 (农历腊月初七),中华苏维埃第二次全国代表大会召开。

17 在85年前的今天,1936年1月21日 (农历腊月廿七),“爱江山还是爱美人”——英王爱德华八世的痛苦选择。

18 在84年前的今天,1937年1月21日 (农历腊月初九),红军西路军西征失败,董振堂牺牲。

19 在84年前的今天,1937年1月21日 (农历腊月初九),抗日红军大学易名抗日军政大学。

20 在83年前的今天,1938年1月21日 (农历腊月二十),中国电影制片厂成立,总部设在昆明。

21 在75年前的今天,1946年1月21日 (农历腊月十九),国民党政府将汪精卫坟墓炸毁。

22 在74年前的今天,1947年1月21日 (农历腊月三十),欧洲经历1883年以来最寒冷的冬天。

23 在74年前的今天,1947年1月21日 (农历腊月三十),乔治·马歇尔被任命为美国国务卿。

24 在73年前的今天,1948年1月21日 (农历腊月十一),台湾企业家,英业达集团副董事长温世仁出生。

25 1949年1月21日 (农历腊月廿三),蒋介石宣布“引退”,李宗仁任代理总统。

26 1950年1月21日 (农历腊月初四),英国作家乔治·奥韦尔去世。

27 1951年1月21日 (农历腊月十四),中国人民志愿军空军在朝鲜战场上首次参加实战。

28 1951年1月21日 (农历腊月十四),阿尔卑斯山发生巨大雪崩。

29 1953年1月21日 (农历腊月初七),微软创始人之一 保罗·艾伦出生。

30 1954年1月21日 (农历腊月十七),世界上第一艘核动力潜艇“鹦鹉螺”号下水。

31 1955年1月21日 (农历腊月廿八),中国评剧院成立。

32 1958年1月21日 (农历腊月初二),委内瑞拉人民起义爆发。

33 1960年1月21日 (农历腊月廿三),人类第一次将动物送入太空。

34 1960年1月21日 (农历腊月廿三),日本漫画家永野护出生。

35 1963年1月21日 (农历腊月廿六),非洲裔美国篮球运动员奥拉朱旺出生。

36 1963年1月21日 (农历腊月廿六),“雷锋班”称号的命名大会举行。

37 1970年1月21日 (农历腊月十四),美国波音747喷气客机首次飞行。

38 1976年1月21日 (农历腊月廿一),两架协和式超音速客机,作首次商业飞行。

39 1976年1月21日 (农历腊月廿一),毛泽东提议华国锋任国务院代总理并主持中央常工作。

40 1977年1月21日 (农历腊月初三),西藏昌都地区首次发现恐龙化石。

41 1991年1月21日 (农历腊月初六),周培源奖用金设立。

42 1996年1月21日 (农历腊月初二),北京西客站开通运营。

43 2002年1月21日 (农历腊月初九),援阿重建国际会议开幕。

44 2006年1月21日 (农历腊月廿二),易卜拉欣·鲁戈瓦,科索沃总统,终年61岁。

百度统计 站长统计

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

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