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

你鹅

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

使用的模块方式引用微信 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/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 }

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

来源：https://www.cnblogs.com/shen55/p/11077677.html