美文网首页
JS-SDK调试

JS-SDK调试

作者: CharlsPrince | 来源:发表于2017-12-15 11:08 被阅读0次

步骤

1、登录微信公众平台并打开在线接口调试工具和公众平台测试账号。

2、打开公众平台测试账号,里面有一栏叫JS接口安全域名的,点击修改,将里面的域名填写为你将要放置的js-sdk域名,这么说,可能有点抽象,就是说这里填写的域名其实就是你站点的域名:(==关键!!!==)

安全域名配置

3、打开在线调试工具,选择接口类型为基础类型,接口列表为获取access_token接口/token,并填入测试公众号的appidsecret,然后点击检查问题获取到access_token

4、获取到access_token后,使用postman请求以下接口

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=(填入上面获取到的access_token)&type=jsapi

则会得到ticket

获取ticket

5、拿到了ticket则可以通过sha1加密去获取签名了

获取签名

仔细看一下,你会发现jsapi_ticket中间多了个\,其实这个\是不需要的,要去掉在进行加密,明文中包含了几个参数,其中appid就不多说了,测试公众号的appid;timestamp表示生成签名的时间戳,nonceStr代表随机字符串,这两个参数在测试阶段都可以随意填写,正式环境最好还是在后台服务器中使用代码生成。

6、来到这里基本就差不多了,这时你需要一个测试的demo工程,将配置需要使用到的参数配置进去:

配置参数

去到微信开发者工具,输入你demo的运行路径,

如果出现:

签名失效

一般都是签名不正确导致的,请检查,是否那个步骤有错,实在不行,也可以重新执行2-5步骤

如果出现:

不可用域名

这个情况是js接口安全域名,跟你js-sdk所在的域,不是同一个域,打开公众号测试账号看看:

安全域名

对比下两个域,就会发现问题。

如果出现:

签名配置成功

证明你的签名已经配置成功了,这时你再点击右上角-分享到朋友圈就会看到如下界面:

分享朋友圈

你会发现显示的是微信的图标和网页的标题(有时[真机]会显示公众号的名称),结果不是跟你的需求还不是很匹配,看一下demo里面的代码:

分享朋友圈按钮事件

会发现在分享api外层还包了一层点击事件,只要点击一下就会出现以下界面:

注册点击事件

发现js的接口需要被注册一下才能被调用。。。。当然,如果你不需要点击才注册,只需要将wx.onMenuShareTimeline({ ... })这段代码移出来,防止到wx.ready({ ... })中就可以了。

注册完成再点击分享到朋友圈,就会出现以下界面,这样图片、链接、标题等分享的内容就实现了自定义。

分享朋友圈自定义内容

点击发送,就可以了。

问题:

1、真机测试发现显示不了图片和标题,目前还不知道是什么情况,有可能是微信做了认证的限制,之前看了一篇文章,说微信6.0.2之后,必须要(被)认(打)证(劫)的公众号才能显示自定义的图片和标题---囧o(╯□╰)o囧,真坑爹=_=。

相关文章

  • JS-SDK调试

    步骤 1、登录微信公众平台并打开在线接口调试工具和公众平台测试账号。 2、打开公众平台测试账号,里面有一栏叫JS接...

  • 金融壹账通前端H5技术周报(第六期)

    本期导读: 原创专题带来诗沂微信js-sdk调试的分享,以及本人对前端开发热更新原理的一些解读。语言基础紧随牛人的...

  • 微信JS-SDK如何在本地调试

    1.下载fiddler2.通过host绑定本地ip/远程测试ip到目标域名 选择tools-->hosts,在弹出...

  • 调用百度翻译自动翻译网页

    准备工作 去百度翻译api 申请通用 appid (有次数限制,非免费api)下载js-sdk本身 js-sdk本...

  • 小程序底层原理学习笔记

    前言 腾讯的面试会问到小程序的底层原理,公众号开发的js-sdk也会问,js-sdk本质就是 jsBridge ,...

  • 微信支付JSAPI遇到的坑

    这里没使用微信的js-sdk,因为js-sdk要在前端wx.config中配置公众号信息,jsapi版相对也要简单...

  • 2018-06-05

    JS-SDK 列表 JS-SDK Demo 这个demo主要用来查看代码,看效果可以用微信官方提供的开发工具进行调...

  • vue 项目在企业微信中引入分享

    1. 下载微信js-sdk 2. main.js中引入js-sdk 3.建一个wxConfig.js 4.需要分享...

  • 微信开发

    简介 网页授权 js-sdk 微信公众号

  • 微信js-sdk接口调用实现扫一扫功能

    调用微信js-sdk,实现扫一扫 (1)先引入js-sdk文件包(2)调用后台接口,返回配置参数,成功后配置wx....

网友评论

      本文标题:JS-SDK调试

      本文链接:https://www.haomeiwen.com/subject/edbrwxtx.html