UNI-APP开发微信公众号(H5)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/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。内容如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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