博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
UNI-APP开发微信公众号(H5)JSSDK使用
阅读量:5286 次
发布时间:2019-06-14

本文共 6067 字,大约阅读时间需要 20 分钟。

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

使用的模块方式引用微信 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. 下载使用方式

下载地址:

 

使用

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://www.cnblogs.com/shen55/p/11077677.html

你可能感兴趣的文章
hdu 2807 The Shortest Path 矩阵
查看>>
熟悉项目需求,要知道产品增删修改了哪些内容,才会更快更准确的在该项目入手。...
查看>>
JavaScript 变量
查看>>
java实用类
查看>>
smarty模板自定义变量
查看>>
研究称90%的癌症由非健康生活习惯导致
查看>>
命令行启动Win7系统操作部分功能
查看>>
排序sort (一)
查看>>
Parrot虚拟机
查看>>
Teamcenter10 step-by-step installation in Linux env-Oracle Server Patch
查看>>
Struts2学习(三)
查看>>
Callable和Runnable和FutureTask
查看>>
GitHub 多人协作开发 三种方式:
查看>>
文本域添加编辑器
查看>>
Yum安装MySQL以及相关目录路径和修改目录
查看>>
java获取hostIp和hostName
查看>>
关于web服务器和数据库的各种说法(搜集到的)
查看>>
C# Stream 和 byte[] 之间的转换
查看>>
OMG: daily scrum nine
查看>>
redis与spring结合错误情况
查看>>