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

96 篇

文章总数

38979 次

浏览总数

94 条

评论总数

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

1 “15块4根面”,商家已停业整顿,景区物价就应该“贵上天”?

2 二十岁的智障女性嫁给五十岁的男人,这种婚姻是否有效的?

3 凤梨滞销,台湾名嘴鼓励每人一天吃18公斤,网友:笑喷了!

4 “错换人生28年”姚策母子为何反目,是利益纠葛还是另有隐情?

5 美女在家打造游戏厅 能VR高科技

6 “拉面哥”被众网红逼哭,声称想回归平静质朴的生活

7 失主你在哪儿?每个信封里都有百元大钞

8 两地燃气集团携手 成渝双城“燃”向未来

9 中国南北分界线上的古镇,有一副对联难倒天下客,百年来无人对出

10 暖闻|理发师退休后服务社区老人,收费2元30年未涨

11 上海苏宁将启动“全民焕新家电节” 家电以旧换新补贴最高达5000元

12 这种病一线城市治疗率不足40%,出现走路缓慢、手抖等症状要警惕

13 上海发布住房限售新举措 优先购买的新房满五年后方可转让

14 独居女孩被困浴室后 3000多个孤独的人尝试用智能音箱呼救

15 医院对面的“爱心家园”:为贫困患儿家庭提供免费食宿

16 30年守护:世界濒危鸟类黑嘴鸥在辽宁从千至万

17 最小龄双侧同期人工耳蜗宝宝如今能听会说

18 泰州14岁男孩开学后离家出走,南京铁路民警及时找回

19 咋回事?延庆警察蜀黍收到一束鲜花?

20 前有老人讹人称“良心过得去” 后有老人倒地“被绕路走”?别让好人寒了心!

21 视频|神秘男子“投食”狗狗 公共视频还原作案过程

22 花博会地方花卉展3月下旬举办 园区加紧运营培训

23 通讯:在内蒙古的留学生:传递好中国力量

24 吉林农业大学首批学生3月3日返校

25 某55岁男子娶智障女子 律师:无法领证,有刑事责任风

26 北京联合办公室租赁新模式,E园EPARK办公室秒变自习室

27 上海实施住房限售 优先购买新房的需网签备案满5年后方可转让

28 数字经济助文旅新篇——2021亚洲乐园及景点博览会5月羊城启幕

29 台湾拖家带口三人在加拿大租豪宅 院子2000平

30 金鱼排成一排看电视 主人:电视一关就散开 专家科普

历史上的今天

1 在869年前的今天,1152年3月4日 (农历正月廿六),“红胡子”腓特烈当选国王。

2 在828年前的今天,1193年3月4日 (农历正月廿九),埃及阿尤布王朝开国君主萨拉丁逝世。

3 在1871年前的今天,0150年3月4日 (农历正月十八),东汉医圣张仲景出生。

4 在343年前的今天,1678年3月4日 (农历二月十二),古典协奏曲形式的确立者维瓦尔蒂诞生。

5 在169年前的今天,1852年3月4日 (农历正月十四),俄国著名作家尼科拉伊·瓦西里也维奇·果戈理逝世。

6 在159年前的今天,1862年3月4日 (农历二月初四),中俄签订陆路通商章程。

7 在114年前的今天,1907年3月4日 (农历正月二十),孙中山被迫离。

8 在104年前的今天,1917年3月4日 (农历二月十一),国务总理段祺瑞出走天津,府院之争愈演愈烈。

9 在102年前的今天,1919年3月4日 (农历二月初三),列宁组成第三共产国际。

10 在100年前的今天,1921年3月4日 (农历正月廿五),哈定就任美国第29任总统。

11 在99年前的今天,1992年3月4日 (农历二月初六),香港英军制造“沙田惨案”。

12 在98年前的今天,1923年3月4日 (农历正月十七),胡适大力提倡研究国学。

13 在88年前的今天,1933年3月4日 (农历二月初九),富兰克林·罗斯福就任美国总统。

14 在88年前的今天,1933年3月4日 (农历二月初九),日军攻占承德。

15 在88年前的今天,1933年3月4日 (农历二月初九),日军攻占古北口。

16 在86年前的今天,1935年3月4日 (农历正月廿九),毛泽东担任红军前敌司令部政治委员。

17 在79年前的今天,1942年3月4日 (农历正月十八),美国派史迪威来华任职。

18 在77年前的今天,1944年3月4日 (农历二月初十),美国飞机第一次轰炸柏林。

19 在75年前的今天,1946年3月4日 (农历二月初一),叶挺获释。

20 1951年3月4日 (农历正月廿七),第一届亚洲运动会开幕。

21 1958年3月4日 (农历正月十五),英文《北京周报》创刊。

22 1967年3月4日 (农历正月廿四),斯大林的女儿叛逃西方。

23 1974年3月4日 (农历二月十一),希思辞职,哈罗德·威尔逊再度成为英国首相。

24 1975年3月4日 (农历正月廿二),石油输出国组织第一届首脑会议在阿尔及尔举行。

25 1980年3月4日 (农历正月十八),穆加贝即将组织津巴布韦黑人政权。

26 1983年3月4日 (农历正月二十),邓小平说:不能再用解放台湾这个提法。

27 1985年3月4日 (农历正月十三),邓小平会见日本商工会议所访华团。

28 1986年3月4日 (农历正月廿四),瓦尔德海姆被指控曾是纳粹分子。

29 1986年3月4日 (农历正月廿四),著名女作家丁玲逝世。

30 1987年3月4日 (农历二月初五),中国六大航空公司成立。

31 1988年3月4日 (农历正月十七),国务院决定扩大沿海经济开放区。

32 1989年3月4日 (农历正月廿七),邓小平指出:搞四化搞改革开放关键是稳定。

33 1990年3月4日 (农历二月初八),肖红教授获香港区旗、区徽设计最高奖。

34 1998年3月4日 (农历二月初六),瓦杰帕伊当选印度新总理。

35 2000年3月4日 (农历正月廿九),中国物理学家,被誉为中国物理学之父的吴大猷逝世。

36 2002年3月4日 (农历正月廿一),中国耕作学创始人之一沈学年逝世。

37 2003年3月4日 (农历二月初二),菲律宾一国际机场发生炸弹爆炸,造成至少19人死亡。

38 2003年3月4日 (农历二月初二),中国《2001-2002中国城市发展报告》首次评估城市。

39 2005年3月4日 (农历正月廿四),胡锦涛在北京提出新形势下发展两岸关系的四点意见。

40 2006年3月4日 (农历二月初五),胡锦涛在全国政协分组讨论中提出“八荣八耻”论述。

41 在1440年前的今天,0581年3月4日 (农历二月十四),隋文帝杨坚取代北周即帝位。

百度统计 站长统计

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

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