最近在使用开发项目,需要在公众号上运行。需要实现定位获取经纬度的功能。
使用的模块方式引用微信 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/jweixin-module@1.4.1/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。内容如下:

1 // import request from './request'; //笔者自己封装的网络请求类,也可以直接使用uni.request
2 import {
3 post
4 } from './wxRequest';
5 var jweixin = require('jweixin-module');
6
7 export default {
8 //判断是否在微信中
9 isWechat: function() {
10 var ua = window.navigator.userAgent.toLowerCase();
11 if (ua.match(/micromessenger/i) == 'micromessenger') {
12 // console.log('是微信客户端')
13 return true;
14 } else {
15 // console.log('不是微信客户端')
16 return false;
17 }
18 },
19 //初始化sdk配置
20 initJssdkShare: function(callback, url) {
21 //服务端进行签名 ,可使用uni.request替换。 签名算法请看文档
22 post(
23 'https://fbyc.microchainsoft.cn/index/wechat/getSignPackage',
24 {
25 url: url
26 },
27 function(res) {
28 // console.log(res)
29 if (res.data) {
30 jweixin.config({
31 debug: true,
32 appId: res.data.appId,
33 timestamp: res.data.timestamp,
34 nonceStr: res.data.nonceStr,
35 signature: res.data.signature,
36 jsApiList: [
37 'checkJsApi',
38 'onMenuShareTimeline',
39 'onMenuShareAppMessage',
40 'getLocation'
41 ]
42 });
43 //配置完成后,再执行分享等功能
44 if (callback) {
45 callback(res.data);
46 }
47 }
48 });
49 },
50 initJssdk:function(callback){
51 post('https://fbyc.microchainsoft.cn/index/wechat/getSignPackage',{},
52 function (res) {
53 if(res.data){
54 jweixin.config({
55 debug: true,
56 appId: res.data.appId,
57 timestamp: res.data.timestamp,
58 nonceStr: res.data.nonceStr,
59 signature: res.data.signature,
60 jsApiList: [
61 'checkJsApi',
62 'getLocation'
63 ]
64 });
65 //配置完成后,再执行分享等功能
66 if (callback) {
67 callback(res.data);
68 }
69 }
70 })
71 },
72 //在需要自定义分享的页面中调用
73 share: function(data, url) {
74 url = url ? url : window.location.href;
75 if (!this.isWechat()) {
76 return;
77 }
78 //每次都需要重新初始化配置,才可以进行分享
79 this.initJssdkShare(function(signData) {
80 jweixin.ready(function() {
81 var shareData = {
82 title: data && data.title ? data.title : signData.site_name,
83 desc: data && data.desc ? data.desc : signData.site_description,
84 link: url,
85 imgUrl: data && data.img ? data.img : signData.site_logo,
86 success: function(res) {
87 //用户点击分享后的回调,这里可以进行统计,例如分享送金币之类的
88 // post('/api/member/share');
89 },
90 cancel: function(res) {}
91 };
92 //分享给朋友接口
93 jweixin.onMenuShareAppMessage(shareData);
94 //分享到朋友圈接口
95 jweixin.onMenuShareTimeline(shareData);
96 });
97 }, url);
98 },
99 //在需要定位页面调用
100 location: function(callback) {
101 if (!this.isWechat()) {
102 console.log('不是微信客户端')
103 return;
104 }
105 console.info('定位')
106 this.initJssdk(function(res) {
107 jweixin.ready(function() {
108 console.info('定位ready')
109 jweixin.getLocation({
110 type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
111 success: function (res) {
112 // console.log(res);
113 callback(res)
114 },
115 fail:function(res){
116 console.log(res)
117 },
118 // complete:function(res){
119 // console.log(res)
120 // }
121 });
122 });
123 });
124 }
125 }
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、页面中使用
1 // #ifdef H5
2 //获取定位经纬度
3 if (this.$wechat && this.$wechat.isWechat()) {
4 this.$wechat.location(function (res) {
5 console.log(res)
6 // let latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
7 // let longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
8 // todo
9 let latitude = 31.14979;
10 let longitude = 121.12426;
11
12 //根据经纬度,解析区域,提示用户输入
13 });
14 }
15 // #endif
后端服务器,可以参考:https://my.oschina.net/superkangning/blog/368043
来源:https://www.cnblogs.com/shen55/p/11077677.html
