微信公众号/网页开发调试技巧、微信开发者工具使用及接入微信JS |
您所在的位置：网站首页 › 微信开发者工具调试器怎么打开 › 微信公众号/网页开发调试技巧、微信开发者工具使用及接入微信JS |
微信公众号/网页开发调试技巧、微信开发者工具使用及接入微信JS
|
微信开发者工具
开发微信小程序或公众号时需要使用的调试工具 微信web开发者工具，选择稳定版下载。 以内容中简称 工具 工具的使用下载完成之后，启动工具。 开发原生小程序，可以创建项目直接进入，工具内提供编辑器环境。 使用uniapp开发微信小程序时，在HbilderX内配置好工具所在路径，然后选择工具内 [ 设置 -> 安全 -> 开放端口 ] ,打开开放端口。使用HbilderX打包小程序时就会自动启动工具进入项目。 关于微信公众号/网页的调试： 微信公众号本质上就是h5网页，使用微信内置浏览器渲染网页。启动工具后选择公众号网页项目，进入公众号调试页面。 看着这个页面是不是就感觉很熟悉了，是和Chrome浏览器调试基本一样的，多的就是可以调试微信浏览器内置的一些方法。本地测试时，可以将本地启动的页面地址输入到地址栏运行页面调试。 微信公众号测试号对与开发初期还不能上线正式环境的项目来说，可以申请一个测试号，来进行一些功能的测试。 申请测试号地址 进入申请页面后，扫码登录，然后填写一些配置信息。 微信公众号/网页开发中接入JS-SDK可以获得一些接口使用权限，例如自定义分享、上传图片、获取位置等功能。 JS-SDK文档地址 流程现在梳理一下使用JS-SDK的流程： （1）测试公众号的配置，并把测试公众号中的appId和appsecret给后端，后端签名时需要用到 （2）页面中引入js文件 res.wx.qq.com/open/js/jwe… （3）注入接口权限验证配置 let url = encodeURIComponent(location.href.split('#')[0]); $.ajax({ url: '/api/getConfigData', type: 'get', dataType: 'json', headers: { 'Content-Type': 'application/json;', }, data: { url, }, success: function (data) { console.log(data); wx.config({ debug: ture, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: data.result.appId, // 必填，公众号的唯一标识 timestamp: data.result.timestamp, // 必填，生成签名的时间戳 nonceStr: data.result.nonceStr, // 必填，生成签名的随机串 signature: data.result.signature, // 必填，签名 jsApiList: ['updateAppMessageShareData'], // 必填，需要使用的JS接口列表 }); }, error: function (e) { // console.log('ajax请求异常，异常信息如下：', e) }, }); 复制代码为了保证安全，签名必须在服务端完成，所以要后端配合调一个接口返回signature及上述代码其他几个字段给前端使用，wx.config方法中传入jsApiList是你想要使用的微信接口。 url变量为当前页面链接，后端签名时需要用到，所以调接口时提供给后端。可以根据场景自行调整。 （4）通过ready接口处理成功验证 wx.ready(function(){ // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 }); 复制代码例如，使用自定义分享接口时： wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateAppMessageShareData({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () { // 设置成功 } }) }); 复制代码如果是用户点击按钮才触发的话，就不需要将wx.updateAppMessageShareData写在ready里面。 常见问题如上图，wx.config权限验证成功，但是jsApiList要使用的接口权限却获取不到。 这时可以使用工具的调试：「微信开发者工具」-「调试」-「调试微信开发者工具」，选到network面板，然后刷新一下你当前的网页，找到 preverify 这个接口，发现verify_info_list字段为空，而且有报错信息，错误码40048。 还有些时候，会出现63002 错误的签名等问题，总之就是无法正常使用JS-SDK。 出现这类问题的绝大多数原因，都是没有注意到一些小细节，签名时字段错误、公众号域名配置错误等，注意下面几点避免这些问题的发生： 确保公众号/测试号域名配置正确，jsApiList只能在该域名下可以使用 注意nonceStr等字段大小写 确保后端签名时的appId等字段和前端wx.config的字段一致 后端签名时用到的url如果是前端给提供的话，需要前端将url进行encodeURIComponent编码，传给后端时，后端也要用相应的方法解码后再进行签名。url需要的是当前页去掉"#"hash部分的链接，可参考本文示例。微信的文档......里面有些情况不会说明，特殊问题可以去微信开放社区 Api相关问题在使用wx.updateAppMessageShareData的时候发现，接口success状态时无法弹出分享的引导。后来经过查阅资料发现这个接口只能对分享的链接、标题、logo、描述自定义，要分享还是要点击微信网页右上角的三个点将自定义的内容分享出去。 而且分享出去的内容有时候会只有一个链接而不是卡片的形式，最后发现通过扫描二维码进入，或者从微信公众号进入时分享至微信好友、朋友圈都是正常的。只有从外部链接进入分享时会出现只有链接的情况。 所以有很多情况，在文档中都是不会说明的，还是要自己去折腾、查阅资料。 调试工具/方法 在线工具：微信公众平台接口调试工具 签名工具 移动端微信网页调试，直接在手机微信内打开链接实现对应的操作：关闭x5内核： debugmm.qq.com/?forcex5=fa… 开启x5内核： debugmm.qq.com/?forcex5=tu… x5内核开启状态时，可以进入tbs调试页面，进行清理微信浏览器缓存等 debugtbs.qq.com/ |
【本文地址】
今日新闻 |
推荐新闻 |