微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 (持续更新)
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,如果不调用这个方法,微信自己不会去调用了。
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 (持续更新)的更多相关文章
- 10天学会phpWeChat——第十天:phpWeChat的会员注册、登录以及微信网页开发
通过前面的系列教程,我们系统的讲解了phpWeChat从视图端.控制器端到模型端的操作流程:熟悉了phpWeChat的目录结构:掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库.这一切都是 ...
- 微信开发+百度AI学习:微信网页开发环境搭建
参考微信官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 两步即可获取微信网页开发能力 STEP1: ...
- 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP)
wechat github 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP) 概述 公众号开发是痛苦的,痛苦在好多问题开发者文档是没有提到的,是需要你猜的. 在开发过程中 ...
- VueJs单页应用实现微信网页授权及微信分享功能
在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算 ...
- .Net微信网页开发之使用微信JS-SDK调用微信扫一扫功能
前言: 之前有个项目需要调用微信扫描二维码的功能,通过调用微信扫码二维码功能,然后去获取到系统中生成的二维码信息.正好微信JS-SDK提供了调用微信扫一扫的功能接口,下面让我们来看看是如何实现的吧. ...
- 夺命雷公狗---微信开发56----微信js-sdk接口开发(3)所有接口功能
按照上节课程里面的介绍,我们可以先将刚才在signatrue.php里获取到的信息填写进jssdk.htm模版文件里填写各个权限的参数 jssdk.htm代码如下: <!DOCTYPE html ...
- 夺命雷公狗---微信开发55----微信js-sdk接口开发(2)接口功能介绍之签名算法
我们JS-SDK里面其实有不少的接口 startRecord---录音 stopRecord---停止录音 playVoice---播放 pauseVoice---暂停播放 uploadImage-- ...
- 夺命雷公狗---微信开发54----微信js-sdk接口开发(1)之快速入门
js-sdk基本介绍 除去服务号的九大接口外,微信提供了JS-SDK接口,所谓JS-SDK接口也就是在网页中使用javascript来更改网页设置, (比如隐藏右上角的菜单)获取用户状态(比如地理位置 ...
- .Net微信网页开发之使用微信JS-SDK自定义微信分享内容
第一步.微信JS-SDK的使用步骤,配置信息的生成获取讲解: 关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token ...
随机推荐
- vue-过滤器(filter)
1.全局过滤器(项目中所有的vue文件都可以使用) 1.1 直接注册全局过滤器 在main.js中注册: 在项目中使用; 前面的为时间,作为filter过滤器的第一个参数. 1.2 所有过滤器写在一 ...
- mybatis批量插入、更新和删除
https://blog.csdn.net/m0_37981235/article/details/79131493 https://www.jb51.net/article/132823.htm
- Spring Boot 1.x 正式退役,2.x大步向前!
Java技术栈 www.javastack.cn 优秀的Java技术公众号 早在<Spring Boot 2.1.5 正式发布,1.5.x 即将结束使命!>一文中栈长就提醒大家 Sprin ...
- BZOJ 1937 (luogu 4412) (KM+LCA)
题面 传送门 分析 根据贪心的思想我们得到几条性质: 1.生成树上的边权减小,非树边的边权增加 2.每条边最多被修改一次 设改变量的绝对值为d 对于一条非树边\(j:(u,v)\),树上u->v ...
- 60-python基础-python3-集合-集合常用方法-交集、并集、差集、对称差集-intersection(&)-union(|)-difference(-)-symmetric_difference()
交集.并集.差集-intersection(&)-union(|)-difference(-) 1-intersection(&) s1.intersection(s2),返回s1和s ...
- 创建一个java项目并部署到weblogic服务器
转自:https://blog.csdn.net/krystal_sl/article/details/52847953 新建一个项目的步骤 打开eclipse,右键点击new–>java pr ...
- vue-ivew input 框 回车搜索功能
1. 添加事件 <FormItem prop="> <Input type="text" v-model="formInline.produc ...
- Flutter-Text
text的主要属性有:textAlign,maxLines,overflow等. Text( "hello flutter!", TextAlign:TextAlign.cente ...
- Linux自用指令——2019年10月23日
1.ls ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹. ls -a 列出目录所有文件,包含以.开始的隐藏文件 ...
- IncepText算法笔记
源头:场景文本经常受到aspect ratio, scal, and orientation的影响 为了解决这个问题,提出了inceptext,主要贡献在于添加了inception-text modu ...