微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK

微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片

JSSDK为开发者提供了两个位置API服务：获取地理位置和使用微信内置地图查看位置。

下面还是沿用以往的实战演示方法。先创建一份location.js文件，为“wxJSSDK”增加“location”的相关API，代码如下：

01     wxJSSDK.location= function(locationApi){

02         if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕

03             if(locationApi){

04               //其他代码略

05             }else{

06                 console.log("缺少配置参数");

07             }

08         }else{

09             console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用位置接口服10       务。");

11         }

12     }

复制一份JSSDK环境，创建一份index.html文件，结构如图7.1所示。

图7.1  7.1节文件结构

7.1.1 获取地理位置

第1个就是“获取地理位置”的信息，名为“getLocation”，官方示例代码：

01     wx.getLocation({

02         success: function (res) {//1个参数，位置资源信息

03             var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90

04             var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。

05             var speed = res.speed; // 速度，以米/每秒计

06             var accuracy = res.accuracy; // 位置精度

07         }

08     });

在location.js中，封装“getLocation”，如下：

01     wxJSSDK.location= function(locationApi){

02         if(wxJSSDK.isReady){        //wxJSSDK.isReady 查看微信JSSDK是否初始化完毕

03             if(locationApi){

04                 locationApi.getLocation &&wx.getLocation({                 //获取地理位置接口

05                     success: function (res) {

06                        locationApi.getLocation.success &&

07     locationApi.getLocation.success(res);

08                     }

09                 });

10             }else{

11                 console.log("缺少配置参数");

12             }

13         }else{

14             console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用位置接口服15       务。");

16         }

17     }

在index.html文件中，增加“获取地理位置”按钮，以及显示获取之后的位置信息，代码结构，如下：

01     <!DOCTYPEhtml>

02     <htmllang="en">

03     <head>

04              <metacharset="UTF-8">

05         <meta name="viewport"content="width=device-width, initial-scale=1.0,

06     minimum-scale=1,maximum-scale=1.0, user-scalable=no">

07         <title>第7章 7.1节位置操作接口</title>

08         <!--依赖文件：jQuery-->

09         <scriptsrc="./js/jquery-1.11.2.min.js"></script>

10         <!--依赖文件：微信的JSSDK源文件-->

11         <scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

12         <!--依赖文件：coolie-->

13         <scriptsrc="./js/cookie.js"></script>

14         <!--JSSDK的环境-->

15         <scriptsrc="./js/wxJSSDK.js"></script>

16         <!--引入检测API的位置服务-->

17         <scriptsrc="location.js"></script>

18         <style>

19             input{

20                 width: 100%;

21                 padding: 0.2em;

22                 background-color: #5eb95e;

23                 font-size: 1.4em;

24                 background-image:linear-gradient(to bottom, #62c462, #57a957);

25                 background-repeat: repeat-x;

26                 color: #ffffff;

27                 text-align: center;

28                 text-shadow: 0 -1px 0 rgba(0, 0, 0,0.25);

29                 border-radius: 0.3em;

30             }

31             #info{

32                 border-left: 3px solid #03a9f4;

33                 background-color: #5eb95e;

34                 color: #ffffff;

35                 border-radius: 0.3em;

36                 text-shadow: 0 -1px 0 rgba(0, 0, 0,0.25);

37             }

38         </style>

39     </head>

40     <body>

41         <h1 style="font-size:8em">:)</h1>

42         <b style="font-size: 3em">位置操作接口！</b><br /><br />

43         <div id="info">

44             <p>纬度：<em id="latitude">无</em></p>

45             <p>经度：<em id="longitude">无</em></p>

46             <p>速度：<em id="speed">无</em></p>

47             <p>位置精度：<em id="accuracy">无</em></p>

48         </div>

49         <input type="button"value="获取当前地理位置信息"id="getLocation" />

50     </body>

51     </html>

然后在location.js中增加响应事件，代码如下：

01     window.onload= function(){

02         var latitude,longitude, speed ,accuracy;              // 位置信息初始变量

03        $("#getLocation").click(function(){                         //获取地理位置接口

04             wxJSSDK.location({

05                 getLocation:{

06                     success:function (res) {

07                         latitude = res.latitude;              // 纬度，浮点数，范围为90 ~ -90

08                        $("#latitude").html(latitude);

09                         longitude = res.longitude;      // 经度，浮点数，范围为180 ~ -180。

10                        $("#longitude").html(longitude);

11                         speed = res.speed;                  // 速度，以米/每秒计

12                        $("#speed").html(speed);

13                         accuracy = res.accuracy;        // 位置精度

14                        $("#accuracy").html(accuracy);

15                     }

16                 }

17             });

18          });

19     }

