微信网页开发调用微信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 ...
随机推荐
- CentOS 7安装图形界面
之前公司的服务器都是用的CentOS 的系统,需要安装图形界面的时候我会执行以下命令 yum -y groupinstall "X Window System" "Fon ...
- c#继承与构造函数的调用
1.实例化父类时,可以通过new子类来实例化父类,执行构造函数的顺序为:先执行父类的构造函数,再执行子类的构造函数. 2.实例化子类时,只可以new子类,执行顺序同上. 3.父类实例化后,只能执行父类 ...
- upc组队赛18 THE WORLD【时间模拟】
THE WORLD 题目链接 题目描述 The World can indicate world travel, particularly on a large scale. You mau be l ...
- (转载)如何在 Github 上发现优秀的开源项目?
转载自:传送门 之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到 ...
- 洛谷P2786 英语1(eng1)- 英语作文——map
给一手链接 https://www.luogu.com.cn/problem/P2786 拿这道题当map模板练练手qwq #include<cstdio> #include<cst ...
- [Linux] 022 RPM 包查询
1. 查询是否安装 (1) 查询包是否安装 $ rpm -q 包名 选项 释义 -q (query) 查询 (2) 查询所有已安装的 RPM 包 $ rpm -qa 选项 释义 -a (all) 所有 ...
- oracle存储过程调试-plsql
1.搜索找到存储过程的包,并打开 选中右击--view spec&body 2.找到要测试的存储过程,设置断点,进行测试
- LeetCode #938. Range Sum of BST 二叉搜索树的范围和
https://leetcode-cn.com/problems/range-sum-of-bst/ 二叉树中序遍历 二叉搜索树性质:一个节点大于所有其左子树的节点,小于其所有右子树的节点 /** * ...
- 【Vue 2.X】基于input[type='number']封装parseFloat、parseInt-自定义指令系列(一)
一.parseFloat 效果:限制负值输入,且输入值不为空时自动保留两位小数,等同于js的parseFloat(value).toFixed(2) 使用:与v-model配合使用,v-parseFl ...
- git push时提示--set-upstream
问题: 提示需要加--set-upstream