uniapp引入微信jssdk来获取经纬度(公众号)

忘了哪保存的了,先记录一下.侵删
最近在使用开发项目，需要在公众号上运行。需要实现定位获取经纬度的功能。

使用的模块方式引用微信 js-sdk

引用方法：https://ask.dcloud.net.cn/article/35380

github：https://github.com/zhetengbiji/jweixin-module

NPM安装方式（不会用NPM就不要用这种方式）

npm install jweixin-module --save

下载使用方式
下载地址：https://unpkg.com/[email protected]/out/index.js

使用

var jweixin = require('jweixin-module')  
jweixin.ready(function(){  
    // TODO  
});  

两个地方，对使用方法都像上面说的那样简单。但是真要是用起来，就悲剧了。特别是新手。

DCloud官网的论坛，有分享的例子http://ask.dcloud.net.cn/article/36007。

我这里做个定位接口例子。

首先要看微信的文档。清楚大致的流程。https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1、common目录，创建文件，名称是wechat.js。内容如下：

// import request from './request'; //笔者自己封装的网络请求类，也可以直接使用uni.request  import {    post} from './wxRequest';var jweixin = require('jweixin-module');export default {    //判断是否在微信中      isWechat: function() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/micromessenger/i) == 'micromessenger') {
            // console.log('是微信客户端')
            return true;
        } else {
            // console.log('不是微信客户端')
            return false;
        }
    },
    //初始化sdk配置  
    initJssdkShare: function(callback, url) {
        //服务端进行签名 ，可使用uni.request替换。 签名算法请看文档  
        post(
            'https://fbyc.microchainsoft.cn/index/wechat/getSignPackage',
            {
                url: url
            },
            function(res) {
                // console.log(res)
                if (res.data) {
                    jweixin.config({
                        debug: true,
                        appId: res.data.appId,
                        timestamp: res.data.timestamp,
                        nonceStr: res.data.nonceStr,
                        signature: res.data.signature,
                        jsApiList: [
                            'checkJsApi',
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage',
                            'getLocation'
                        ]
                    });
                    //配置完成后，再执行分享等功能  
                    if (callback) {
                        callback(res.data);
                    }
                }
        });
    },
    initJssdk:function(callback){
        post('https://fbyc.microchainsoft.cn/index/wechat/getSignPackage',{},
            function (res) {
                if(res.data){
                    jweixin.config({
                        debug: true,
                        appId: res.data.appId,
                        timestamp: res.data.timestamp,
                        nonceStr: res.data.nonceStr,
                        signature: res.data.signature,
                        jsApiList: [
                            'checkJsApi',
                            'getLocation'
                        ]
                    });
                    //配置完成后，再执行分享等功能  
                    if (callback) {
                        callback(res.data);
                    }
                }
            })
    },
    //在需要自定义分享的页面中调用  
    share: function(data, url) {
        url = url ? url : window.location.href;
        if (!this.isWechat()) {
            return;
        }
        //每次都需要重新初始化配置，才可以进行分享  
        this.initJssdkShare(function(signData) {
            jweixin.ready(function() {
                var shareData = {
                    title: data && data.title ? data.title : signData.site_name,
                    desc: data && data.desc ? data.desc : signData.site_description,
                    link: url,
                    imgUrl: data && data.img ? data.img : signData.site_logo,
                    success: function(res) {
                        //用户点击分享后的回调，这里可以进行统计，例如分享送金币之类的  
                        // post('/api/member/share');
                    },
                    cancel: function(res) {}
                };
                //分享给朋友接口  
                jweixin.onMenuShareAppMessage(shareData);
                //分享到朋友圈接口  
                jweixin.onMenuShareTimeline(shareData);
            });
        }, url);
    },
    //在需要定位页面调用
    location: function(callback) {
        if (!this.isWechat()) {
            console.log('不是微信客户端')
            return;
        }
        console.info('定位')
        this.initJssdk(function(res) {
            jweixin.ready(function() {
                console.info('定位ready')
                jweixin.getLocation({
                    type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                    success: function (res) {
                        // console.log(res);
                        callback(res)
                    },
                    fail:function(res){
                        console.log(res)
                    },
                    // complete:function(res){
                    //     console.log(res)
                    // }
                });
            });
        });
    }
}

2、main.js加载该文件

1 // #ifdef H5  
2 import wechat from './common/util/wechat'
3 if(wechat.isWechat()){
4     Vue.prototype.$wechat =wechat;
5 }
6 // #endif  

3、页面中使用

             // #ifdef H5
             //获取定位经纬度
             if (this.$wechat && this.$wechat.isWechat()) {
                  this.$wechat.location(function (res) {
                      console.log(res)
                     // let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                     // let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                     // todo
                     let latitude = 31.14979;
                     let longitude = 121.12426; 
                     
                     //根据经纬度，解析区域，提示用户输入
                  });
             }
             // #endif

后端服务器，可以参考：https://my.oschina.net/superkangning/blog/368043