最后记得在JSSDK的配置环境中加入“getLocation”API的权限。

【代码解释】

“getLocation”的位置成功后，会返回“纬度”、“经度”、“速度”、“位置精度”的相关信息。当点击“获取位置”的按钮之后，微信会弹出提示信息，如图7.2所示。获取信息成功之后的结果如图7.3所示。

图7.2 微信JSSDK获取位置信息提示

图7.3 获取位置服务成功的信息

摘自

微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK

微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片

【原创】微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置的更多相关文章

  1. 【原创】微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫

    微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置   在JS ...

  2. 微信公众号与HTML 5混合模式揭秘5——JSSDK开发技巧1

    微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置 微信公众号 ...

  3. 微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK

    本文是连载JSSDK+H5的书,这里是第一篇揭秘————如何部署JSSDK 部署JSSDK不会太难,有时候需要一点后台知识,但也不是太难的那种,本节主要是用PHP作为后台参考语言,为了照顾初学者,把代 ...

  4. 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片

    本书是分享微信jssdk开发的第二篇.     4.2.1 项目需求 需求说明:实现微信端的手机用户,点击按钮选取1张图片,分享到朋友圈. 4.2.2 需求分解 通过对需求的了解,可以将其分解为: ( ...

  5. 微信公众号平台接口开发：基础支持，获取access_token

    新建Asp.net MVC 4.0项目 WeChatSubscript是项目UI层 WeChatTools是封装操作访问公众号接口的一些方法类库 获取AccssToken 我们要的得到AccessTo ...

  6. 微信公众号平台接口开发：基础支持，获取微信服务器IP地址

    官方说明 目前看不出来这个接口有哪些具体运用,但是既然有这个接口,那我们就试试能不能用 访问接口 修改WeCharBase.cs,新增以下2个方法 public static string Serve ...

  7. 【微信公众号开发】【8】网页授权获取用户基本信息（OAuth 2.0）

    前言: 1,在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名. 请注意,这 ...

  8. PHP开发微信公众号（一）二维码的获取

    要开发微信公众号,首先进行需要注册一个,然后认证.这就不用多说了. 当然如果没有,也可以去申请一个测试号来使用,地址:https://mp.weixin.qq.com/debug/cgi-bin/sa ...

  9. 【基础】java环境搭建及配置--->【关注微信公众号：三叔测试笔记，及时获取干货】

    一.下载安装 Java官网下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...

随机推荐

  1. 【JavaScript】HTML5存储方案

    1.Web SQL 2.IndexedDB 3.Local Storage 4.Session Storage 5.Cookies 6.Application Cache

  2. iOS开发——开发必备OC篇&彩票实战之精华讲解

    彩票实战之精华讲解 在这段时间自己研究并学习关于彩票项目开发的时候遇到各种坑,各种技术点以前或许之前用过但是却用起来不是那么熟悉,所以没遇到一个重点的地方我就会记录一下,希望不会再有下次. 本文主要讲 ...

  3. 算法设计 - LCS 最长公共子序列&&最长公共子串 &&LIS 最长递增子序列

    出处 http://segmentfault.com/blog/exploring/ 本章讲解:1. LCS(最长公共子序列)O(n^2)的时间复杂度,O(n^2)的空间复杂度:2. 与之类似但不同的 ...

  4. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  5. 在加载模块时出现cannot insert '*.ko': Device or resource busy错误

    制作了一个模块,在加载是出现了cannot insert '*.ko': Device or resource busy错误. 原因: 是由于模块使用的是静态分配设备号,而这个设备号已经被系统中的其他 ...

  6. 遍历List remove方法，雨露均沾

    /** * 要求:去掉List中为 0 的元素 */ //创建数组和空List Integer[] ars = {1,0,0,0,5,0,8,9,0,0,0,65,3,0,0}; List<In ...

  7. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  8. 使用NuGet加载包，发现加载的dll都是最新版，原来少加了参数[-Version]

    使用NuGet获取AutoMapper 发现无法正确加载包,项目版本是3.5,获取的dll版本较高,查资料发现可以通过 “-Version” 指定加载包版本 http://www.mamicode.c ...

  9. Eclipse中配置Tomcat碰到Server Tomcat v6.0 Server at localhost failed to start问题

    控制台打印异常如下: Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/juli/logg ...

  10. 在ios开发中nil和NUll和Nilde区别————和如何判断连个对象的关系和UISlider不能拖动的问题

    nil表示一个对象指针为空,针对对象 >示例代码: NSString *someString = nil; NSURL *someURL = nil; id someObject = nil; ...