微信公众号与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. Android创建文件夹及文件并写入数据

    package elwin.fei.mobileaudio; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...

  2. android ListView 中getview学习总结

    最近在做android相关的开发,ListView中有一个图片错位的问题,今天查了很多人写的一些东西,所以记录下来,算是一种加深理解吧. ListView是一个非常常用的控件,功能可以扩展的很丰富,而 ...

  3. 基于W5500的嵌入式SNMP代理端实现

     一 实验背景 近期一个做焊接设备的朋友想在焊机上加入监控的新功能,实时获取焊机的温度.功耗等參数,还可简单控制,实现对集群焊接设备的网络化管理.而这个朋友不想在开发管理系统上花太多精力,想找一个 ...

  4. 0c-36-自动释放池应用场景

    .autorelease的应用场景 经常用来在类方法中快速创建1个对象. // 声明实现一个类方法 + (Student *)student { // 在里面直接进行autorelease retur ...

  5. oc-26-动态类型检测

    /** 1).判断对象是不是指定类的对象或者指定类的子类对象. - (BOOL)isKindOfClass:(Class)aClass; 2).判断对象是不是1个特定类型的对象,不包括子类. - (B ...

  6. 更换VS2012序列号的方法

    转自:http://blog.sina.com.cn/s/blog_58c506600101ja49.html 今天不小心把还在试用期内的VS2012 Ultimate填上盗版Key激活了……找遍了菜 ...

  7. xy

    用C#實現Blob數據類型 PowerBuilder提供了Blob數據類型, 用來處理二進制數據(如:圖像,文件,二進制流,文本等等). 本質上, Blob是可變長的字節數組, 它提供了一系列全局函數 ...

  8. 基于jQuery向下弹出遮罩图片相册

    今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...

  9. WinServer 之 访问同网段服务器 或 同一服务器多虚拟机间的访问

    今天在发布网站时遇到不能访问同网段数据库服务器.具体情况为:web服务端部署在192.168.10.1下,而数据库服务端部署在192.168.10.2下,数据库连接直接配置为192.168.10.2会 ...

  10. javascript实现经纬度与地址的互转

    最近项目中会用到将地址转换为经纬的.从出来,还一直未遇到过这类问题,下来自己提前学习了,将自己所学的记录在案. 在网上找了很多资料,最后确定了,百度的API,有实现相关的接口(API地址).使用API ...