微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）

JowayYoung 发布于2019-08-05 14:29 / 2129人阅读

摘要：在系统的手机中，其实微信点击网页的图片会自动调用这个接口一次。然后在在下面进行微信的接口的调用判断是还是终端终端更新这个好像微信自己修复了，现在无论还是，如果不调用这个方法，微信自己不会去调用了。

1.微信网页开发调用jssdk时报permission denied 大致是两个原因

（1）首先注册时未将你所调用的接口名字添加至jsApiList

（2）第二个就是你的这个公众号没有权限使用这个api，例如在开发环境中的微信页面就无法调取这个api,需要发布后，到对应的有权限的公众号中再打开对应的界面，调用api才成功

2.微信jssdk 使用微信内置地图查看位置【openLocation】接口最终显示不精确

项目开发中，web端调用的是百度地图api，而微信项目中调用的是腾讯自己的地图，两者所使用的坐标系有所不同，百度用的是自己的百度坐标系，而高德地图和腾讯地图使用的是火星坐标系，两者之间需要做一下转换

火星坐标 转换到 百度地图坐标

function huoxingToBaidu(hxLongitude, hxLatitude){  
                var X_PI = Math.PI * 3000.0 / 180.0;  
                var x = hxLongitude, y = hxLatitude;  
                var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);  
                var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);  
                var bdLongitude = z * Math.cos(theta) + 0.0065;  
                var bdLatitude = z * Math.sin(theta) + 0.006;  
                return {  
                    bdLongitude: bdLongitude,  
                    bdLatitude: bdLatitude  
                };  
            }

百度地图坐标 转换到 火星坐标

function baiduToHuoxing(bdLongitude,bdLatitude) {  
                var X_PI = Math.Pi * 3000.0 / 180.0;  
                var x = bdLongitude - 0.0065;  
                var y = bdLatitude - 0.006;  
                var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);  
                var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);  
                var hxLongitude = z * Math.cos(theta);  
                var hxLatitude = z * Math.sin(theta);  
                return {  
                    hxLongitude: hxLongitude,  
                    hxLatitude: hxLatitude  
                }  
            }

3.微信JSSDK 预览图片【previewImage】接口的坑, 安卓手机上，图片预览需要点击两次才能退出预览

在微信网页开发过程中，测试提出的一个bug，在微信中预览图片是，点击图片，打开图片正常，当再次点击时，原本应该直接退出图片预览，但是却需要点击两次才能退出预览。

分析原因

应该是 previewImage 这个接口调用了两次，进行了图片的叠加。所以需要两次才能退出

最终得出的结果

代码中实际上只调用了一次。

在Android系统的手机中，其实微信点击网页的图片会自动调用这个接口一次。然后代码中又对对这个接口调用了一次，这就造成了以上的结果。

但是在ios系统的手机中，微信并不会调用这个接口。

解决方案

在方法的最前面进行手机系统的判断，当是Android系统直接return。
然后在在下面进行微信的previewImage接口的调用

js判断是Android还是ios

var u = navigator.userAgent;

isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1, //android终端

isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

2018.8.1更新
这个bug好像微信自己修复了，现在无论Android还是ios，如果不调用这个方法，微信自己不会去调用了。

私有云混合云微信js接口调用接口微信高级接口的调用微信jssdk js调用微信定位接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58044.html

微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）

摘要：在系统的手机中，其实微信点击网页的图片会自动调用这个接口一次。然后在在下面进行微信的接口的调用判断是还是终端终端更新这个好像微信自己修复了，现在无论还是，如果不调用这个方法，微信自己不会去调用了。 1.微信网页开发调用jssdk时报permission denied 大致是两个原因（1）首先注册时未将你所调用的接口名字添加至jsApiList （2）第二个就是你的这个公众号没有权限使...

Little_XM 2019-08-02 11:00 评论0 收藏0
使用vue开发微信公众号下SPA站点的填坑之旅

摘要：原文见我的博客，点击进入使用开发微信公众号下站点的填坑之旅本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱。原文见我的博客，点击进入使用vue开发微信公众号下SPA站点的填坑之旅本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱^_^。 ...

yeyan1996 2019-08-21 15:09 评论0 收藏0
微信 - 收藏集 - 掘金

摘要：基础学习微信小程序视图容器一掘金本文为菜鸟窝编辑吴佳林的连载。如果碰巧遇到关闭情况，可加群全家桶与微信开发前端掘金此项目本身有一个了，为了方便将和微信端数据打通，需要用户微信和用户绑定。微信扫一扫登录内部实现原理 - Android - 掘金与XMPP相关试题一与XMPP相关试题二与性能优化相关试题一与性能优化相关试题二与性能优化相... [利用 [微信公众号通知] 给你的网...

jasperyang 2019-08-28 17:46 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

lieeps 2019-08-30 15:55 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

jsdt 2019-08-02 14:00 评论0 收藏0