微信jssdk中的使用

1.jssdk使用

   获取地址：

   

 function location(params) {
                wx.ready(function () {
                    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; // 位置精度
                            var str = " 您好！<br>当前位置：<br>纬度：" + res.latitude + "<br>经度：" + res.longitude + "<br>速度：" + res.speed + "<br>精度：" + res.accuracy + "<br>";
                            return str;
                        },
                        fail: function () {
                            //$("#msgDiv").html(userid + " 您好！<br>获取位置信息失败");
                            alert("erro获取位置信息失败");
                        }
                    });
                });
             }

   在调用之前需要对签名认证：

   

   function init(url) {
                    getConfig(url).then(function (data) {
                        wx.config({
                            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: data.appId, // 必填，公众号的唯一标识
                            timestamp: data.timestamp, // 必填，生成签名的时间戳
                            nonceStr: data.nonceStr, // 必填，生成签名的随机串
                            signature: data.signature, // 必填，签名，见附录1
                            jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        });
                    });
                }

    验证历程（狗血的历程）：

        一般验证逻辑是：

              后台获取：

                appId = appId,
                timestamp = timestamp,
                nonceStr = nonceStr,
                ticket = ticket,
                signature = signature

           这里需要HTML前台访问的URL这个URL在微信中调用就是有CODE,STATE的那个URL,

            http://app.xxxxxxx.com/xx/xxx/xxx/index?code=te4pwVnqFuM48OFJUIhJ8Vg2Upc-uWmgR79NNswOi8s&state=1

           把这个URL传回后台得到signature，然后再把：

                 appId = appId,
                timestamp = timestamp,
                nonceStr = nonceStr,
                ticket = ticket,
                signature = signature

              传回前台JS处理：

           当执行到：

           

function location(params) {
                wx.ready(function () {
                    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; // 位置精度
                            var str = " 您好！<br>当前位置：<br>纬度：" + res.latitude + "<br>经度：" + res.longitude + "<br>速度：" + res.speed + "<br>精度：" + res.accuracy + "<br>";
                            return str;
                        },
                        fail: function () {
                            //$("#msgDiv").html(userid + " 您好！<br>获取位置信息失败");
                            alert("erro获取位置信息失败");
                        }
                    });
                });
            }

            就可以通过了

            Angularjs中的应用分主享:

                 其中URL中的参数url=后台的就是上面那个地址

                 return $http({
                        method: 'GET',
                        url: BASE_URL + '/getWXConfig?url=' + encodeURIComponent(url),
                    }).then(function(res) {
                        return res.data;
                    });

             可以把所有wx.xxxx()全部放到service中调用。

 //微信服务
        .factory("WXServices", ['$http',  'BASE_URL', function ($http,  BASE_URL) {
                var WXServices = {};
                WXServices.init = init;
                WXServices.pay = pay;
                WXServices.location = location;
                return WXServices;
                function init(url) {
                    getConfig(url).then(function (data) {
                        wx.config({
                            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: data.appId, // 必填，公众号的唯一标识
                            timestamp: data.timestamp, // 必填，生成签名的时间戳
                            nonceStr: data.nonceStr, // 必填，生成签名的随机串
                            signature: data.signature, // 必填，签名，见附录1
                            jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        });
                    });
                }
               
             function location(params) {
                wx.ready(function () {
                    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; // 位置精度
                            var str = " 您好！<br>当前位置：<br>纬度：" + res.latitude + "<br>经度：" + res.longitude + "<br>速度：" + res.speed + "<br>精度：" + res.accuracy + "<br>";
                            return str;
                        },
                        fail: function () {
                            //$("#msgDiv").html(userid + " 您好！<br>获取位置信息失败");
                            alert("erro获取位置信息失败");
                        }
                    });
                });
            }

                function getConfig(url) {
                    return $http({
                        method: 'GET',
                        url: BASE_URL + '/getWXConfig?url=' + encodeURIComponent(url),
                    }).then(function(res) {
                        return res.data;
                    });
                }

            }
        ])

 在controller中 调用即可       

 .controller('signCtrl', ['$scope', 'WXServices', '$location', 'BASE_URL', function ($scope,WXServices, $location, BASE_URL) {
                 var vm = this;
                  var absurl = $location.absUrl();
                 var okurl = BASE_URL + pathUrl;
                 var url=absurl.split('#')[0];
                 WXServices.init(url);
                  vm.locationStr=WXServices.location();
          }
        ])

 

 如果出现：

     {errMsg: "config:invalid signature"}

     {errMsg: "config:fail"}

      检查你的URL与生成signature用的url是否一至

                appId                timestamp                 nonceStr                ticket          signature

         这几个检也要看一下.

     如果是spa有可能会有#xxx/xxx/xx这一段要去掉

     以上是二天的研究结果,与大家分享!

   my god！