微信公众号与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自定义TabWidget样式

    先看看效果图吧,个人觉得图标丑了点,不过还行,自己用PS做的 下面是全部代码和流程,一定要按流程顺序来,不然错误! 1.tabhost.xml <TabHost xmlns:android=&q ...

  2. ios开发——实用技术总结Swift篇&swift常用开发技术总结

    swift常用开发技术总结 懒加载:属性,数组(字典),控件... 数组(懒加载): lazy var shops:Array<Dictionary<String, String>& ...

  3. 在Ubuntu 14.04 64bit上安装numpy和matplotlib库

    原文:http://blog.csdn.net/tao_627/article/details/44004541 按照这个成功安装! 机器学习是数据挖掘的一种实现形式,在学习<机器学习实战> ...

  4. 代码片段------find批量处理

    应用案例: 当前目录下有若干目录,有多个目录下有一个名叫build.sh的脚本,但是没有可执行权限,现在要将所有的build.sh假如可执行权限. pengdl@debian:~/work/SDK_3 ...

  5. jquery ajax请求了两次问题

    页面有一个请求form: <form method="post" id="signin"> <label for="orderid& ...

  6. No Entertainment!

    今天决定去打印一个“No Entertainment”的横幅,贴在电脑的旁边.这其实是很久以前的事了,却搁浅到了现在.也正因为如此,今天想起来也觉得格外刻不容缓,内心好似义愤填膺,便写下这愤慨的独白. ...

  7. Masonry 布局 cell 高度适应的一种方案(实现类似朋友圈简单布局)

    来源:伯乐在线 - 夏天然后 链接:http://ios.jobbole.com/89298/ 点击 → 申请加入伯乐在线专栏作者 前言: 我模仿的是微博的布局所以也就没有 评论动态刷新cell. 1 ...

  8. IOS开发 xcode报错之has been modified since the precompiled header was built

    转载的文章  很实用 IOS开发xcode报错之has been modified since the precompiled header was built 今天做百度地图的时候第一次发现下面错误 ...

  9. java根据图片和文字生成自定义图片

    import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; i ...

  10. C#读取Word模板替换相应的字符串（标签）生成新的Word

    在平常工作中,生成word的方式主要是C#读取html的模板文件处理之后保存为.doc文件,这样的好处是方便,快捷,能满足大部分的需求.不过有些特殊的需求并不能满足,如要生成的Word为一个表格,只是 ...