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

106 篇

文章总数

46654 次

浏览总数

95 条

评论总数

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

1 患者被狗咬伤后死于狂犬病,家属向首诊医院索赔100万

2 联动65所武汉高校参与,第二届“国漫星光奖”总决赛四个赛道冠军今日出炉

3 好惊险!与被骗擦肩而过的我总结了3点,一定要看

4 九龙警事丨男子酒驾送醉酒姐姐 开出不远就被查

5 【学英模 聚力量】王群:永远守护群众的平安幸福

6 男子凌晨留下遗书出走 警方全城搜寻救人

7 全国青少年文化遗产主题教育系列活动线上线下同时举办

8 今天四六级考题上热搜!普洱、铁观音、龙井……不是一般难

9 三明:渣土车相撞 消防队员紧急救援

10 重要提醒!湛江人,请尽快完成第二针接种!

11 南沙警方在线辟谣,该夫妻涉嫌妨害传染病防治

12 悲剧!男子海吃这种正大量上市水果,胃里查出肿瘤

13 快来,抱走你的“真心星球”!

14 无证还酒驾,调换座位想逃避处罚终难逃“法眼”

15 不畏疫情,“60后”党员书写逆行者故事

16 今天中午,黔织高速货车自燃,88辆电动车被烧毁

17 广州:街坊扭伤脚踝疼晕失意识,护士现场紧急施救

18 今早珠海一小车暴雨中死火!自动锁锁死!线上解锁教学发现玄机!

19 警示:居民住宅如何防范火灾?

20 “不是卖青菜萝卜,不要一分钱两分钱的搞!”这场砍价,硬核!

21 @所有江西人 赶紧去退钱!6月30日截止!

22 云南省地震局启动应急响应:尚未收到人员伤亡报告

23 燃到爆炸!这金字塔尖的逆天神作,撑起了国产科幻的门面

24 对话封闭管理的广州白鹤洞街道居民:每天都期盼着解封的那一天

25 嚣张!六旬男子半夜偷这东西,派出所门口也不放过!

26 极目新闻记者直击独象出没,专家称其离群容易孤独暴躁,建议尽快助其归队

27 河北:超市诬陷女孩偷东西,家长要求道歉遭据,经理:该找哪去哪

28 “面试”室友!武汉合租小姐姐这么做

29 端午小长假第一天 济南融创文旅城接待游客11万人次

30 一台媒总监无症状到身亡不超1天,前台南县长:应排查无症状患者

历史上的今天

1 在914年前的今天,1107年6月13日 (农历五月廿一),南宋开国皇帝宋高宗赵构诞辰。

2 在163年前的今天,1858年6月13日 (农历五月初三),《中俄天津条约》签订。

3 在154年前的今天,1867年6月13日 (农历五月十二),美国派军舰侵入台湾遭痛击。

4 在124年前的今天,1897年6月13日 (农历五月十四),芬兰长跑奇才鲁米诞生。

5 在121年前的今天,1900年6月13日 (农历五月十七),义和团运动爆发。

6 在116年前的今天,1905年6月13日 (农历五月十一),人民音乐家冼星海诞辰。

7 在98年前的今天,1923年6月13日 (农历四月廿九),北洋政府内讧 黎元洪出走天津。

8 在95年前的今天,1926年6月13日 (农历五月初四),毕苏斯基在波兰建立独裁政权。

9 在94年前的今天,1927年6月13日 (农历五月十四),任弼时同陈独秀的一次斗争。

10 在81年前的今天,1940年6月13日 (农历五月初八),电影《蝴蝶梦》上映。

11 在81年前的今天,1940年6月13日 (农历五月初八),国民党查禁毛泽东的《新民主主义论》。

12 1956年6月13日 (农历五月初五),英国从苏伊士运河撤走最后一批军队。

13 1974年6月13日 (农历闰四月廿三),江青树立“革命”典型小靳庄。

14 1975年6月13日 (农历五月初四),英国通货膨胀率创欧洲最高。

15 1978年6月13日 (农历五月初八),我国现代小说家柳青逝世。

16 1981年6月13日 (农历五月十二),空弹手枪射击使伊丽莎白二世受惊。

17 1981年6月13日 (农历五月十二),世界公布首例爱滋病。

18 1982年6月13日 (农历闰四月廿二),第十二届世界杯足球赛开幕。

19 1982年6月13日 (农历闰四月廿二),沙特国王哈立德逝世。

20 1983年6月13日 (农历五月初三),先驱者10号探测器飞出海王星轨道。

21 1994年6月13日 (农历五月初五),震惊美国的辛普森案发生。

22 1995年6月13日 (农历五月十六),法国宣布恢复核试验。

23 1996年6月13日 (农历四月廿八),中国著名探险家余纯顺逝世。

24 1998年6月13日 (农历五月十九),少女被困溶洞42天获救。

25 2000年6月13日 (农历五月十二),朝鲜北南双方领导人首次会晤。

26 2008年6月13日 (农历五月初十),首次拍得人类排卵的过程。

27 在1801年前的今天,0220年6月13日 (农历四月廿五),东汉末年曹操部下的大将夏侯惇逝世。

28 在1365年前的今天,0656年6月13日 (农历五月十六),唐朝胡晋、梁、陈、周、齐、陆书及隋书十志修撰完成。

百度统计 站长统计

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

友情链接:  若岚博客  vipbic  博客大全  快云vps  聚宝盆  飞之梦工作室  华侒说房  提交友链