UNI-APP开发微信公众号（H5）JSSDK使用

Posted 2022-02-07 shen55

最近在使用开发项目，需要在公众号上运行。需要实现定位获取经纬度的功能。

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

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

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

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

   npm install jweixin-module --save  

    

2. 下载使用方式

下载地址：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。内容如下：

  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 

View Code

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