怎样实现QQ登录 JS SDK版

JavaScript017

怎样实现QQ登录 JS SDK版,第1张

创建项目,创建完成项目后、将会得到应用ID、应用密钥这两个字符串:

将下载下来的库添加到本地项目中,选择选项:

其次添加依赖框架、这步很重要,

所要添加的依赖框架框架:

AdSupport.framework

Security.framework

StoreKit.framework

ImageIO.framework

MapKit.framework

QuartzCore.framework

SystemConfiguration.framework

CoreTelephony.framework

CoreGraphics.framework

添加完成、编译....

最后代码实现...显示横幅广告

这里需要做3件事:

1)首先要到AppController.mm 中初始化代理

2)调用initQuMiGuangGao初始化方法

3)显示广告横幅

<1>将所要现实的那个.cpp文件改成.mm文件

<2>在.mm文件中把头文件包含进来

             项目需求是用人单位设置目标打卡点,之后程序基于目标当前经纬度计算与目标经纬度的距离。此项目基于微信JSSDK,以及腾讯地图(腾讯地图的使用方式此处不做赘述,自行参考 API ,日后有空本人会更新一篇);

           1、  首先我们的项目需要配置公众号的安全域名,具体步骤是:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。值得一提的是,如果想微信不弹出以下这种提示的话,可以顺便设置公众号的业务域名

           2、设置安全域名后我们可以接入  JSSDK  ,从而简单的实现一些较复杂的功能;

                1、在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js;

                2、所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每 次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

                       wx.config({

                                       debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数 信息会通过log打出,仅在pc端时才会打印。

                                       appId: '', // 必填,公众号的唯一标识

                                       timestamp: , // 必填,生成签名的时间戳

                                      nonceStr: '', // 必填,生成签名的随机串

                                      signature: '',// 必填,签名,见附录1

                                      jsApiList: [  getLocation ] // 必填,需要使用的JS接口列表我们这里需要使用的是地理位置

                      })

              3、wx.ready(function(){

                         // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如  果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

                            wx.getLocation({

                                    type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给                                                                                openLocation用的火星坐标,可传入'gcj02'

                                    success: function (res) {

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

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

                                            var speed = res.speed// 速度,以米/每秒计

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

                                 }

                         })

                   })

至此,我们的准备工作基本已经做完,getLocation方法会返回用户当前位置的经纬度以及一些其他的参数;下面我们来计算用户的当前位置和目标位置距离;

3、我们可以在网上轻易的找到这种根据两点经纬度计算距离的方式,下面例举一个亲测误差较小       的demo:

    function getFlatternDistance(lat1,lng1,lat2,lng2){

                var f = getRad((lat1 + lat2)/2)

                var g = getRad((lat1 - lat2)/2)

                var l = getRad((lng1 - lng2)/2)

                 var sg = Math.sin(g)

                 var sl = Math.sin(l)

                 var sf = Math.sin(f)

                 vars,c,w,r,d,h1,h2

                 var a = EARTH_RADIUS

                 var fl =1/298.257

                 sg = sg*sg

                 sl = sl*sl

                 sf = sf*sfs= sg*(1-sl) + (1-sf)*sl

                  c = (1-sg)*(1-sl) + sf*sl

                  w = Math.atan(Math.sqrt(s/c))

                  r = Math.sqrt(s*c)/w

                  d = 2*w*a

                  h1 = (3*r -1)/2/c

                  h2 = (3*r+1)/2/s

                 returnd*(1+ fl*(h1*sf*(1-sg) - h2*(1-sf)*sg))

}

我们只需要简单的将两个点的经纬度作为参数传入参数内即可;

但是,腾讯给我们提供了更简单的方法(使用此方法的前提是已经当前页面已经接入腾讯地图):

                  1、var e = new qq.maps.LatLng(latitude,longitude)//括号里是 目标打卡点的纬度经度

                  2、var f=   new qq.maps.LatLng(latitude,longitude)//用户当前位置的纬度经度;

                  3 var  distance =                                                                  parseInt(qq.maps.geometry.spherical.computeDistanceBetween(e, f)) //此时此刻 计算出的  distance ,即为两点间的 直线距离

                  4、我们假设我们允许在目标打卡点五十米以内打卡,

                          if( distance <=50){

                                  alert("打卡成功了")

                          }else if( distance >50){

                                 alert("距离打卡点超过五十米,打卡失败")

                         }else{

                                 alert("出错了")

                         }

至此,一个简单的考勤系统即算完成了,第一次写,语句可能啰嗦繁杂了些,我们可以来看一下最终的效果图: